为什么图像质量会随着分辨率的提高而提高？

【问题标题】：Why does the quality of the image increase as the resolution increases?为什么图像质量会随着分辨率的提高而提高？
【发布时间】：2019-06-21 02:18:31
【问题描述】：

我的 HTML 文档中有一个 img 元素，它的宽度约为 100 像素。

当我将源设置为每次更改的不同宽度的图像时的输出：

17000 像素：

2000 像素：

500 像素：

100 像素：

如您所见，即使img 元素的宽度恒定为 100 像素，图像质量也会降低。这背后有什么原因吗？如果是这样，应遵循哪些做法以确保质量不差？

【问题讨论】：

标签： image

【解决方案1】：

你把这些当成截图了吗？我认为图像看起来不太清晰，因为显示它们时分辨率较低。例如，您在显示器上显示图像的区域的分辨率低于图像本身。因此，通过扩大显示区域，您的显示器可以更准确地显示图像。

可以这样想：在 720p 显示器上显示 4K 壁纸看起来不太好，因为显示器必须按比例缩小。

【讨论】：

在通常情况下我会同意这一点，但在这种情况下，保存图像的标签只有 100 像素宽。所以本质上，通过缩小在 100 像素容器中绘制 17,000 像素宽的图像应该会使图像看起来更糟，而不是更好。但是，就我而言，它看起来比 2000、500 和 100 像素宽的图像更好。
你能提供一个有问题的代码的sn-p吗？它可能取决于浏览器