Now that things around iPad fever are quieting down a little bit, people are realizing the implications of the new iPad. I’ve seen one only briefly, but it’s clear it’s the way things are going. There is still one big, elephant-in-the-room question: How do we deal with serving images on web pages to high resolution displays?
(Note: If you’re looking to soup your site up with Retina-level images, you should look at Retina Display for Mobile Web and How Apple.com Will Server Retina Images to the New iPads. This post is about what browsers should do.)
- Load and render the page using normal images.
- Go through and see if any images can be upgraded to Retina.
- Shoot off HEAD requests to see if the images exist at the specified location.
- Pull down the new images and put them into their proper places.
That’s the best way you can do it right now. In the future, here’s how browsers should handle high resolution assets:
Examine a page’s HTML for any image tags.
* If the current device supports high resolution assets, fire off a HEAD request for both the image path (e.g., “/image.png”) and it’s high-resolution counterpart, “/image-2x.png”.
Update: My God, what have I done. Angus, Chris and Dondi pointed out this morning that I was having trouble seeing the forest through the trees. What I wrote earlier was wrong. Not like “Oh, that could work” wrong. Just wrong.
Here’s how it should work:
- Each browser includes a special header, like “X-Pixel-Density-Ratio”, in each image request. The server returns the proper image.
Boom. Done. Fewer requests made. Doing this requires a bit more knowledge of how your web server serves out images. Chances are you’ll need a smarter-than-your-average CDN. Luckly, Chris’ company Imgix is already working on such a thing. Keep an eye on them.
In the meantime, we just need someone to do a proof-of-concept build in Gecko or Webkit assuming one hasn’t already been done.
You can also follow me on Twitter.