高质量的英雄图像在小尺寸观看时会变得模糊。

Question

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

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

在1920 it到1024 it之间--据我所知，图像看起来质量很高，没有变化，但使用火狐的响应设计模式，我已经确定，图像越小，它就变得越模糊(即像素化)。

如果将浏览器窗口的大小调整为1023 of或更少的，则会变得有点模糊，从而将DPR设置设置为2，从而将其还原为原始质量。

如果将浏览器窗口的大小调整为512 it或更少的，则图像变得非常模糊，并将DPR设置为3，将其还原为原始质量。

这里发生了什么事？我知道图像不是Retina--优化了，但是如果这是真正的原因，问题不是会被逆转吗?难道不是更大的图像大小会导致模糊吗？考虑到显示的大小为512 2x，并且源图像比1920 2x源图像少2倍，最小的图像不应该呈现在较高的DPI上吗？

如果能帮助我解决这个问题，我会非常感激，因为我已经和它斗争了几天，而且很难对它进行测试和调试。

Answer 1

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

例如，如果1x图像为500 px500px，则2x图像为1000 px1000 3x，3x图像为1500 px1500 3x。HiDPI的出现是因为设备能够在与普通屏幕相同的物理空间中显示所有这些额外的像素。

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

通常，较小的图像在HiDPI显示器上会变得模糊，因为他们试图将像500 px500 of这样的图像“放大”到1500 px1500 of的显示大小。

至于您正在经历的问题，您是否在真正的设备上验证过这个问题，而不是FF模拟器？真正的设备通常在这个"up res“过程中要好得多，并且可能不会产生相同的工件。