title: Why do low resolution images appear blurry on websites viewed with retina screens?
body: <p>When I have an image of 500 x 500 pixels the image looks sharp on a normal display (i.e. CSS pixels 1:1 map to device pixels). But when this image is viewed with a Retina display, it has to map every pixel of the image to 4 retina pixels (the resolution is twice as high). On the retina display the image is also displayed at 500 x 500 CSS pixels but is scaled to 1000 x 1000. I don't quite get why the image looks blurry on a Retina screen since the physical size remains the same, given that both monitors are the same size.</p>
  
  <p>Is the blur a result of the space in between the 4 pixels?</p>
  
  <p>Image from: <a href="http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/" rel="noreferrer">http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/</a></p>
  
  <p><img src="https://i.stack.imgur.com/flssN.png" alt="enter image description here"></p>