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

Question

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

这里有两个屏幕截图来显示我在说什么：

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

我知道您可以使用此链接将 gif 文件转换为 svg

并且 svg 文件在视网膜上看起来不错。

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

Answer 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 的做法。