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.

Solutions

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.

 

 

6 Responses to iPad Retina Display and Web Design

  1. Great information!

  2. I’ll admit I’ve heard a lot of people making this exact claim that normal-res images will look blurrier on the ipad3. But after trying out your demo on both an ipad1 & 3, iphone3 & 4, and a mac standard vs mac retina I’m fairly certain that either your test case is wrong or the entire premise is wrong – and I’m leaning towards the latter.

    For me, the images show the same clarity difference across all platforms. One answer could be that your standard resolution image doesn’t have a high enough resolution to begin with or used too high of a compression factor when being saved. But it was definitely blurrier on all screens, and by the same amount.

    The only difference we saw was a color hue difference between the ipad3 and the ipad1, but it was the entire screen, browser chrome and all, not just the images themselves.

    But logically, if you print a 75 dpi image on a 100dpi printer and a 300dpi printer, you should get the same results, a crappy but consistent 75dpi image. So I’m still confused why people think rendering a 96ppi image on a 236ppi screen will look worse than it does on a screen with 118ppi. Even though the resolution is doubling so is the ppi, and since they are exactly doubled, the 4 pixels on the iPad3 should render the same color as the 1 pixel on the iPad2, all while fitting in the same physical dimensions of the 1 pixel on the iPad2. Or in the reverse, if you took every pixel in the iPad2, subdivided it into 4 pixels and left them all the same color as the parent, you’d get exactly the same image.

  3. “But as far as the web is concerned, it actually does the opposite.”

    It is not making the opposite. Images are shown at the same visual quality as on older devices, it just might look bad compared to everything else on the high resolution screen like menus or fonts or real high resolution images.

    • True. I just meant that their marketing of the retina display made it sound like everything automatically looked better. When the truth is images will only look better if they are high resolution images (which most images on the web are not).

  4. Thanks for your insights on the Retina matter. As you point out the only way of getting bitmap images sharp on retina screens is doubling the resolution, but that also means your images become much larger and thus you have more downloading time. I’ve been looking into this phenomenon myself, and have come to an interesting result. It is possible to get smaller images but also much images ones on Retina screens. Take a look at my blogpost with losts of test images here:

    http://design.netvlies.nl/ontwerp/retina-revolution/

    Daan

Leave a Response

Why ask?