Search code examples
imagehtmlretina-displayretinablurry

fix for blurry images on browsers used by a mac retina

I am making a game sorta like cookie clicker, and I want the images to look 8 bit. I use a macbook pro retina, which has four pixels for every one pixel on a normal screen. On Chrome and Safari, instead of each pixel being represented by 2x2 pixels, I get a bunch of blurry blobs... I don't have this problem on FireFox. There's this one website called pixeljoint.com that is made for pixel art, and I don't have the blurry problem there. Whenever I open one of the images from PixelJoint in a new tab, the image goes back to blurry. I heard that the problem is that the images are scaled before they are displayed on chrome and safari, but I'm not too sure.

Here are two screenshots to show what I'm talking about:

if you are using a mac retina, both images will be blurry, so you might have to download it and open it with preview...

I would also like to point out that the images are normal .gif files.

I am aware that you can convert a gif file to an svg with this link

and an svg file looks fine on retina.

All I want to know is how PixelJoint makes the pixels look so smooth.

Solution

  • I figured it out, you need to use 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>

    I found this in the source code, so I guess this is how PixelJoint does it.