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."
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.
