我认为大多数其他答案都忽略了这一点：这不是关于覆盖用户偏好，而是关于在用户设备为每个 CSS 像素（又名“参考像素”）分配多个物理像素的常见场景中提供最佳质量的图像" 在您的图像中，导致浏览器放大图像，使其像素化和颗粒状。

我建议的解决方案如下，但首先是这可能发生的四种方式：

• 最罕见： 用户选择放大。不是什么大问题，因为这是他们的选择。
• 出人意料的普遍： 用户的浏览器默认是放大的。例如，许多高像素密度的 Windows 机器默认缩放到 125% 或更高，而Firefox 最近（令人困惑！）做到了，所以在这些情况下，它告诉用户他们在实际缩放到 125% 时被缩放到 100%，让他们摸不着头脑，想知道为什么一切突然看起来都是颗粒状的。
• 很常见：大多数 Android 设备（和其他设备？）的像素比大于 1。这意味着每个“CSS 像素”实际上都使用多个物理像素进行显示 - 因此设置为 200 像素 x 200 像素的图像width: 200px; height: 200px;实际上会缩放200 x 200 像素的图像超过 200 x 200 像素，可能会使其变得颗粒状。
• 很常见：许多现代 Apple 设备都有“视网膜显示器”。这与像素比为 2 的 Android 设备基本相同，但具有更好的营销效果，以及一些允许通过名称检测它的自定义属性。

任何这些都会导致 John 的问题，即图像库看起来令人惊讶的颗粒状。

我希望有人能很好地解决这个问题，但现在这里是我的首选选项，从最有效但最不普遍的开始：

1. 如果可能，请使用矢量 - SVG（如果您仍需要支持 IE8，则使用 Raphael.js）。实际上，这只是图标、图表等的选项，绝不是照片的选项。由于需要处理，非常复杂的 SVG 在低端手机上也可能很笨重。
2. 如果可能，检测设备的像素比，并根据它提供图像。这也可以解决 Windows 上的 Firefox 问题，因为 Windows 上的 Firefox 在放大和缩小时会改变其对像素比率的读取。缺点是，它变成了一个棘手的编码问题，涉及服务器端和客户端的开发工作。

3. 如果 1. 和 2. 不可能，但它真的很重要，而且图像质量比加载时间更重要，那就把图像加倍。

   • 这就是谷歌在其主页上使用他们的标志所做的：他们将 538 像素 x 190 像素的 PNG 图像压缩到 269 像素 x 95 像素的容器中。它也或多或少与响应式图像的工作方式相同。

   • 这曾经被认为是不好的做法，因为旧版本的 IE 在缩小图像方面很糟糕，但现在很少使用，而且比高像素密度屏幕少得多。它仍然有些不可取，因为它会增加图像大小并因此增加加载时间 - 这是您需要逐案判断的权衡。

   • 加倍尺寸很常见，因为很少有设备的比率大于 2，很少有用户放大超过 200%，并且缩放图像 50% 比其他数量更干净。
4. 如果 1、2 不可能并且加载时间对于 3 来说优先级太高，我不知道还有其他选项，我的建议是不要担心，因为互联网上一半的网站都有同样的问题，并且在您的网站上遇到此问题的人也会在其他网站上遇到此问题。见鬼，Windows 上的 Firefox 甚至像素化了它自己的 UI 按钮......

正如DA01 评论的那样，您不应该对此做任何事情。

缩放是用户指定的选项，因此在他们的控制之下。他们决定搞乱的设置不应该是你的责任。

您可以考虑不同的浏览器和版本等等，但合理地说，您不应该考虑用户的缩放。

当然，您可能占 125% 或 150%（您甚至可能不必这样做）。但是 200%、300% 还是更多？这没有任何意义。

如果用户使用高对比度的 windows 主题怎么办？如果他们经常使用放大镜怎么办？谁在乎？

理想情况下，您的网站足够灵活，不会在小的缩放差异之间产生真正的差异，但图像的质量会随着缩放而降低，但这不是您的责任。

这当然只是我的观点，但我工作的公司也明确告诉客户我们不支持他们的缩放偏好。

其他人就您将面临的问题给出了一些很好的提示，而我在这方面还不够好，无法做一个好的教程，但是......

您可能希望设计一个根据用户的 res/device 进行调整的响应式站点，然后您可能正在寻找在请求时将图像切换到更高或更低分辨率文件的代码，而不是拉伸和挤压您拥有的图像。

当我上次尝试这样做时，我使用了 media-query.js 和 picturefill.js。请参阅：http ://responsivedesign.is/resources/images/picture-fill 。我有一个 3 列布局，其中一些图像将跨越两列......当浏览器窗口足够小时，大图像将切换到只有一列宽的较小 res 版本。用户的浏览器只会加载他们需要的文件版本。（在我的情况下，砌体插件会移动一切以适应）。

当然，您的用户必须启用 javascript...

你不能强迫用户动手。用户设置不是您可以使用的。设置和规避它们是一个坏主意，用户做某事可能是有原因的。无论哪种情况，您都无法保证跨各种设备的任何事情。

事实上，如果你进入技术方面，它会变得更加有趣。你真的用你的网页给了王国的钥匙。看到用户下载网页，用户现在可以用它做任何他们喜欢的事情。你无法控制这一层，它毕竟是在用户机器上运行的，他们可以为所欲为。甚至 stackexhange 在我的电脑/手机上看起来也不像在你的电脑上一样。我最终自动更改了 GUI 的某些方面，以修复 2 个渲染错误并添加了 2 个快捷方式。