响应式图像：img srcset + Bootstrap，加载错误大小的图像答案

【问题标题】：Responsive images: img srcset + Bootstrap, wrong size image gets loaded响应式图像：img srcset + Bootstrap，加载错误大小的图像
【发布时间】：2015-04-06 11:56:50
【问题描述】：

我正在使用带有响应式图像的 Bootstrap。我想通过为浏览器提供多种图像尺寸来优化加载时间。根据this article 的说法，像这样使用 srcset 的简单方法有助于让浏览器选择最佳图像尺寸：

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">

我的问题是，将它与 Bootstrap img-responsive 类结合使用，即使只需要一张小图片，也会加载大尺寸图片。

此处的代码示例：Bootply。 使用 Chrome 进行测试，它内置了对 srcset 的支持！（其他一些浏览器需要 picturefill.js 来识别它。）

如果您复制图像的源代码（或查看 Chrome 开发者工具中的网络选项卡），您会看到 750 宽度的版本被加载并调整为小图像，即使有较小的版本可以最适合使用。（如果加载图片填充JS以支持img srcset，IE和Firefox中也会发生同样的事情。）

我做错了什么？

【问题讨论】：

标签： twitter-bootstrap responsive-design picturefill srcset

【解决方案1】：

您需要使用sizes 属性告诉浏览器图像在您的设计中的宽度，否则默认为100vw（全视口）。

<img sizes="(max-width: 480px) calc(100vw - 10px), 480px" src="small.jpg" srcset="small.jpg 600w, medium.jpg 1000w, large.jpg 2000w" alt="yah" />

如果您可以在 CSS 中设置宽度，也可以使用lazySizes 自动为您计算出sizes。

使用lazySizes：

<img data-sizes="auto" class="lazyload" data-srcset="small.jpg 600w, medium.jpg 1000w, large.jpg 2000w" alt="yah" />

【讨论】：

谢谢@alexanderfarkas，lazysizes 非常棒。对于遇到类似问题的其他人：我错过了一个事实，即完全跳过 sizes 属性本身并不意味着浏览器会及时计算图像的最终大小。他们只是假设它们是 100vw（全设备宽度）。对于移动版本，这可能是一个不错的猜测。但是，如果您也使用 Bootstrap 在桌面版本中显示一些较小尺寸的图像（例如，许多列，其中一个中的小图像），您需要以一种或另一种方式设置 sizes 以避免提供最大版本图像。
谢谢...我终于用这个答案和这组sizes=" (min-width 40em) 576px, (min-width 64em) 720px, (min-width 72em) 960px, 100vw"解决了它
sizes 属性并不完美。即使我测量了 img 元素和 html 元素的宽度，计算出确切的百分比并将其应用为 vw，浏览器仍会加载较大的图像文件，即使较小的图像文件仍然适合而无需拉伸。
我看到的唯一可能的解释是，当浏览器解释“大小”值时，滚动条的宽度被添加到视口宽度中。不过，滚动条不是 html 文档的一部分。
vw 是针对孔视口计算的，包括“可能的”滚动条。在浏览器开始选择/下载图片时，他甚至不知道文档是否需要滚动条。