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.
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.
Thank you for reading 5 articles this month* Join now for unlimited access
Enjoy your first month for just £1 / $1 / €1
*Read 5 free articles per month without a subscription
Join now for unlimited access
Try first month for just £1 / $1 / €1
