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.