Will Retina Displays Make More Work for Us?

Written by Mike on June 21, 2012

For as long as the web has been around, we’ve lowered the resolution of our images to 72 DPI. That low-res size was always been fine, until now, when we’ve entered the era of the retina display.

Last week, Apple announced its new Retina display MacBook Pro. The resolution of this laptop display is basically insane. Screen real estate double the size of a 1080p HDTV? Whoa.

Here’s what’s starting to worry me as a web person: you can be sure this is not the last laptop or desktop computer to have a high resolution display. It may take a few years, but eventually many different kinds of computers and tablets and phones will have these types of displays. It’s worth starting to think about now how we’re going to deal with these devices.

We’re already seeing apps like Chrome starting to integrate higher DPI images into its browser. Check out this image from the Chrome developers blog:

I’m not sure yet what this means for us as web people. Will we have to start saving our images in higher resolutions? Will we have to use some form of CSS media queries to detect this type of display? This blog post shows how to do it for iPhones and iPads with retina displays, but I don’t know if this type of CSS will work for laptops and other larger screens.

Or, do we just start offering hi-res versions of all our graphics, thereby eliminating the need for media queries. This is the easy way to solve the problem, but that’s potentially a lot of wasted bandwidth. This is even more important in the days of metered data plans.

Have you started to think about this for your institution and its website? I’d love to hear your ideas and thoughts on this.

Posted Under: apple, CSS, Design, iphone

5 replies to “Will Retina Displays Make More Work for Us?

  1. Mike Henderson

    With responsive design fresh in everyone’s mind, sites will be writing media queries.

    The problem for me is at the content editor level. It is hard enough to teach people how to compress and optimize a web image, now double that process for a retina image. A naming scheme would also have to be standardized. The ideal situation would have an user upload a high res image and have the server scale down the image to the normal size and handle the compression.

    I would move to less images in the design and more background generated images with css. Also planning to move icon images and sprites to icon fonts.

  2. Erik Runyon

    Yes, it will absolutely cause more work. However, if you’re already adding hi-res images for the iPhone4(s) and new iPad, you’re already most of the way there. Screens such as the new retina MBP work very similar to those devices. Here’s a couple of additional posts about handling graphics (not photos) for these devices:
    http://weedygarden.net/2010/10/retina-display-and-css-background-images/
    http://weedygarden.net/2012/04/hi-res-retina-display-css-sprites/

  3. Erik

    In the short term I think a JS solution may work, such as http://retinajs.com/

    I do think this will push us even further to avoid using image files for non-content purposes (layout, icons, etc). As Mike said icon fonts might be good, but I’m also curious to see if people look to SVG for things like logos and icons.

    As for content images, CMS functionality will be key. Upload a hi-res file and let the CMS save two versions, one with @2x appended to the file name as per Apple’s recommendation, and let the JS plugin take over.

    I also wonder if we’ll ever see things added to the CSS and HTML specs for this. Maybe and let the browser choose.

    More work for us, though, during this long transition.

  4. Kyle James

    I like Mike’s comment about servers scaling down images more. I think at the end of the day it will all be about the user experience and that is still very much in the court of fast is best. Fast means optimized images for load speeds. Fast also means better search rankings from Google. Fast even means our visitors won’t run away from our site because we give them a bad experience by making them wait.

  5. Andrew Careaga

    I’m glad to see this discussion. I’m equally concerned about how the advent of high-retina display will affect our video production in higher ed. It want take long for users to get used to high-retina-quality video, and for our HD products to look stale. We’re keeping an eye on where the video industry is going in our effort to strive for broadcast-quality video.

Comments are closed.