Is Your Website Ready for the New iPads Retina Display?

So it’s official: Apple’s new iPad will have a “retina” display, doubling the device’s resolution.  This implies that everything will look twice as sharp.

But will it?

Warning:  We’re about to geek-out.  Consider this:  Previous iPad models and the new iPads retina display featured, will have the same screen measurements (9.7″).  However, the new one crams four times as many pixels into the same amount of space.  This means that an image taking up a one inch by one inch square on the old iPad would measure at 132×132 pixels – but on the new iPad, a one-inch-square image would need to measure 264×264 pixels – or quadruple the amount of data.  Stay with me here.

Before considering the web, let’s take a brief look back at a few things that happened when the iPhone 4 made the jump into retina display territory:

• New “HD” apps had to be designed, to take advantage of extra pixels.  If an app designed for the iPhone 3 would run on an iPhone 4, it wouldn’t look quite as sharp.
• Within the User Interface, two sets of graphics had to be created – one set at a higher resolution (for the iPhone 4), and one at the original resolution (iPhone 3).  This is illustrated by the graphic on the right.
• However, websites, which are generally designed primarily for viewing on a computer monitor, were unaffected.  This is because the overall resolution on the iPhone 4, while super sharp on a small screen, was still less than the average computer monitor.  So, graphics created for large-format display still contained enough pixel information to fulfill the iPhone’s small, yet dense, screen.

This changes with the new iPad.  Its resolution of 2048×1536 was typically reserved for only the largest monitors – 27 inches and up.  This means that an image that would take up 20% of a typical computer monitor might only take up 10% of the screen on a 27″ monitor.  But, because the 27″ monitor was so much bigger, this wasn’t an issue – you’d just have more available room on the sides.

With the iPad’s comparatively small screen area, this becomes an issue.  10% of the screen on a 27″ monitor is still about a 3″ square.  On an iPad retina display, this would be about a 1″ square.  If you’re looking at something with a lot of detail, you can imagine this could be an issue.

Of course, this didn’t go unnoticed by the brilliant engineers at Apple.  The new iPad knows to automatically enlarge graphics to a legible scale.  Here’s where this gets weird:  Certain types of graphics – text, or vectors – graphics that are created using mathematical calculations – can be enlarged infinitely and will still look just as sharp.  If you want to test this out, look on your computer for a PDF with selectable text and open it up – then zoom in to 1000%.  You’ll see it stays just as crisp.  The other type of graphics, called bitmap (90% of website graphics are bitmaps, as are all photos), can’t be enlarged without losing quality.  This is illustrated in the graphic on the left.

This brings us to the problem:  A photograph on a website that is appropriately sized for your computer display will be enlarged automatically on the new iPad – maybe magnified at double resolution, depending on its size.  And this will look fine – but not amazing.

See, by stretching an image out to double its size, the WOW factor of the iPad’s new retina display will be negated. To really maximize the new iPad’s graphics potential, you need to be able to display an image that actually IS double the size.  Here’s the trouble:

• If you double the size of everything on your website, it’s going to look broken for normal computer users – there would be scroll-bars everywhere.
• Much larger images mean much larger file sizes – that’s longer load times for your users, and more burden on your web servers.

So what’s the solution?

You need to have two sets of graphics for your website – those at higher resolution for the new iPad (as well as some other tablets in the pipeline with similar display technology), and your “regular” images for everyone else.  And, maybe a third set for smartphone users.  When a visitor hits your website, their web browser/device should be detected, and the appropriately-sized graphics will be served to them.

I haven’t heard of any examples of people doing this in the real world yet – which isn’t to say there aren’t websites prepared for this – but once the new iPad hits shelves, this is bound to becomes a new design trend.  And, in time, a new design standard.

So, have you given any thought to optimizing your website for the new iPad display?