我正在将Bootstrap与响应图像配合使用。我想通过为浏览器提供多种图像尺寸来优化加载时间。根据本文的介绍，使用srcset这样的简单方法可以使浏览器选择最佳图像大小：
<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">
我的问题是，将其与Bootstrap img响应类结合使用时，即使只需要一小幅图片，也会加载大尺寸的图片。
此处的代码示例：Bootply。使用Chrome进行测试，它具有对srcset支持的内置支持！（其他一些浏览器可能需要picturefill.js才能识别它。）
如果您复制图像的来源（或在“网络”标签中的Chrome开发者工具中查看），则可以看到750宽度的版本已加载并调整为小图像，即使有较小的版本最适合使用。（如果将picturefill JS加载为支持img srcset，则在IE和Firefox中也会发生相同的情况。）
我究竟做错了什么？
您需要使用该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中设置宽度，则还可以使用lazySizessizes为您自动计算。
使用lazySizes：
<img data-sizes="auto" class="lazyload" data-srcset="small.jpg 600w, medium.jpg 1000w, large.jpg 2000w" alt="yah" />
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句