46

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.

1
  • 16
    Finally, Safari 14 has added support for webp images. As of 23 June 2020, Safari 14 is in beta and will be released later this year. It will take some time for adoption but it's great news nevertheless.
    – Matthew C
    Jun 25, 2020 at 19:25

5 Answers 5

71

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.

9
  • 3
    It a good answer cos it has second source tag for a fallback, if it would be only one there will problem with some safari versions. Apr 9, 2020 at 12:25
  • 3
    That is an excellent solution for a replacement for the img html tag but what would one do if the image was to come as a background-image in CSS? Also, I'm not a big fan of the idea of having to duplicate every image. Wish there was another way. May 3, 2020 at 18:44
  • 1
    what means for 1x, 2x?
    – Swee Hong
    May 19, 2020 at 8:24
  • 3
    It means pixel density if the display supports more dense pixels the browser will use the larger image. You can add width attribute instead, but not both, I just prefer that browser will choose the right one for the user device.
    – GEkk
    May 20, 2020 at 11:09
  • 1
    In my observation, by including the src fallback on the <img> tag, non-safari browsers will simply download both, which kinda defeats the purpose. Removing the fallback src does the trick where each browser downloads only the one it needs
    – parliament
    Jan 22, 2022 at 9:58
56

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

4
13

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 */
2
  • There is a relatively wide-ranging support for the image-set style property. caniuse.com/#feat=css-image-set Jun 16, 2020 at 12:16
  • 1
    @DylanMaxey yessir! However, as mentioned, Safari is the only one that does not require a prefix (-webkit-), and therefore is the only browser that will read the value without it. Also, while I'm here I'm going to reiterate that this "solution" may not work in the future, as non-prefixed support may widen. BUT I would hope by then Safari will accept WEBP. So, use at your own risk. Jun 18, 2020 at 4:22
5

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");
}
0

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.

2
  • 1
    Do you have another reference for the CDN support you refer to? There's no mention of file format conversion in the link you provided. Oct 20, 2020 at 22:20
  • The plugin page states this. Oct 22, 2020 at 6:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.