How to use WebP in sass

Question

In my scss file I have:

.banner{
    background-image: url("/images/image.jpg");
}

Now I've converted this to a WebP image. I know that if it were an image inside html I should do:

<picture>
    <source type="image/webp" srcset="images/image.webp">
    <source type="image/jpeg" srcset="images/image.jpg">
    <img src="images/image.jpg">
</picture>

However, how to do something similar in a sass SCSS file? (I'm using Reactjs)

Answer 1

There's no way to detect webp support with CSS.

The best you are likely to be able to achieve is to use JavaScript to detect support and add a class to an element (eg with modernizr ). Since the body element is usually outside the scope of the elements modified by React, adding the class there with modernizr shouldn't be a problem.

Then you can use that class to pick which rule to use:

.banner{
    background-image: url("/images/image.jpg");
}

.webp .banner{
    background-image: url("/images/image.webp");
}