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>

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

当我改用低端移动设备＆＃34;即使在小分辨率下，它仍然只加载大图像。我也尝试过fiddler＆＃34;模拟调制解调器速度＆＃34;而且它也没有改变任何东西。

我会在每次尝试前不断清除缓存，因此不会出现缓存问题。

我希望我的网站在移动设备上尽可能快地加载，只按屏幕尺寸提供所需的图片？我该怎么办？为什么srcset会加载大图像？（我知道我可以诉诸<picture>，但仍然希望用srcset拍摄，因为它假设是正确的工具来完成这项工作..）

Answer 1

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

在某些网站上，例如toyota.ca或lexus.ca，您会注意到图像因屏幕大小不同而不同，并且更改浏览器宽度会触发更改。您可以在使这些站点最小化之后从这些站点获取代码。不幸的是，srcset本身无法完成此工作。

HTML5的srcset总是加载大图像（而且它没有被缓存）

1 个答案: