Image Srcset是如何工作的?

How Does Image Srcset Really Work?

本文关键字：工作 Srcset 何工作 Image      更新时间：2023-09-26

我创建了一个快速的例子来说明我到目前为止的经验。

  1. 160px的图像永远不会加载。
  2. 当我改变宽度为147px加载320px的图像。
  3. 当我改变宽度为227px加载640px的图片
  4. 当我改变宽度为453px 1280px

我本以为160px的图片会加载到浏览器的宽度大于160px为止，320px的图片会加载到浏览器的宽度大于320px为止，以此类推。

为什么不是这样呢?

编辑:看起来stackoverflow不是测试这个例子的好地方。您可能需要将代码复制粘贴到您自己的浏览器中，以复制不同的浏览器大小。
    window.onresize = displayWindowSize;
    window.onload = displayWindowSize;
    function displayWindowSize() {
        myWidth = window.innerWidth;
        myHeight = window.innerHeight;
        // your size calculation code here
        document.getElementById("dimensions").innerHTML = "Current screen width: " + myWidth + "px";
    };
	<div id="dimensions"></div>
	<img src="http://imgur.com/z5X66tR"
	     srcset="http://imgur.com/z5X66tR.png 160w, 
	              http://imgur.com/kPOTVv7.png 320w, 
	              http://imgur.com/xj9RPrV.png 640w, 
	              http://imgur.com/PgJsD95.png 1280w">

听起来好像你有一个2倍的屏幕，你的浏览器在大小的几何平均值上翻转。

回想一下，w数字只是图像的宽度(以图像像素为单位)，而不是关于浏览器窗口大小或诸如此类的命令。使用sizes的大小(默认为100vw)，您可以将w数字转换为等效的x数字。例如，当你的屏幕是320px宽时，你的四种尺寸相当于0.5 x, 1x, 2x, 4x。如果你有一个2倍的屏幕(这是mac电脑的默认设置)，那么浏览器通常会更喜欢2倍的源，也就是你的640w。

这解释了你的转换号码。320和640的几何平均值为452.5;你会注意到227*2 = 454。640和1280也是一样——几何平均值是905,453*2是906。

相关文章：