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).
This image of Cliff Palace may appear blurry on retina screens.
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).
Comparison of Firefox, Safari, Chrome, and Preview (Mac native viewer) of non-retina images on a retina display.
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).
This post helped to point me in the right direction for a solution. There is a draft CSS property, image-rendering (https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering) that can control the resampling algorithm. Applying “image-rendering: -webkit-optimize-contrast;” (with other properties for other browsers, as in the linked page) will render an image with the expected pixel-doubled sharpness, so long as the image is shown at native size.
Thanks for the pointer to the image-rendering property. Adding webkit-optimize-contrast definitely helps with image sharpness in Safari but oddly causes images to be blurry in Chrome (40.0) on my retina laptop.
I tried to track this down but it’s a bit hard going through bug reports. As far as I can tell webkit-optimize-contrast is not working in Chrome (https://code.google.com/p/chromium/issues/detail?id=134040) and must somehow change the default rendering making it less sharp.
Using -webkit-crisp-edges appears to fix this problem (sharpens safari without impacting chrome). I believe -webkit-optimize-contrast is mapped anyway to -webkit-crisp-edges (http://trac.webkit.org/changeset/148949/trunk/Source/WebCore/css/CSSValueKeywords.in).
Stephen, very good vision and very good work. And very good website. I noticed this behavior of Safari two or three years ago, and have talked to about a dozen people at Apple – in person at the Apple store and on the phone. Most of them had not noticed what was going on. But that is okay, as they have enough to think about. I discovered that you can restore the image to what you put on your website by dragging it from the Safari page to your desktop and opening it in Preview. You will see the original image. Apple must be taking each original pixel and making four “baby” pixels from it – each baby pixel one quarter the size of the original. In Preview, they make each baby pixel the same as your original pixel. In Safari, they interpolate among the baby pixels to make a smoother look. A couple of the Apple employees said they liked the smoother version better. Even though smoother can be another word for blurrier, in this matter. I am in good humor about it, can take the image either way. I am very happy to be able to use an iMac with the unix command shell, which I use for everything, and hope it stays a feature of Apple computers forever. I am able to be on email very infrequently, and appreciate your not posting my email. I went to your website to look at your photographs of the Palace of Fine Arts.