Thus the Web Begins Resolutionizing

The new iPad Retina Display - Courtesy of Apple
© Apple

The problem began when the web goes mobile.

And as mobile screen resolution goes higher web workers have tried to find a good solution to handle designs on different screen resolutions in a smart way.

For the lack of a better term, someone coined the term ‘Responsive Web Design‘.

Then there’s another problem: How to properly scale images for different resolution? The puzzle continues and the term stuck. ‘Responsive images’ became the topic in coffee shops and breakfast meets.

As Jason Grigsby explains nicely there’s actually no good solution but several pragmatic techniques to patch this world-wide gap.

But then the new iPad came out.

iPad’s gorgeous retina display is one giant beast. At 264ppi, its 2048 * 1536 screen resolution is hungry for pixels. Wait, isn’t that the density of full-size images? No, not exactly, but close.

While photographer Duncan Davidson was attempting to future-proof his websites, he came across an interesting problem:

Relatively small high-resolution images—such as John Gruber’s Daring Fireball logo—work great. But 2000-pixel wide photographs failed miserably and ended up looking worse than the 1000-pixel wide images they were replacing in my test pages. Much worse, in fact.


Bottom line, however, is that there’s a limit to serving up web images in JPG format with WebKit the new iPad and the limit kicks in when you approach screen-filling resolutions.

His post is a good home base for your research in this topic, which includes the two links above on responsive imgs. Interestingly, there’s another article by Jason Grigsby detailing how Apple solves their problem. I also found an active discussion on Apple Support Communities that discusses image size and how it relates to the web on retina displays.

Now that I’ve done some reading, I got some homework to do.