When I moved my main machine to a retina Macbook Pro, I was surprised to notice that the screen made my website images appear blurry. I had thought image sharpness would stay the same (or improve) since the physical resolution of the screen was much higher. I also thought that any resampling by the browser wouldn’t affect sharpness since there was an integer scaling factor: i.e. each image pixel should get mapped directly to a 2×2 square of retina pixels.
My assumptions were clearly wrong though as my web images were noticeably fuzzy.
To understand what was happening, I viewed my images in different browsers (Chrome/Safari/Firefox) and took retina resolution screenshots to see the pixel level detail. My test image was a picture of the Cliff Palace ruins in Mesa Verde and was produced with Lightroom (resized for web and exported with sharpening for screen).
Below is an expanded view of the upper window in the left tower based on screenshots with the retina display set to best quality (i.e. a straight pixel doubling).
In terms of sharpness Preview > Chrome (v39) > Safari (8.0.2) = Firefox (v34). I think Preview is applying a straight mapping of 1 image pixel to a 2×2 square of retina pixels. To see this, download the image and magnify it until you can see the individual pixels as blocks — the Preview screenshot will have pixels that are 4x the size of Chrome/Safari.
From the expanded view, I believe all three web browsers resample the image (probably with bicubic interpolation) and this blurs detail. Chrome tries to recover by applying sharpening but this introduces some artifacts as you can see a halo around the window. However the halo is not visible at normal magnification and I think it is a reasonable policy compared with Safari/Firefox which just leave the image slightly blurred.
What does this mean for my website? Retina and hi-dpi screens are currently only a small slice of my web traffic so I could feasibly do nothing and live with the blurriness. However, I’d like to get ahead of this issue as hi-res screens are only going to become more popular. This means I need to either upgrade to retina resolution images or find some way to force Safari/Firefox to apply additional image sharpening similar to Chrome (perhaps through a CSS effect if available).