CODEWITHSUNDEEP
htmlsafariwebpfallbackpicturefill
Marcos Etcheverry
Marcos Etcheverry

Reputation: 101

How to use fallback on picture tag - Safari Webp

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?

Upvotes: 4

Views: 2932

Answers (1)

Marcos Etcheverry
Marcos Etcheverry

Reputation: 101

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

Upvotes: 6

Related Questions