twitter-bootstrap - 响应图像 : img srcset + Bootstrap, 错误大小的图像被加载

Question

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

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

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

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

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

我究竟做错了什么？

Answer 1

您需要使用 sizes属性告诉浏览器图像在你的设计中的宽度，否则默认为100vw (完整视口(viewport))。

<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为你。

使用惰性大小:

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