修复 mac 视网膜使用的浏览器上的模糊图像答案

【问题标题】：fix for blurry images on browsers used by a mac retina修复 mac 视网膜使用的浏览器上的模糊图像
【发布时间】：2015-08-09 20:17:25
【问题描述】：

我正在制作一个类似于 cookie clicker 的游戏，我希望图像看起来是 8 位的。我使用的是macbook pro Retina，它在普通屏幕上每一个像素都有四个像素。在 Chrome 和 Safari 上，不是每个像素都由 2x2 像素表示，而是得到一堆模糊的斑点......我在 FireFox 上没有这个问题。有一个名为pixeljoint.com 的网站是专为像素艺术制作的，我没有那里的模糊问题。每当我在新选项卡中打开 PixelJoint 中的一张图像时，图像就会变得模糊。我听说问题是图像在显示在 chrome 和 safari 上之前被缩放，但我不太确定。

这里有两张截图来说明我在说什么：

我还想指出，这些图像是普通的 .gif 文件。

我知道您可以使用 this link 将 gif 文件转换为 svg

一个 svg 文件在视网膜上看起来很好。

我只想知道 PixelJoint 是如何让像素看起来如此平滑的。

【问题讨论】：

标签： image webpage retina-display retina blurry

【解决方案1】：

我想通了，你需要使用 CSS！

<style>
img {image-rendering: optimizeSpeed;image-rendering: -moz-crisp-edges;image-rendering: -webkit-optimize-contrast;image-rendering: optimize-contrast;image-rendering: pixelated; -ms-interpolation-mode: nearest-neighbor; }
</style>

我在源代码中找到了这个，所以我猜这就是 PixelJoint 的做法。

【讨论】：