Chrome 在 <picture> HTML5 中加载 2 张图片答案

【问题标题】：Chrome loads 2 images in <picture> HTML5Chrome 在 <picture> HTML5 中加载 2 张图片
【发布时间】：2018-06-02 01:29:28
【问题描述】：

我有查看端口〜1200px，图片容器有180px。这段代码：

<picture>
    <img srcset="img_180.jpg 180w, img_350.jpg 350w" src="img_350.jpg" alt="">
</picture>

加载img_350.jpg。如果图像容器是 180px，为什么会发生这种情况？

好吧，也许我必须设置sizes 属性。如果视口 > 576px，我的图片容器是 180px，否则它有 100% 的宽度。所以这段代码：

<picture>
    <img sizes="(min-width: 576px) 180px, 100vw" srcset="img_180.jpg 180w, img_350.jpg 350w" src="img_350.jpg" alt="">
</picture>

同时加载img_180.jpg 和img_350.jpg。如何解决这个问题？我需要加载img_180.jpg 仅当用户具有> 576px 的视口，否则加载img_350.jpg，因为如果

您可能会认为是因为img_350.jpg 自动从src 加载，但这是不对的，因为我添加了<source ... type="image/webp"> 并且它加载了img_180.webp 和img_350.webp（没有.jpg）。

【问题讨论】：

【解决方案1】：

这是因为您同时定义了 src 和 srcset。删除 src 属性。这将让浏览器根据 srcset 和媒体查询计算 src。浏览器会自动加载正确的图片。

作为备用，请记住包含picturefill.js

【讨论】：

感谢您的回复。我已经说过，如果我添加像webp 这样的其他来源，那么不会加载.jpg 图像，所以它不依赖。加上删除 src 不是 W3C 有效的。
Chrome 支持 webp 格式。当它看到 webp 格式可用时，它更喜欢加载它，因为它是一种压缩格式。如果你的图片是那种格式的，那么加载 webp 有什么问题？此外，仅仅因为您没有手动添加 src 属性并且是由浏览器计算的，并不意味着您的页面不是 W3C 有效的。我建议阅读有关图片标签的这篇文章以了解其用法：webdesign.tutsplus.com/tutorials/…