Skip to main content

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

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

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of six full-time members of staff: Editor Kerrie Hughes, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, and Staff Writer Amelia Bamsey, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.