Img Srcset 属性未选择较小的图像

Question

<img> 元素 srcset 属性始终选择较大的 <img> src，即使尺寸媒体查询为 false。

使用<picture> 元素根据浏览器宽度强制选择图像效果很好。我通过this answer 了解到<picture> 和<img> srcset 属性的工作方式不同，<picture> 元素可以根据规则强制执行图像选择，而<img> srcset 则由浏览器自行决定。这可以根据屏幕像素密度、网络速度或浏览器采用的任何其他逻辑。作为回应，我尝试通过禁用 Chrome 浏览器的缓存来强制浏览器选择较小的图像，将浏览器的宽度缩小到远低于 800px 媒体查询（到大约 300px 以考虑我的视网膜显示器的 2 倍像素密度），甚至限制我自己与慢速 3g 网络的连接。尽管如此，Chrome 还是选择了更大的 800 像素图像。

到目前为止，这是我的 <img> 元素...

<img 
    src="/image-2.jpeg" 
    srcset="/image-1.jpeg 800w, /image-2.jpeg 600w" 
    sizes="(min-width: 800px) 800px, 600px"
>

始终将/image-1.jpeg 用作<img> src 属性。

Answer 1

对于所提供的代码不起作用的原因，我只能看到三个可能的原因；

(1)。浏览器支持。
(2)。文件位置或文件名不匹配。
(3)。代码中指定的图像大小与图像大小不匹配。

---

使用以下代码 sn-p。这适用于 Windows 10 上的 Firefox for Desktop。

当您调整浏览器窗口大小时，确认下面的 sn-p 是否适用于您的浏览器。如果没有，那么我们就是罪魁祸首。

如果确实有效，请检查以下内容：

--> 文件名（错别字）
--> 文件扩展名（.jpeg、.jpg、.png、...）
--> 图像位置 (/image-1.jpeg)
--> 图像大小（大小不匹配）[应该不重要]

如果一切正常，那么浏览器可能无法访问包含图像的文件夹。检查权限等。

<img src="https://picsum.photos/800/400?image=0"
 srcset="https://picsum.photos/800/400?image=0 800w,
         https://picsum.photos/700/350?image=1 700w,
         https://picsum.photos/600/300?image=2 600w,
         https://picsum.photos/500/250?image=3 500w,
         https://picsum.photos/400/200?image=4 400w,
         https://picsum.photos/300/150?image=5 300w,
         https://picsum.photos/200/100?image=6 200w,
         https://picsum.photos/150/75?image=7 150w,
         https://picsum.photos/100/50?image=8 100w"
 sizes="(min-width: 800px) 800px,
        (min-width: 700px) 700px,
        (min-width: 600px) 600px,
        (min-width: 500px) 500px,
        (min-width: 400px) 400px,
        (min-width: 300px) 300px,
        (min-width: 200px) 200px,
        (min-width: 150px) 150px,
        100px">

运行代码片段并调整浏览器窗口大小。

或者，您可以在 CodePen 上找到此代码。

我希望这会有所帮助。

和平?