Background-image - Webp, display in older Safari versions - html

Question

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!

Answer 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

Answer 2

<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

Answer 3

<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

Answer 4

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.