2

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!

Dima Malko
  • 227
  • 2
  • 19

4 Answers4

1

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

Ranan
  • 21
  • 2
  • Well this looks like something i was looking for, sadly i will have chance to test it on IOS on monday, if it works, you have the bounty :) Thanks mate! – Dima Malko Aug 28 '21 at 08:23
  • Hi i just tested it on Safari, sadly this option didnt work. Image still doesnt display. – Dima Malko Aug 30 '21 at 08:21
0
<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

Peter Missick
  • 146
  • 8
0
<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

Nirvik Basnet
  • 123
  • 1
  • 1
  • 6
0

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.

Tamali
  • 326
  • 2
  • 8