如何在HTML5中正确使用图像srcset

Question

我已经设置了以下img srcset：

<img srcset="http://via.placeholder.com/320x150 320w,
             http://via.placeholder.com/480x150 480w,
             http://via.placeholder.com/800x150 800w"
        src="http://via.placeholder.com/800x150"
      sizes="(max-width: 320px) 280px,
             (max-width: 480px) 440px,
             800px"
      width="200" />

无论我如何设置img的宽度，或者我如何调整窗口大小，chrome总是会下载并显示800px宽的图像。是什么赋予了？添加尺寸属性也无效。我引用了这个article。

在这里演示：http://jsfiddle.net/7ek62m13/1/

Answer 1

您正在以正确的方式使用srcset。 Srcset用于当您拥有大图像并且在较小的设备上具有较小的格式时。如果加载最大的图像，则无需加载另一个较小的图像（因为srcset意味着同一图像）。这导致当您在手机上打开此代码时，它将显示最小的图像，但是当您在桌面上时，它将打开常规图像。如果您再次升级浏览器，srcset将用更大的图像替换您的图像，但它永远不会交换回较低的图像。我希望我说得更清楚一些。