如何使用图片标签的后备 - 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