没有高dpi屏幕支持的srcset

Question

有一个带有srcset属性的图像标签，如下所示：

<img src="..." 
  srcset="small.jpg 300w, large.jpg 900w"
  sizes="300px" />

在正常的1x dpi屏幕上，它加载small.jpg，但在DPI高的屏幕（例如视网膜）上，它加载large.jpg。

有什么方法可以使其在高DPI屏幕上加载small.jpg？

Answer 1

srcset的工作方式是有意的。

如果您想阻止浏览器下载您提供的相关图像，因为您的sizes值表明在用例中不需要支持可变的视口宽度，则应使用简单的src没有srcset：

<img src="small.jpg" width="300" />

但这意味着您始终将图像显示为300像素宽，并且屏幕密度高于1dppx的用户可能会看到低质量的渲染。

您能解释一下为什么要发生这种情况吗？