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

fix for blurry images on browsers used by a mac retina

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

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

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

我知道您可以使用 this link

将 gif 文件转换为 svg

并且 svg 文件在视网膜上看起来很好。

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

我知道了,你需要用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 的做法。