响应式图片，srcset 为屏幕宽度的 25%，选择大图

Question

所以我有这段使用 scrset 的响应式图像代码：

<picture class="background-image">
   <source type="image/jpg" 
      srcset="http://localhost:61186/public/images/asia_1637411941_1920x1280.jpg 1920w,
              http://localhost:61186/public/images/asia_1637411941_1720x1147.jpg 1720w,
              http://localhost:61186/public/images/asia_1637411941_1520x1013.jpg 1520w,
              http://localhost:61186/public/images/asia_1637411941_1320x880.jpg 1320w,
              http://localhost:61186/public/images/asia_1637411941_1120x747.jpg 1120w,
              http://localhost:61186/public/images/asia_1637411941_920x613.jpg 920w,
              http://localhost:61186/public/images/asia_1637411941_720x480.jpg 720w,
              http://localhost:61186/public/images/asia_1637411941_520x347.jpg 520w,
              http://localhost:61186/public/images/asia_1637411941_320x213.jpg 320w">
    <img src="http://localhost:61186/asia_1637411941_1920x1280.jpg" alt="Asia" />
</picture>

这（与周围 html）在 360 像素宽的屏幕上呈现：

现在，图像元素的宽度约为 100px。但是 Chrome 加载 1120px 版本（无缓存/隐身标签）

现在理想情况下它会加载 320px 宽度的图像，因为元素只有 100px 宽度。但如果情况并非如此，那么基于 360px 的视口，我最多希望它选择图像的 520px 版本。但事实并非如此。

现在在 Chrome Lighthouse 中我受到了分数惩罚，因为我需要“properly size the images”。但我觉得我正在这样做。有人有解决方案吗？

Answer 1

如果您运行通过 W3 验证程序进行标记，您将获得

Error: When the srcset attribute has any image candidate string with a width descriptor, the sizes attribute must also be present.

我不知道您正在寻找的布局，因此不知道要使用什么媒体查询，但看看以下快速修复是否适合您：

<picture class="background-image">
   <source type="image/jpg" 
      srcset="http://localhost:61186/public/images/asia_1637411941_1920x1280.jpg 1920w,
              http://localhost:61186/public/images/asia_1637411941_1720x1147.jpg 1720w,
              http://localhost:61186/public/images/asia_1637411941_1520x1013.jpg 1520w,
              http://localhost:61186/public/images/asia_1637411941_1320x880.jpg 1320w,
              http://localhost:61186/public/images/asia_1637411941_1120x747.jpg 1120w,
              http://localhost:61186/public/images/asia_1637411941_920x613.jpg 920w,
              http://localhost:61186/public/images/asia_1637411941_720x480.jpg 720w,
              http://localhost:61186/public/images/asia_1637411941_520x347.jpg 520w,
              http://localhost:61186/public/images/asia_1637411941_320x213.jpg 320w">
     sizes="100vw">

    <img src="http://localhost:61186/asia_1637411941_1920x1280.jpg" alt="Asia" />
</picture>

响应式图片，srcset 为屏幕宽度的 25%，选择大图

Responsive images, scrset in 25% of screen width, chooses to large image

html

css

lighthouse

responsive-design