I’ve had a few really interesting chats this week about retina displays.

I’m trying to understand what all the gazillions of photos that have been scaled to suit the constraints of the old web resolutions are going to look like when viewed on retina displays.

My assumption is that they are going to look pretty rubbish and that this is some kind of time bomb just waiting to go off.

There seems to be a real problem with photos because they can’t be made into vectors which would just scale beautifully with no loss of quality.

The solution seems to be to upload different variations of the same photo. If the user is viewing the page with a retina display a media query detects that and serves the higher resolution photo. Problem solved.

But what about all the sites that have no larger resolution alternative to serve i.e. the majority of sites currently on the web?

Surely all site owners that care about the photos on their sites are going to have to re-upload higher resolution versions to get around this issue. The interesting problem we then have is having mobile devices with 3G connections which are trying to download larger image files. 

Retina displays seem to have introduced all manner of issues that the web design and photographic community are really yet to get their head around. The impacts will be significant and I get the feeling that we lack a clear idea of what to do about it!

On a related note while doing some research on issues around photos and responsive design I found adaptive-images.com which serves up different versions of photos to suit the device being used. This video gives a great introduction to the service.

Adaptive Images - Intro from Matthew Wilcox on Vimeo.

**UPDATE** Here’s a really useful flowchart from Thomas Fuchs to help determine how to prepare your photos for retina displays.

A blog celebrating photos, the unsung heroes of great user experience design, by James Chudley (@chudders)

My 60 page 'Usability of web photos' ebook is for sale on Amazon for the price of a coffee.

Buy Usability of web photos

view archive