How to add webp support in Safari browser

image safari webp
wohifov picture wohifov · Oct 21, 2019 · Viewed 46k times · Source

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.

Answer

GEkk picture GEkk · Nov 16, 2019

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.

Related questions

Techniques for profiling memory in Safari desktop and iOS?

Updated 10/21: Changed title and question in order to possibly get an answer (other than "no"). We're experiencing leaks in Safari (confirmed in Windows and Mac, suspected in iOS). Are there any Safari extensions that lets one profile JavaScript/DOM memory …

Read More
Mobile Safari renders <img src="data:image/jpeg;base64..."> scaled on Canvas?

I try to render a local image loaded with a FileReader object on a Canvas on Safari Mobile on iOS6. But every image with data-URL gets rendered vertically scaled. Is this a bug? On Chrome it's rendered correctly. Demo Script …

Read More
Image stretching in flexbox in Safari

This is only an issue in Safari and looks like a Safari bug to me. Here is a fiddle with a simplified version of the issue. When an image is in a nested flexbox element with a width set and …

Read More