修复mac retina使用的浏览器上的模糊图像

Question

我正在制作一个类似cookie点击器的游戏，我希望图像看起来像8位。我使用的是一个macbook pro视网膜，它在普通屏幕上每一个像素有四个像素。在Chrome和Safari上，而不是每个像素由2x2像素表示，我得到了一堆模糊的斑点......我在FireFox上没有这个问题。这个名为pixeljoint.com的网站是为像素艺术制作的，我不会在那里遇到模糊的问题。每当我在新标签中打开PixelJoint中的一个图像时，图像就会变得模糊不清。我听说问题是图像在镀铬和野生动物园上显示之前已经缩放，但我不太确定。

以下两个屏幕截图显示了我正在谈论的内容：

我还想指出图像是正常的.gif文件。

我知道您可以使用this link

将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; }

.mobile-span{display:inline-block;}
.tablet-span{display:none;}
.tablet-large-span{display:none;}
.clear{clear:both;}
.right{text-align:right;}
</style>

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