我正在使用带有响应式图像的Bootstrap。我想通过向浏览器提供多种图像大小来优化加载时间。根据{{3}}，像这样的srcset的简单方法可以让浏览器选择最佳图像大小：
<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">
我的问题是将它与Bootstrap img-responsive 类相结合，即使只需要一个小图片，也会加载大尺寸图片。
此处的代码示例：this article。 使用Chrome进行测试，它内置支持srcset支持！（其他一些浏览器需要picturefill.js来识别它。）
如果您复制图片来源（或在“网络”标签中查看Chrome开发者工具），您可以看到750宽度版本已加载，并调整为小图片，即使版本较小最佳使用。 （如果加载picturefill JS来支持img srcset，在IE和Firefox中也会发生同样的事情。）
我做错了什么？
答案 0 :(得分：7)
您需要使用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" />