Looking at photography on Retina-class displays is an amazing experience. To call it a game-changer might be trite, but its true. Ever since my first experiment with displaying double-resolution images, I’ve wanted a general solution on my site to serve up the highest appropriate resolution file for any particular photograph I display. I knew it’d be a bit of work to sort out, so I punted it for a while.
When my Retina MacBook Pro arrived and I saw more examples of high-resolution work and how they compared to standard-resolution, I knew it was time to get into gear. I dove in to the current state-of-the-art and started working on how to implement a solution for this on my site. After a fair bit of experimentation and a few missteps, I’m there.
Here’s an example:
On a Retina-class screen using Safari or Chrome, you should be looking at a double-resolution image as long as you’re viewing this post on my website and not in a feed or aggregator. On other screens or using other browsers, you are seeing a normal resolution image.
All you need is the right media queries for your particular needs—and you need to get them into the right order. Picturefill doesn’t evaluate the queries against each other to see which one is most appropriate. Instead, the last entry in the set with a media query that is true in the current display environment wins. Obvious in retrospect when you look at the Picturefill code, but I lost a few hours in the middle of the night sorting that important detail out.
For now, this is working fairly well for me and I’m continuing to fine tune things—along with working through other bits of layout as I make my site more responsive to various browsers. But, one thing I’ve really noticed I don’t like about the Polyfill syntax is that using two different media queries to satisfy the Retina/non-Retina display case is annoyingly verbose. Thankfully, the latest versions of the Picture Element Proposal have noticed this.
picture element isn’t the only proposal on the table, it seems. There’s also a
srcset attribute proposal for the
img tag as part of the WhatWG Embedded Content standard that’s considerably more terse.
I’m not sure what the relationship is between these two proposals or the groups behind them, but either way it goes, I hope that we start seeing official implementation of a markup standard for this shortly. Until then, however, thanks to Scott Jehl’s work, I’ve got a solution that works and I’m quite happy about that.
Notes & Comments
- There’s an image size limitation in WebKit on iOS5 that will hopefully be lifted in iOS6. For now, if you’re viewing on a Retina iPad, the landscape orientation may not be displayed correctly.
- If you’re a photographer and haven’t seen photographs on a Retina-class display, make it a priority to do so. While you might not need, or even want, a Retina MacBook Pro right now—and might not until Photoshop is Retina-aware—you need to know where the state-of-the-art of displaying photographs on the web is going and be prepared to meet up with it in the near future.
- Jacob Gordan noticed on Twitter that dragging a window from a non-Retina to Retina display doesn’t load the double-resolution image. On a read of the Picturefill code, that’s not too suprising. Picturefill hooks into window resize events, but I’m not even sure there’s an event to hook into for changing screens. Interesting.
- Thijs van der Vossen tweeted a link to his reasonable way to use high resolution images post. For smaller images, such as user interface elements, I wouldn’t disagree with his recommendation to just use double resolution images and let the browser scale things, although I think you really do want to keep file sizes in mind for mobile clients. I don’t think his argument scales well to larger images, however, such as the 1800px image I’m using in this post. There’s no way I’d want to ship that to an iPhone, especially on a mobile connection.
- David Magda asked via email whether using the
resolutionmedia query would be more vendor neutral. It’s a good question and I don’t have an answer. So far in an effort to just get things working, I’ve just been following the examples of others and using the
-webkit-min-device-pixel-ratio. David also reminded me that other browsers exist and I added a section to the post about the Mozilla and Opera variants of
- The W3C Responsive Images Community Group has posted their first draft of the Responsive Images Extension, aka the