Why do low resolution images appear blurry on websites viewed with retina screens?

Question

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.

Is the blur a result of the space in between the 4 pixels?

Image from: http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/

Answer 1

When visiting your page, the browser will automatically try to rescale the image, therefore leaving you with a slight blur. But the crucial detail is in how it's doing that; it's not simply repeating pixels, it's interpolating. – Oli Charlesworth

Answer 2

Your result will depend on the resampling technique used by your particular browser. This is a "fuzzy" interpolation of the image which is usually preferable for photographic content, but not so good for graphics or content with sharp edges. A common algorithm is bilinear interpolation, which is the default in Firefox, for example.

While there are no standard APIs for controlling which method is used, Firefox provides the image-rendering property in CSS.

https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering

This property is also implemented in Webkit browsers using the-webkit-optimize-contrast property.

The above link also has a good overview of the rationale behind the use of image resampling.