45

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.

Machavity
  • 30,841
  • 27
  • 92
  • 100
wohifov
  • 451
  • 1
  • 4
  • 4
  • 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 '20 at 19:25

5 Answers5

70

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.

Jeremy Caney
  • 7,102
  • 69
  • 48
  • 77
GEkk
  • 1,336
  • 11
  • 20
  • 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. – Oleg Apanovich Apr 09 '20 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. – A. Richards May 03 '20 at 18:44
  • 1
    what means for 1x, 2x? – Swee Hong May 19 '20 at 08: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 '20 at 11:09
  • Hope this solution will not affect the Any seo related issue and how ill google scrole the page. – Deepesh singh Sep 06 '20 at 19:33
  • I encounter this problem as well, but why does Safari in Iphone support webp(as the image did show up), but not for Mac. This fact boggle me... – Darky WC Apr 24 '21 at 07:23
  • Is there a way to do this for images in the CSS? Like background images? – jmona789 Sep 16 '21 at 14:36
  • 1
    In my observation, by including the src fallback on the 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 '22 at 09:58
  • Thanks Safari, that's a non sense, thank you to make it always complicated like for supporting Internet Explorer back in time. – TGrif Apr 03 '22 at 18:48
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

serniko97
  • 661
  • 5
  • 3
  • 2
    Just a heads up but Big Sur and iOS14 are still in beta so the general population won't see this until later this fall. – user2619824 Jul 26 '20 at 04:21
  • 3
    This has now been added to the stable version of safari 14 according to the release notes https://developer.apple.com/documentation/safari-release-notes/safari-14-release-notes I don't have access to Safari but if anyone do I really would like to have this confirmed. You can just test it here https://developers.google.com/speed/webp/gallery1 – Haze Oct 01 '20 at 08:58
  • 1
    @Haze I don't currently have access either, but CanIUse is now showing it as well: https://caniuse.com/webp – Veronica Watt Dec 11 '20 at 21:08
  • 1
    But macOS 10.x is still in use (and statcounter can't even count how many are using macOS 11+ https://gs.statcounter.com/os-version-market-share/macos/desktop/worldwide ) – David Cook Nov 10 '21 at 23:44
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("exampleimage@1-5x.webp") 1.5x,
            url("exampleimage@2x.webp") 2x
        );
background-image: image-set(
            url("exampleimage.jpg") 1x,
            url("exampleimage@1-5x.jpg") 1.5x,
            url("exampleimage@2x.jpg") 2x
        ) /* Safari */
Veronica Watt
  • 155
  • 2
  • 7
  • There is a relatively wide-ranging support for the image-set style property. https://caniuse.com/#feat=css-image-set – Dylan Maxey Jun 16 '20 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. – Veronica Watt Jun 18 '20 at 04: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");
}
Nata
  • 986
  • 9
  • 4
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.

Hamid Sarfraz
  • 1,089
  • 1
  • 14
  • 34