当我有一个 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，但 Firefoximage-rendering在 CSS 中提供了该属性。
https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
此属性也在使用该-webkit-optimize-contrast属性的 Webkit 浏览器中实现。
上面的链接也很好地概述了使用图像重采样背后的基本原理。
访问您的页面时，浏览器会自动尝试重新缩放图像，从而使您稍微模糊。但关键细节在于它是如何做到的。它不是简单地重复像素，而是插值。——奥利查尔斯沃思