为什么在使用视网膜屏幕观看的网站上，低分辨率图像会显得模糊？

Question

当我有500 x 500像素的图像时，图像在正常显示器上看起来很清晰（即CSS像素1：1映射到设备像素）。但是当用Retina显示器观看该图像时，它必须将图像的每个像素映射到4个视网膜像素（分辨率是两倍高）。在视网膜显示器上，图像也以500 x 500 CSS像素显示，但缩放到1000 x 1000.我不明白为什么图像在Retina屏幕上看起来模糊，因为物理尺寸保持不变，因为两个显示器大小相同。

模糊是4像素之间空间的结果吗？

图片来自：http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/

Answer 1

您的结果将取决于您的特定浏览器使用的重采样技术。这是图像的“模糊”插值，通常对于照片内容是优选的，但对于具有锐边的图形或内容则不太好。常见的算法是双线性插值，例如Firefox中的默认值。

虽然没有用于控制使用哪种方法的标准API，但Firefox在CSS中提供了image-rendering属性。

https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering

此属性也在使用-webkit-optimize-contrast属性的Webkit浏览器中实现。

以上链接也很好地概述了使用图像重采样的基本原理。

Answer 2

访问您的页面时，浏览器会自动尝试重新缩放图像，因此会让您略微模糊。 但至关重要的细节在于它是如何做到的;它不是简单地重复像素，而是插值。 - 奥利查尔斯沃思