iPad Retina Display and Web Design

The new iPad (iPad 3) added a very much anticipated retina display that doubles the resolution.  So rather than the usual 1024 x 768 resolution we’ve been used to for the last couple years, the iPad 3 is rocking a 2048 x 1536 resolution.  The new retina display is supposed to make our digital word a more beautiful place.  But as far as the web is concerned, it actually does the opposite.  The is because the iPad 3 is pixel doubling standard resolutions images.  In other words it’s doubling the size of all your images on your site because the iPad 3 has twice the resolution.  So, if you are not putting high-resolution images on your website, your website might actually look worse on the new iPad.  Take this image for example:

Both images are being displayed on the webpage at 450 x 539.  The only difference is the image on the right is actually a 900 x 1078 image (double the size).  Now, you would never have an image be double the size because you’re just wasting bandwidth.  But that’s what you need to do for the iPad 3.  Otherwise, your images would potentially display blurry (like the image on the left) when the iPad 3 doubles the size of it.

You can try it for your self.  On your iPad 3, check out this test page.  On a regular display (or older iPad), both images will look exactly the same.  On the iPad 3, though, you’ll see the “regular” image is blurry while the high resolution image is clear.


If you want to update your site for the new iPad, there are a couple ways you can do it.

Media Queries: With media queries, you can swap out your background images for higher resolution versions.  This is isn’t too tricky and will keep your users from downloading both the high resolutions and low resolutions versions.  There are two drawbacks:

  1. You have to maintain two sets of images (a high-res version and a low-res version)
  2. This will only work in CSS.  Media Queries won’t help solve issues where you are using the <img /> element.

Responsive Images:  The Filament Group has developed a method called Responsive Images which, using a custom data attribute, allows you to specify both the low resolution and high resolution version of your image.  With a little help from JavaScript, high resolution sources are swapped out before images are downloaded.  This way the user gets the correct version. Similar to the media queries method, you still have to maintain two sets of images and some Content Management Systems (like WordPress) might make it more difficult to implement a Responsive Image layout.

Adaptive Images: Adaptive Images come at it from the other direction.  They have you place the high resolution version of your image in your design.  Then, using a little PHP and JavaScript magic, they determine what size is optimal for the user and cut the image down before it’s downloaded.  The benefit of this method is that you only maintain a single image (the high resolutions version).  The drawback is that it requires PHP and, if the users doesn’t support JavaScript, will fallback to the high resolution version.

Hopefully this helps identify a couple ways you can start taking advantage of the retina display in the iPad 3.



Comments are closed.