HTML5 的 srcset 始终加载大图像（并且未缓存）

Question

这是我的 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>

我在少数设备上进行了尝试，其中大部分都加载了图标-1280.png，只有少数设备加载了图标-780.jpg，none 我试过的设备加载了较小的图标图片，无论屏幕分辨率如何。

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

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

我希望我的网站在移动设备上尽可能快地加载，只提供按屏幕尺寸显示的所需图片。我应该怎么办？为什么带有 srcset 的 img 元素仍然加载大图像而不管实际设备分辨率如何？（我知道我可以求助于 <picture>，但仍然想尝试使用 srcset，因为它应该是完成这项工作的正确工具）

Answer 1

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

在某些网站上，例如 toyota.ca 或 lexus.ca，您会注意到图像因屏幕尺寸不同而不同，更改浏览器宽度会触发更改。你可以在 unminifiying 之后从这些站点获取代码。不幸的是，srcset 本身不能完成这项工作。

HTML5 的 srcset 始终加载大图像（并且未缓存）

HTML5's srcset is always loading the large images (and it's not cached)

mobile

google-chrome

responsive-design

srcset

responsive