html – picture element, responsive images, webp images and safari fallback not working-ThrowExceptions

Exception or error:

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>
How to solve:

Leave a Reply

Your email address will not be published. Required fields are marked *