图片元素、响应式图像、webp 图像和 safari 回退不起作用

Question

I would like to use webp images, of course safari doesn't support them so I also added the jpg's as fallbacks for different resolutions.

In chrome everything works fine, in safari it only works if I remove the webp versions from the image tag.

But I don't want to abandon webp images just because of safari...

My html code is below.

<picture>
   <source type="image/webp" media="(max-width: 1200px)" srcset="/public/images/picture0-m.webp"> 
   <source type="image/webp" media="(min-width: 1201px)" srcset="/public/images/picture0.webp">
   <source type="image/jpeg" media="(max-width: 1200px)" srcset="/public/images/picture0-m.jpg"> 
   <source type="image/jpeg" media="(min-width: 1201px)" srcset="/public/images/picture0.jpg">
   <img src="/public/images/picture0-m.jpg"type="image/jpeg">
</picture>

Answer 1

Recovering an old question - but it was one of the first links that I found when I had the same issue.

I resolved this by adding a srcset to the <img> tag:

<picture>
  <source sizes="(min-width: 1200px) 864px, (min-width: 992px) 708px,  (min-width: 768px) 540px, calc(100% - 4rem)" srcset="img.webp 345w, img2.webp 650w, img3.webp 1024w" type="image/webp">
  <source sizes="(min-width: 1200px) 864px, (min-width: 992px) 708px,  (min-width: 768px) 540px, calc(100% - 4rem)" srcset="img.jpg 345w, img2.jpg 650w, img3.jpg 1024w" type="image/jpg">
  <img src="img.jpg" srcset="img.jpg 345w, img2.jpg 650w, img3.jpg 1024w" alt="Whale">
</picture>