How should we deal with retina displays?

Here is the latest question from IQ9A followed by my less than confident answer.

Do you recommend increasing image resolutions or creating image sets to compensate for the Apple iPad Retina Display?

This is a really tricky one and I would love to hear your take on it in the comments.

  • mmm, have to add this to the round-up “Retina Display – The Future of Web Design. Internet Overview” on :)

  • I reckon make a set for iPad and MacBook Pro, don’t worry about phones unless the site is designed for mobile.

  • Hi Paul, you may want to give this podcast a listen –
    Scott Jehl, an advocate for the <picture> element, talks about his opinions and trials of making images responsive and has some interesting thoughts on serving up content based on bandwidth.

    Thanks for the IcoMoon link, I’ve been working out ways to get SVG into projects and fonts are a great alternative.

  • I think we’ve gotta head down a road which means we are more considerate at the design stage. I’d hate to think we are going to lose personality from websites, with things like the cow / footer imagery down there (bottom / left)…


    I see the whole 1.5 / 2x min-device-pixel-ratio styles as a pretty crude fix to the problem that’s arisen. There are a few obvious short-falls – maintainability is one, data is another (as Paul mentioned) and forward compatibility is another. 2x pixel density will soon become 3x pixel density – constraining things to a number of pixels (be that a density or a size of image you’re serving) is always going to be limiting.

    I believe we should be thinking more in terms resolution independence; using SVG (vector-based) graphics, HTML5 Canvas, CSS3 and icon fonts – at least for the time being. A worry of course if that sites will become too two-dimensional and overall, a bit bland.

    But perhaps we have to strip our designs back until technology allows us to be more creative again? At present there’s always going to be at least one trade-off between graphic clarity / load time / browser compatibility / creativity. I suppose as ever “it depends” on the main focus of the site. I guess that’s how the whole mobile/content first movement was born.

    Above all though we need to stop saying things like “Retina ready”. Retina is just a marketing term, surely? Even the question refers only to “the new iPad”. There is a world way beyond the latest Apple product and I’d hate to think we were missing the bigger picture :)

  • We just spent a few months working on a really image-intensive responsive site for a client in a very visual industry. This is an issue we faced at every turn. We exported all images at 1x and 2x sizes, but then had to deal with load times for each and every media query we implemented. It was rough. The images are huge but our bandwidth hasn’t changed – so we have to stick to standards.

    Don’t get me wrong – the site looks phenomenal on the retina displays – but it took us some time and creative problem solving to accommodate. I can only hope our ISPs unleash the beast sometime soon so we can start really exploring the full effects of retina.