gpt4 book ai didi

google-chrome - HTML 5's srcset is always loading the large images (and it' s 未缓存)

转载 作者:行者123 更新时间:2023-12-04 13:45:21 27 4
gpt4 key购买 nike

这是我的 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 开发人员工具上,当我更改为“低端移动设备”时,它仍然只加载大图像,即使在小分辨率下也是如此。我也尝试过使用 fiddler “模拟调制解调器速度”,它也没有改变任何东西。
我在每次尝试之前都会清除缓存,所以这不是缓存问题。
我希望我的网站通过仅按屏幕尺寸提供所需的图像来尽可能快地在移动设备上加载。我应该怎么做,为什么不管实际设备分辨率如何,带有 srcset 的 img 元素仍然加载大图像? (我知道我可以求助于 <picture> 但仍然想尝试一下 srcset,因为它应该是适合这项工作的工具)

最佳答案

问题是由于设备的像素密度造成的,如果您使用的是视网膜手机或高于 1 像素密度的手机,那么浏览器将选择更大的图像。您需要结合使用 js 和标记来确定最适合使用的图像。
在诸如 toyota.ca 或 lexus.ca 之类的某些网站上,您会注意到图像因屏幕尺寸不同而不同,并且更改浏览器宽度会触发更改。您可以在取消缩小后从这些网站获取代码。不幸的是, srcset 本身无法完成这项工作。

关于google-chrome - HTML 5's srcset is always loading the large images (and it' s 未缓存),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49488455/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com