在这个例子中，当 srcset 中有更好的图像时，为什么 Chrome 会选择更大的图像？

Question

我正在尝试了解响应式图像的基础知识。

我有这个非常简单的网页：

http://chubby-orange-fox.s3-website.eu-north-1.amazonaws.com/test.html

<!DOCTYPE html>
<head>
    <title>Responsive</title>
</head>
<html>
<body>

<img srcset="https://www.datocms-assets.com/58071/1637680873-dadandchildbywindow-edited.png?auto=format&amp;dpr=0.1&amp;w=2000 200w,
https://www.datocms-assets.com/58071/1637680873-dadandchildbywindow-edited.png?auto=format&amp;dpr=0.2&amp;w=2000 400w,
https://www.datocms-assets.com/58071/1637680873-dadandchildbywindow-edited.png?auto=format&amp;dpr=0.4&amp;w=2000 800w,
https://www.datocms-assets.com/58071/1637680873-dadandchildbywindow-edited.png?auto=format&amp;dpr=0.6&amp;w=2000 1200w,
https://www.datocms-assets.com/58071/1637680873-dadandchildbywindow-edited.png?auto=format&amp;dpr=0.8&amp;w=2000 1600w,
https://www.datocms-assets.com/58071/1637680873-dadandchildbywindow-edited.png?auto=format&amp;dpr=1&amp;w=2000 2000w" title="test image" alt="test image" aria-label="test image" width="350" height="197" loading="lazy">

</body>
</html>

如您所见，

srcset

包含6张不同的图像，它们的大小分别为

200w

（200px）、

400w

（400px）、

800w

（800px）、

1200w

（1200px）、

1600w

（1600 像素）和

2000w

（2000 像素）。

但是，如您所见，我在

width="350px"

标签上也明确添加了

<img>

，Chrome 知道图像将以 350px 的宽度显示。

所以如果 Chrome 确认图像将以 350px 的宽度呈现：

为什么选择

https://www.datocms-assets.com/58071/1637680873-dadandchildbywindow-edited.png?auto=format&dpr=0.6&w=2000 1200w

大的

1200px

版本，而明显有

400w

（400px）版本更适合？

在这个例子中，当 srcset 中有更好的图像时，为什么 Chrome 会选择更大的图像？

问题描述投票：0回答：0

最新问题

在这个例子中，当 srcset 中有更好的图像时，为什么 Chrome 会选择更大的图像？

问题描述 投票：0回答：0

最新问题

问题描述投票：0回答：0