如何在图片标签上使用后备 - Safari Webp

Question

我使用的代码如下：

<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>

我希望当某些版本的 Safari 等浏览器不支持 Webp 图像格式时，根据媒体查询回退到以下来源，而不是直接到“default_img.jpg”。

但我得到的不是那样，而是直接返回到：

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

有人知道我做错了什么吗？

Answer 1

嗯，我看到添加类型，开始正常工作：

<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>

如果用户代理不支持 MIME 类型，则跳过源元素。

例如：如果宽度 < 1200px 并且 webp 不受支持，它会退回到：

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

参考：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

如何在图片标签上使用后备 - Safari Webp

How to use fallback on picture tag - Safari Webp

html

safari

webp

fallback

picturefill