Web devs battle new iPad’s Retina display

Apple's new iPad has predictably been a massive sales success, with over three million already sold. Although reports initially centred on app developers scrambling to optimise apps for the new Retina display, web designers are increasingly figuring out how to ensure website images don't look 'blurry' – something we recently touched on in our initial new iPad report.

The issue of blurry web pages already existed on the iPhone 4, but that device's smaller display made the problem less apparent. But with the iPad's 9.7-inch screen, companies are clamouring to ensure their designs don't look second-best to native apps. Unfortunately, however, there don't yet appear to be any clear ways to cater for the high-res display without some degree of redundancy.

On Cloud Four Blog, Jason Grigsby detailed how Apple has worked to deliver high-res images to the new iPad. He said the company loads regular images and then switches them out for higher-res equivalents should the device request them. The drawback: "As far as I can tell, there is no attempt to prevent duplicate downloads of images. New iPad users are going to download both a full desktop size image and a Retina version as well."

Such page bloat is something Brad Frost warned about before the new iPad appeared, and he subsequently explored potential workarounds such as using media queries and SVG, along with using more CSS3 techniques to reduce reliance on bitmap images. However, even these solutions have their pitfalls. The Easel Edge reported on working with media queries and noted that you must maintain two sets of images and cannot deal with <img> elements in this manner. And on his blog, Simurai has explored issues relating to the sharpness of icons on the new iPad. Even level-headed ideas such as utilising icon fonts and SVG aren't optimal, because they too often end up with sub-pixel blurring.

In the end, as with other aspects of web design, Simurai suggested a mix-and-match approach, on a case-by-case basis: "There's just no single image format suitable for everything and there probably never will be. […] Maybe best is to use PNG served in many different sizes for your high fidelity, multi-colour logo and other graphics. SVG icons for your navigation that stays the same size, but also looks sharp on Retina displays. Responsive inline SVG for bars and charts and an icon font for all your different button sizes."

As Grigsby noted, it's not like the rules are yet written, and even the iPad's creator hasn't provided anywhere near a perfect solution: "Apple isn't sitting on some secret technique to make retina images work well". And so it's up to web designers and developers to decide how best to support high-res screens (which will surely become commonplace). 

If this is something you’re already working on, let us know your tips in the comments.