WebP support detection with @supports and @media

four-times-five.scss

.tile {
    background: url(tile.png);

    /* Chrome 66+, Edge 79+, Opera 53+, Android Brower 80+ */
    @media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution:.001dpcm) {
        @supports (background-image: -webkit-image-set(url('tile.webp') 1x)) {
            background: -webkit-image-set(url('tile.webp') 1x);
        }
    }

    /* FF 66+ */
    @supports (flex-basis: max-content) and (-moz-appearance: meterbar) {
        background: url(tile.webp);
    }
}