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:
- You have to maintain two sets of images (a high-res version and a low-res version)
- This will only work in CSS. Media Queries won’t help solve issues where you are using the <img /> element.
Hopefully this helps identify a couple ways you can start taking advantage of the retina display in the iPad 3.