title: fix for blurry images on browsers used by a mac retina
body: <p>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 <a href="http://pixeljoint.com" rel="nofollow noreferrer">pixeljoint.com</a> 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.</p>
  
  <p>Here are two screenshots to show what I'm talking about:</p>
  
  <p><a href="https://i.stack.imgur.com/qRcgz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qRcgz.png" alt="if you are using a mac retina, both images will be blurry, so you might have to download it and open it with preview..."></a></p>
  
  <p>I would also like to point out that the images are normal .gif files.</p>
  
  <p>I am aware that you can convert a gif file to an svg with <a href="http://www.drububu.com/tutorial/bitmaptovector.html" rel="nofollow noreferrer">this link</a></p>
  
  <p>and an svg file looks fine on retina.</p>
  
  <p>All I want to know is how PixelJoint makes the pixels look so smooth.</p>