How to use webp images and support safari

Question

I am trying to use webp images throughout my site due to the better compression. However I am aware that safari does not support webp. The images are loaded using background-image: url("img/img.webp) . I then apply other background properties.

I understand the <picture> tag can be used to show different images depending on browser support. Like so.

<picture>
    <source srcset="some_img.webp" type="image/webp">
    <img src="some_img.jpg"alt="">
</picture>

However it would be much more convenient if there was a way to do it using css to save me having to write new html and styling for all the images.

For instance something like this

#image-id {
    background-image: url("../img/img.webp", "../img/img.jpeg"); // show jpeg if webp not supported 
}

Or if that is not possible then maybe something like this

@media only screen and (safari-specific-property:) {
    background-image: url("../img/img.jpeg"); // show jpeg for safari
}

What is the best solution for using webp images while maintaining browser support, which ideally uses css?

Mozell

Answer 1

interesting questing here. As far as I know you could use either the cascade or @supports.

Let's see what happens when we use cascade:

.bg {
 /*fallback */
 background-image: url("https://www.gstatic.com/webp/gallery/2.jpg")
 background-image: url("https://www.gstatic.com/webp/gallery/1.webp");
}

It'll work fine but browsers that understand JPG and WebP (which are the majority) will make two requests, and that's not optimal.

Now, let's have a look to the @supports at rule.

@supports not (background-image: url("https://www.gstatic.com/webp/gallery/1.webp")) {
    .bg {
        background-image: url("https://www.gstatic.com/webp/gallery/2.jpg")
    }
}
.bg {
    background-image: url("https://www.gstatic.com/webp/gallery/1.webp");
}

Since the majority of browsers supports WebP I think this solution is ideal.

Browsers that don't support WebP will fall into the at-rule getting the JPG. Then they will read the next style that calls a WebP and since they don't support that feature they just will stick with the JPG. I'd like to know if you could try this in a safari browser.

Links of interest:

https://css-tricks.com/how-supports-works/

https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/

Aryan

The second solution is exactly what I was looking for. Thank you very much. – Mozell

Does it work on safari? I ask you because I'm running Windows and Internet Explorer doesn't support feature queries. – Aryan

I've just tried it out and it doesn't seem to work. For some reason @supports (background-image: url("img.webp") returns true even though safari doesn't support webp images. – Mozell

Well, you should fix this problem with javascript, sorry but there's not another solution by this time. I think this could help you: css-tricks.com/using-webp-images/#article-header-id-4 – Aryan

Your first statement is wrong: browser will only make one request to get last specified image. Your @supports example is also wrong: this will only check if browser supports background-image: url() function but not check for webp support. – Prediction

Answer 2

The final answer would be this:

@supports not (background-image: url("https://www.gstatic.com/webp/gallery/1.webp")) {
        .bg {
            background-image: url("https://www.gstatic.com/webp/gallery/2.jpg")
        }
    }
    @supports (background-image: url("https://www.gstatic.com/webp/gallery/1.webp")) {
        .bg {
            background-image: url("https://www.gstatic.com/webp/gallery/1.webp")
        }
    }

Because if you only put one @support query, the browser will download the other one that is not surounded with @support. This way the browser will only load one background-image: The one that fits better.

Phung

This is excellent - how do I get the jpg to show on IE 11 ? – Sarilda

Acording to caniuse.com/?search=supports, you can't use the @supports feature in IE. If you really want to detect the Web Browser to see if you should download the .webp image you can use JavaScript, but I wouldn't do it this way, cause the cool part of doing it in CSS is the small time it takes to load (compared to JS, of course). – Phung

Btw, according to bugzilla.mozilla.org/show_bug.cgi?id=1713460 - @supports checks if background-image is supported and not necessarily if you can check if avif or webp is supported. – Sarilda

Thanks, good solution. – Mitsue

Answer 3

I don't know if it changed, but here in 2022 I'm using this:

backround: url('image.jpg');
backround: url('image.webp');

And the browser is downloading only the webp.

Saarinen