HTML5 的 srcset 总是加载大图像（并且没有缓存）答案

【问题标题】：HTML5's srcset is always loading the large images (and it's not cached)HTML5 的 srcset 总是加载大图像（并且没有缓存）
【发布时间】：2018-03-26 09:46:34
【问题描述】：

这是我的 HTML：

<html>
<head>
 <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>serset test</title>
</head>
<body>
  <img srcset="/img/about/icon-320.png 320w,
                      /img/about/icon-480.jpg 480w,
                      /img/buy/icon-640.png 640w,
                     /img/buy/icon-780.jpg 780w,
                     /img/buy/icon-1280.png 1280w"       
           src="/img/buy/fallback.png"
           alt="responsive image">
</body>
</html>

我在少数设备上尝试过，大多数设备加载了 icon-1280.png，只有少数加载了 icon-780.jpg，我尝试过的设备都没有加载较小的图像，无论屏幕分辨率如何。

即使在 chrome 开发人员工具上，当我更改为“低端手机”时，它仍然只加载大图像，即使在小分辨率下也是如此。我还尝试了提琴手“模拟调制解调器速度”，它也没有改变任何东西。

我在每次尝试之前都会清除缓存，所以这不是缓存问题。

我希望我的网站尽可能快地在移动设备上加载，方法是仅按屏幕尺寸提供所需的图片。我该怎么办？为什么无论实际设备分辨率如何，带有 srcset 的 img 元素仍会加载大图像？（我知道我可以求助于<picture>，但仍然想尝试一下 srcset，因为它应该是适合这项工作的工具）

【问题讨论】：

我认为这与像素密度有关，但不是 100% 肯定，我遇到了同样的问题，最终使用 js 输出适当的图像。因此，如果您使用的是视网膜手机或像素密度高于 1 的手机，那么浏览器会选择更大的图像
@Huangism - 所以如果我理解正确，浏览器会这样做，因为 1280 像素的图像在具有 360 像素分辨率屏幕的 360 像素“视网膜手机”设备上看起来比提供 360 像素图像更好。这是否很明显并且值得额外的带宽？？
有些人会注意到，如果你只看一眼，你可能不会注意到。如果您比较视网膜与非视网膜，您会注意到。对于公众来说，这可能并不重要，但您不能仅通过使用 srcset 来真正阻止浏览器这样做。这真的很糟糕，因为如果它的工作方式不同，它会节省很多代码
@Huangism - 请发表您的评论作为答案，我会选择它作为接受的答案。
好吧，因为没有其他人回答，所以只发布它

标签： google-chrome mobile responsive-design responsive srcset

【解决方案1】：

问题是由于设备的像素密度，如果您使用的是视网膜手机或高于 1 像素密度的手机，那么浏览器将选择更大的图像。您需要结合使用 js 和标记来确定最适合使用的图像。

在一些网站，如 toyota.ca 或 lexus.ca，您会注意到不同屏幕尺寸的图像不同，并且更改浏览器宽度会触发更改。您可以在取消缩小这些站点后从这些站点获取代码。遗憾的是 srcset 本身无法完成这项工作。

【讨论】：

只是补充一点，有时这种行为实际上是需要的——当今大多数移动设备的密度是 2 倍。因此，在网页上定义为 300 像素大小（通过 css）的图像如果其源是 600 像素文件，则看起来会更好。如果出于某种原因（例如带宽限制），您希望完全控制下载的图像大小，而不管浏览器是否优化以获得最佳外观 - 使用 picture 元素强制浏览器通过媒体查询下载特定文件（而您不这样做）不必为此求助于 js 操作）。