Chrome 无法识别图片标签中的 webp 源

Question

我正在生成带有一组图像变体的 picture html 标签，但是当我在 chrome 中打开它时，浏览器仍然使用默认的 png 图像

我尝试了不同的 srcset 和大小集，但没有成功

<picture>
    <source type="image/jpeg" sizes="(max-width: 320px) 290px, (max-width: 1200px) 290px, (max-width: 576px) 290px, (max-width: 992px) 290px, (max-width: 768px) 290px" srcset="http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.jpeg 290w, http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.jpeg 290w, http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.jpeg 290w, http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.jpeg 290w, http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.jpeg 290w">
    <source type="image/webp" sizes="(max-width: 320px) 290px, (max-width: 1200px) 290px, (max-width: 576px) 290px, (max-width: 992px) 290px, (max-width: 768px) 290px" srcset="http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.webp 290w, http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.webp 290w, http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.webp 290w, http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.webp 290w, http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.webp 290w">
    <img src="http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.png 290w" srcset="http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.png 290w, http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.png 290w, http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.png 290w, http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.png 290w, http://example.loc/images/r2yROrnu4lgNHq8i2058qUUBnydmgO6HoUcwurSQ_290.png 290w" media="(max-width: 320px) 290px, (max-width: 1200px) 290px, (max-width: 576px) 290px, (max-width: 992px) 290px, (max-width: 768px) 290px" class="img-fluid" alt="">
</picture>

Answer 1

浏览器采用它支持的第一个 <source> 元素。因为所有浏览器都支持 image/jpeg，所以第二个 <source type="image/webp"> 总是被忽略。

要解决此问题，您必须颠倒 <source> 元素的顺序：

<picture>
    <source type="image/webp" …>
    <source type="image/jpeg" …>
    <img …>
</picture>

Chrome 无法识别图片标签中的 webp 源

Chrome dont recognize webp source in picture tag

html

responsive-images