响应式图片：img srcset + Bootstrap，加载了错误尺寸的图片
Responsive images: img srcset + Bootstrap, wrong size image gets loaded
我正在使用 Bootstrap 响应式图片。我想通过向浏览器提供多种图像尺寸来优化加载时间。根据 this article，像这样使用 srcset 的简单方法有助于让浏览器选择最佳图像大小：
<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">
我的问题是，将其与 Bootstrap img-responsive class 相结合，尺寸较大即使只需要一张小图片也会加载。
此处的代码示例：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中设置宽度，您还可以使用lazySizes自动为您计算sizes。
使用 lazySizes：
<img data-sizes="auto" class="lazyload" data-srcset="small.jpg 600w, medium.jpg 1000w, large.jpg 2000w" alt="yah" />
我正在使用 Bootstrap 响应式图片。我想通过向浏览器提供多种图像尺寸来优化加载时间。根据 this article，像这样使用 srcset 的简单方法有助于让浏览器选择最佳图像大小：
<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">
我的问题是，将其与 Bootstrap img-responsive class 相结合，尺寸较大即使只需要一张小图片也会加载。
此处的代码示例：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中设置宽度，您还可以使用lazySizes自动为您计算sizes。
使用 lazySizes：
<img data-sizes="auto" class="lazyload" data-srcset="small.jpg 600w, medium.jpg 1000w, large.jpg 2000w" alt="yah" />