How to use fallback on picture tag - Safari Webp

Question

I'm using a code like:

<picture class="image-holder">
    <source srcset="some_img.webp" media="screen and (max-width: 1200px)">
    <source srcset="some_img.webp" media="screen">
    <source srcset="some_img.jpg" media="screen and (max-width: 1200px)">
    <source srcset="some_img.jpg" media="screen">
    <img srcset="default_img.jpg" alt="">
</picture>

and what I hope is that when a browser like some versions of Safari doesn't support the Webp image format, fallback to the following source depending on media query and not directly to "default_img.jpg" .

But instead of that, what I get is a fallback direct to:

<img srcset="default_img.jpg" alt="">

Does anyone know what I'm doing wrong?

Which safari / os combo ? It works fine for me in MacOS Big Sur / Safari 14.0.3 Are you sure the paths are correct ? — Gabriele Petrioli, Feb 10 '21 at 18:55
Hi! the path are ok, it's working on Chrome, firefox, etc. is not working on safari 14.0.2, mac OS X catalina. — Marcos Etcheverry, Feb 11 '21 at 13:19
I don't have a live place to hack it. I found the issue. Anyway, thanks Gabriele. — Marcos Etcheverry, Feb 11 '21 at 20:11

score 5 · Accepted Answer · answered Feb 11 '21 at 20:08

Well, I saw that adding the type, starts to work properly:

<picture class="image-holder">
    <source srcset="some_img.webp" media="screen and (max-width: 1200px)" type="image/webp">
    <source srcset="some_img.webp" media="screen" type="image/webp">
    <source srcset="some_img.jpg" media="screen and (max-width: 1200px)">
    <source srcset="some_img.jpg" media="screen">
    <img srcset="default_img.jpg" alt="">
</picture>

if the MIME-type is not supported by the user agent the source element is skipped.

ex: if width < 1200px and the webp is unsupported, it fallback to:

<source srcset="some_img.jpg" media="screen and (max-width: 1200px)">

ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

Good to know. Thanks for posting the solution. – Gabriele Petrioli Feb 11 '21 at 20:11 — Gabriele Petrioli, Feb 11 '21 at 20:11

How to use fallback on picture tag - Safari Webp

1 Answers1