Why the iPad 3’s retina display is a game changer

Apple went to significant trouble to stuff a Retina display in the new iPad3. The battery had to be made bigger to provide the same endurance with more pixels, so the entire chassis is a bit bigger and thicker than before.

Was it worthwhile? Absolutely. The new retina display is a game changer that makes all previous tablets look like dinosaurs. You’re going to want to have a tablet with a high-resolution display from now on – and here’s why.
ipad3

Text Looking Fine

 

ipad3 text

The sharpness of the new display is obvious from the moment you use the iPad 3. Packing a resolution of 2048×1536 into a small area makes everything look precise and detailed in a way that isn’t possible on other tablets. That’s nice. But sharper image quality isn’t a game-changer. To see where the retina display really pays for itself, you need to load up a webpage or document with fine text.

With more pixels packed tighter, the display can handle small fonts that simply blur and pixelate on other tablets. The difference is subtle until you place two tablets side-by-side. That’s when it hits you. The new iPad can display virtually what a person can possibly read, and it looks good while doing it, even if you hold the tablet absurdly close to your face.

 

It’s Not Just The Pixels

 

ipad3 resolution

Most people have spoken about the resolution upgrade of the iPad 3 as if that was the only enhancement. It isn’t. Apple has also improved image quality by increasing the color gamut supported.

According to testing by Tom’s Hardware the iPad 3 can render about 66% of the Adobe RGB1998 color gamut. Far from perfect, to be sure – but significantly better than the previous iPad and better than any Android tablet, as well. Colors seem to have more “punch” and the contrast between dark and bright areas is more definitive than your typical tablet display.

 

But what about the images?

 

iPad 3 images

 

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.

Sources: www.makeuseof.com/tag/ipad-3s-retina-display-game-changer-opinion/ by Matt Smith

and: www.blog.easelsolutions.com/2012/03/ipad-retina-and-web-design/

 

Share this:
Facebook Twitter Linkedin Plusone Stumbleupon Email
The following two tabs change content below.

AdyWebige

Professional SEO Services Expert at Webige
My job description: Making the complex simple and finding the best solutions for SEO and webdesign problems. Motto: "Good design is good business." Hobbies: photography, photoshop, traveling and a few others.