修复 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 的做法。
我正在制作一个类似 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 的做法。