CODEWITHSUNDEEP
imagesafariwebp
wohifov
wohifov

Reputation: 481

How to add webp support in Safari browser

In my site, I have added all images in webp format. All those images are showing properly in Chrome and Firefox browsers, but they do not show properly in Safari.

Upvotes: 48

Views: 98515

Answers (5)

Nata
Nata

Reputation: 1194

You can follow the recommendations here to provide WebP format when a browser supports it, and jpg or png if it does not. Here is the gist of it:

For HTML, use the <picture> HTML5 tag:

<picture>
    <source srcset="img/my_image.webp" type="image/webp">
    <source srcset="img/my_image.jpg" type="image/jpeg">
    <img class="img-fluid" src="img/my_image.jpg" alt="Alt Text!">
</picture>

For CSS:

  1. Add a modernizr.js script to detect if a browser supports WebP format. You can customize the script to only look for the WebP support, and nothing else, to minimize overhead:

    <script src="modernizr.min.js"></script>

    This will add either webp or no-webp class to the <html> element, depending of the browser support for WebP:

    <html lang="en" class="webp"> or <html lang="en" class="no-webp">

  2. Use the classes above to load the appropriate images:

.no-webp .elementWithBackgroundImage {
    background-image: url("image.jpg"); 
}
.webp .elementWithBackgroundImage{
    background-image: url("image.webp");
}

  1. To get around the possibility of JavaScript being disabled in the browser and failing to run your modernizr.min.js script , add a class of no-js to the <html> tag:

    <html class="no-js">

And add the following before any other scripts:

<script>
    document.documentElement.classList.remove("no-js");
</script>

This will remove the no-js class on the <html> element when executed by the browser, if JavaScript is enabled. Otherwise, it will never be parsed, and the no-js class will stay. Hence, use this class to provide the default image:

.no-js .elementWithBackgroundImage {
  background-image: url("image.jpg");
}

Upvotes: 5

Veronica Watt
Veronica Watt

Reputation: 155

UPDATES:

  • There seems to be an official way to do this now, but as of this moment (Nov 2021) Safari doesn't support it yet (surprise!).
  • Firefox is finally on the image-set bandwagon. It also doesn't require a prefix.
  • Safari is finally supporting WEBP, so this "solution" is no longer useful (unless you want to use it for AVIF or other future formats) see bullet 1.

I don't have the reputation for commenting, but I wanted to pitch in a (likely temperamental) CSS background solution in addition to the <picture> option.

As of right now, Safari (both versions) is the only main browser to not support WEBP, but it also seems to be the only browser that supports image-set without a prefix.

So, if we use three blocks of code to allow full fallback for all browsers, then it would look something like:

background-image: url("exampleimage.webp"); /* Firefox - UPDATE: no longer needed in FF 88+! */
background-image: -webkit-image-set(
            url("exampleimage.webp") 1x,
            url("[email protected]") 1.5x,
            url("[email protected]") 2x
        );
background-image: image-set(
            url("exampleimage.jpg") 1x,
            url("[email protected]") 1.5x,
            url("[email protected]") 2x
        ) /* Safari */

Upvotes: 13

Hamid Sarfraz
Hamid Sarfraz

Reputation: 1135

The support for WebP image format is available in Safari 14, and it is not possible to support webp images in older Safari versions. You cannot just change the webp files to make them to work on incompatible Safari versions that do not support it. It will not work.

So, for older safari versions, your only solution is to maintain a copy of every image in PNG or JPG format, or use an image CDN to do this automatically for you. Image CDNs take an image file (JPEG or PNG) and convert it on the fly to webp image format if the browser supports it. Otherwise, it delivers the image in JPEG or PNG format to keep things working without any breakage.

Upvotes: 0

serniko97
serniko97

Reputation: 661

WebP official support has been added in Safari 14 on macOS Big Sur as well as iOS, iPadOS & company.

Source: https://www.macrumors.com/2020/06/22/webp-safari-14

Upvotes: 56

GEkk
GEkk

Reputation: 1366

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.

<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 browsers are smart enough to download and use only the best supported image.

Upvotes: 72

Related Questions