Why Images Appear Blurry on Retina and Hi-DPI Screens

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.

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).

Safari, Chrome, and Preview (Mac native viewer) of non-retina images on a retina display.

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).

OWC ThunderBay 4 Thunderbolt Enclosure Review

The OWC ThunderBay 4 is a Thunderbolt 2 hard disk enclosure that holds up to 4 drives. The enclosure does not have hardware RAID support (although this is possible with software) and the disks appear individually to the operating system. In other words this is a JBOD (“just a bunch of disks”) enclosure. Note that…

Read More »

benchmark-blackmagic

Serendipity at Santa Monica Beach

I normally think about photography in terms of making pictures, where one carefully plans out the composition and light, but sometimes you just get lucky and a photo just appears in front of your camera. For this picture, I had setup on Santa Monica beach with the intention of photographing the pier and ferris wheel…

Read More »

Couple at walking at sunset on Santa Monica beach.

Last Night in Prague

I took this photo on my last night in Prague. Before visiting the city, I came up with a shooting list and I knew that I want to create some iconic images of Prague’s bridges. I had already shot the Charles bridge but hadn’t yet seen a good location where I could have multiple bridges…

Read More »

Light trails and Prague Bridges.

Baby Sea Turtle Struggles to Reach the Ocean

Went I went to Costa Rica, one of the events I was very lucky to witness was the hatching of baby sea turtles on Tortuguero Beach and watching them make the long crawl from their nest to the ocean. Tortuguero is the largest Atlantic nesting site of the endangered green turtle. Green sea turtles nest…

Read More »

Newly hatched baby Atlantic Green Sea Turtle struggles to reach the ocean. Tortuguero, Costa Rica.