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

时间:2019-08-23 11:20:03

标签: html responsive-images

我正在生成带有图像变体集的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>

1 个答案:

答案 0 :(得分:0)

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

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

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