Background-image - Webp, display in older Safari versions

user_12769201 0
Viewed 787

I need to display my .png in background-image in older Safari versions and for the rest of browsers just display .webp format.

I need to do it only throught CSS and HTML. No script insluded. (@supports doesn´t support older Safari versions as well).

Thank you for any advice!

sass safari css html
4 Answers

The webp format is not supported by Safari as of today, and I'm not sure if it is planned for implementation in the near future. But you can give the browser a choice whether to use webp or jpg like so.

The browsers are smart enough to download and use only the best supported image.

You can give a fallback or default img

refer this - How to add webp support in Safari browser

user_167725110 
<picture>
  <source srcset="
    /uploads/img_small.webp 1x,
    /uploads/img_big.webp 2x" type="image/webp">
  <source srcset="
    /uploads/img_small.jpg 1x, 
    /uploads/img_big.jpg 2x" type="image/jpeg">
  <img src="/uploads/img_small.jpg">
</picture>

The above example allows the browser to choose either a .jpeg or .webp image.

And as far as .webp goes, it is available on Safari 14

Answer Source

user_166696580 
<picture>
  <source type="image/svg+xml" srcset="stackoverflow.svg">
  <source type="image/webp" srcset="stackoverflow.webp">
  <img src="stackoverflow.png">
</picture>

This allows browser to reject the unsupported file types.

Source

user_106237030

Just for completenes sake, image-set is the way to set webp background-image with fallback:

.some-class {
  background-image: url('fallback-image.png');
  background-image: image-set(
    url('image.webp') 1x,
    url('image@2x.webp') 2x,
    url('fallback-image.png') 1x,
    url('fallback-image@2x.png') 2x
  );
}

The webkit-prefix might have to be used depending on the browser. And to this day firefox does not seem to support it. Check out caniuse for more info.

Edit: Just tried it myself in firefox and the webkit-prefix seems to work. This just shows that one should rather trust the official docs and test it yourself.

user_84306560
Related