当我有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/

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

虽然没有用于控制使用哪种方法的标准API,但Firefox在CSS中提供了图像呈现属性.

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

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

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