Html 当以较小的尺寸观看时，高质量的英雄图像会变得模糊

我一直在试图解决Wordpress网站上的全幅英雄图像在某些移动设备上显示模糊的问题，在这个过程中，我注意到这似乎只在较小的尺寸下触发

我使用的图像是1920 x 1080像素

在1920px到1024px的宽度范围内图像看起来质量很高，就我所知没有变化，但使用Firefox的响应式设计模式，我已经确定图像越小，渲染越模糊（即像素化）

如果浏览器窗口的宽度调整为1023px或更小，它会变得有点模糊，因此将DPR设置设置设置为2会将其恢复为原始质量

如果将浏览器窗口的宽度调整为小于等于512px，则图像会变得非常模糊，将DPR设置为3会将其恢复为原始质量

这是怎么回事？我知道图像没有经过视网膜优化，但如果这是真正的原因，问题难道不会得到解决吗？难道不是更大的图像尺寸会使图像变得模糊吗？考虑到最小的图像以512px的大小显示，并且源图像远小于1920px源图像的两倍（2x），难道不应该以高DPI渲染吗

---

如果能帮我解决这个问题，我将不胜感激，因为我已经为此奋斗了几天，而且很难对其进行测试和调试。

HiDPI图像实际上只是一个比显示尺寸大但被压缩到更小物理空间的图像

例如，如果您的1x图像是500px x 500px，那么2x图像将是1000px x 1000px，3x图像将是1500px x 1500px。HiDPI名称之所以出现，是因为该设备能够在与普通屏幕相同的物理空间中显示所有这些额外像素

因此，想象一个普通的屏幕是每1英寸100px。所以你的500px图像应该是5英寸x5英寸。HiDPI屏幕可能为每1英寸200px，因此1000px图像仍将占用5英寸

通常较小的图像在HiDPI显示器上会变得模糊，因为它们试图“提高分辨率”，例如将500px x 500px的图像显示为1500px x 1500px的大小

---

---

至于您遇到的问题，您是否在真实设备（而不是FF仿真器）上验证了该问题？实际设备通常在“恢复”过程中表现更好，可能不会产生相同的工件。

如果实际设备上存在相同的问题，请发布一些代码，以便我们可以尝试复制它。