时间戳

首页 > 解决方案 > 浏览器选择了错误的 srcset 图像

srcset - 浏览器选择了错误的 srcset 图像

问题描述

我正在尝试以srcset这种方式实现

<img class="i-product-image-big" 
srcset="http://dev.test:8000/uploads/thumbnail-80/1602202734The_Reptile_Room_by_Daniel_Handler.webp 80w, 
http://dev.test:8000/uploads/thumbnail-160/1602202734The_Reptile_Room_by_Daniel_Handler.webp 160w, 
http://dev.test:8000/uploads/thumbnail-320/1602202734The_Reptile_Room_by_Daniel_Handler.webp 320w, 
http://dev.test:8000/uploads/thumbnail-640/1602202734The_Reptile_Room_by_Daniel_Handler.webp 640w, 
http://dev.test:8000/uploads/thumbnail-960/1602202734The_Reptile_Room_by_Daniel_Handler.webp 960w," 
src="http://dev.test:8000/uploads/thumbnail-160/1602202734The_Reptile_Room_by_Daniel_Handler.webp" 
alt="The Reptile Room by Daniel Handler">

sizes我通过像这样添加来编辑代码

<img class="i-product-image sidebar_image" loading="lazy" 
sizes=" (min-width 200px) 320px, (min-width 576px) 80px, (min-width 768px) 160px, 100vw" 
srcset="http://dev.test:8000/uploads/thumbnail-960/1586515257Little_History_of_the_World.webp 960w
..........

我首先以响应模式在私人窗口中打开网站，以确保浏览器没有加载较大的版本，但问题是我发现浏览器选择了错误的图像版本（大小）。在这里它应该选择图像的 320 像素（它是 322 像素，包括每边 1 像素的边框，图像本身是 320 像素）版本的图像，但它会选择图像的 640 像素版本。为什么会这样以及如何在不使用picture标签的情况下修复它？

在此处输入图像描述

我在 css 中减小了图像的大小，但仍然加载 640xp 版本

在此处输入图像描述

sizes我这样反转

sizes=" (max-width 575px) 320px, (max-width 767px) 80px, (min-width 768px) 160px, 100vw"

但这也不起作用

标签： srcset

解决方案

好的，在这里做了一些测试（创建了一些填充图像进行调试）。找到导致您的问题的原因。由于无法查看您的完整 HTML 代码，我可以将 320 像素宽的图像显示在一个简单的、手工编码的 HTML 页面中。当我添加标准视口标签：<meta name="viewport" content="width=device-width, initial-scale=1">时，由于视口缩放，640 像素宽的图像将再次显示。如果我将您的代码发布在 SE 上的一个片段中，同样的事情也会发生。

此外，如果我320_Image.png 320w,用320_Image.png 2x,和替换640_Image.png 1x,，将显示 320 像素图像，但在桌面查看时显示会损坏。

如果您要做的只是提供基于视口宽度的图像大小，则最好使用160_Image.png 160w，而对于分辨率切换，请使用：160_Image.png 1x. MDN上关于响应式图像的综合资源更全面地描述了这一点。而且，根据您不使用该<picture>元素的偏好，这篇文章是一个很好的资源。<picture>当您只想根据用户的设备提供适当的图像时，作者建议不要使用该元素。

为了快速演示，我稍微修改了代码，并使用虚拟图像来显示（不包括代码中所有图像的填充物）。如果在桌面上查看，图像将根据视口宽度切换大小。对于移动设备，它们将根据设备宽度进行切换。我只添加了CSS来将图像设置为全角调试，但是带有开关的图像没有此代码。

img {
  max-width: 100%;
  width: 100%;
}
<img class="i-product-image-big" srcset="80_Image.png 80w, 
    160_Image.png 160w, 
    https://i.stack.imgur.com/JkhiN.png 320w, 
    https://i.stack.imgur.com/Lwddt.png 640w, 
    https://i.stack.imgur.com/8Z9jL.jpg 960w" sizes="(max-width: 575px) 320px, (max-width: 767px) 640px, (min-width: 768px) 960px, 100vw" src="https://i.stack.imgur.com/8Z9jL.jpg" alt="Test Responsive Image">

推荐阅读