5

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/

enter image description here

Youri Thielen
  • 440
  • 4
  • 10
  • 3
    No; it's because the browser tries to scale the image to reduce sharp edges. – SLaks Dec 03 '13 at 21:56
  • I'd really like to know the answer to this question. I don't know why Macs are doing interpolation instead of simple pixel doubling (if that's what they are doing). If they would only do pixel doubling, then existing images wouldn't be blurry on Retina displays. – Jonathan Aquino May 02 '14 at 18:11

2 Answers2

3

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.

nullability
  • 10,545
  • 3
  • 45
  • 63
  • But why does it have to resampled? Forgive me for being simplistic, but when I have a 15" screen with a resolution of 1440 x 900 and a 15" Retina with a resolution of 2880 x 1800, the physical size of everything is the same, except that the 2880 x 1800 resolution is sharper. Given this fact, the pixels of a 500 x 500 image can be displayed on 1000 x 1000 retina pixels, the physical size remains the same and all the pixels can be quadrupled. Why the need for resampling? – Youri Thielen Dec 04 '13 at 08:28
  • I think it looks blurry since its **relatively** unsharp compared to the text around. The sharpness should be the same as on a non-retina display right? – Youri Thielen Dec 04 '13 at 17:20
  • Yes that might be part of it. Font rendering uses a lot of tricks to make text appear sharper, such as using sub-pixels. Images would not benefit from that. – nullability Dec 04 '13 at 17:52
  • So if I get you correctly, next so the quadrupling of the pixels, the image is also resampled? Why is this done? – Youri Thielen Dec 04 '13 at 18:26
  • It seems there are different strategies: https://discussions.apple.com/message/21808957#21808957. – Youri Thielen Dec 04 '13 at 18:28
0

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

mxmxwo
  • 31
  • 1
  • 10