The New iPad Hyperopia

According to an article from TechCrunch I read the other day, standard resolution graphics look like crap on The New iPad. This struck me as odd. Apple prides itself in visual presentation and an overwhelming number of apps would look terrible on the New Screen. I didn’t believe it at first, so when a friend of mine got a New iPad we tested some web sites. Sure enough, the images were slightly, but noticeably, blurry.

Like the old joke “cut it in half, and double it”, The New iPad’s high resolution is crammed into the same size screen. The quality of standard resolution images should be identical. It appears that Apple has made a mistake. Whether this is an accidental or deliberate mistake we’ll never know, but it is a mistake.

A Look At Image Interpolation

Below is an enlarged image of a circle rendered at 75dpi. To double its resolution for The New iPad we multiply the pixel height and width by two, creating an image with four times as many pixels. To fill up those extra pixels the computer interpolates, creating new pixels based on the colors of the existing pixels. There are many different forms of interpolation, each with its advantages and disadvantages. The three most common forms of interpolation are called Nearest-Neighbor, Bilinear and Bicubic. With simple nearest-neighbor interpolation, each of the original pixels is doubled in size, filling the adjacent space. When you’re doubling the size of an image for a larger display, nearest-neighbor produces a poor quality image that appears aliased or “pixelated”. To solve this problem other interpolation techniques, such as bicubic, are used to smooth out the rough edges. The larger you up-scale, the blurrier your image appears.

Let’s assume The New iPad uses bicubic interpolation to upscale old 75dpi images to 150dpi. It makes perfect sense that an image would appear blurry. After all, you’re filling up four times as many pixels. There’s only one problem with this. The New iPad’s screen isn’t any larger. You have four times as many pixels, but each of them is one quarter the size. Meaning any up-scaling should be negated by the downscaling of the physical pixels on the screen. If The New iPad instead used nearest-neighbor interpolation, a 72 dpi image on The New iPad would not look any better or worse than it did on an iPad2. This is not the case with The New iPad, 72dpi images are very noticeably blurry.

So What Does This Mean For Web Development?

This screenshot of my trademark GreenZeta, at multiple resolutions, was taken on The New iPad. The blurriness in the screenshot itself indicates this is in fact a software issue. You can see how the 72dpi image becomes blurry around the edges while the 150dpi image maintains its sharpness. Parts of the image with low contrast edges or very thin lines are affected the most.

The New iPad renders the page as if it were 1024×768 at 72dpi. This makes sense, at full resolution pages would appear twice as small on the screen. As a result, simply placing 150dpi images on the page will render then at twice the desired size. Height and width properties of the image need to be set as if it were standard 72dpi. Setting the height and width to “50%” is acceptable in most cases.

Before you start upgrading your website graphics to 150dpi, there are some drawbacks to consider:

  • You need a higher resolution image to begin with. Upscaling an image designed for a 72dpi screen will have little benefit.
  • Many browsers, including mobile safari on the iPad2, do not downscale images well. A 150dpi image looks worse in these cases.
  • The image file size will double, meaning twice the download time and twice the bandwidth costs.

For the ideal solution, create a secondary set of high resolution images and control their display via CSS. This will allow you to detect The New iPad and attach the high resolution stylesheet when required.

Having a high resolution alternative for your web site graphics is a good idea; even if it’s simply held in reserve. Large, high resolution, displays are coming and it is on those screens where low resolution blurriness is unavoidable. It is possible that Apple has chosen to interpolate graphics poorly for The New iPad, just to prove this point. For now, bandwidth and low-res displays dictate 72dpi, but having a 150dpi alternative certainly doesn’t hurt.

This entry was posted in Reviews, Tech Tip, Web Development. Bookmark the permalink.

9 Responses to The New iPad Hyperopia

  1. Somebody necessarily lend a hand to make critically posts I would state. This is the first time I frequented your website page and thus far? I surprised with the analysis you made to create this actual submit incredible. Wonderful task!

  2. you’re truly a excellent webmaster. The web site loading pace is incredible.

    It seems that you’re doing any distinctive trick.
    Also, The contents are masterpiece. you’ve done a magnificent
    process in this topic!

  3. This helps to control blood sugar and it’s easier to burn calories from small, light meals.
    Now, in your vegetarian free printable weight loss journal loss diet meal plan, it
    should contain 5 meals a day. You just have to be more aware of what you eat, avoid to much sugar and fat,
    and eat plenty of fruit and vegetables.

  4. Hair Detox says:

    Be thoroughly prepared to pass your drug test

  5. kecia2599 says:

    I’m really glad I found this post. It’s well written plus the information is excellent. I hope to find more like this.

  6. debra865 says:

    This is a carefully constructed blog post. It’s well written and quite informative. If only other blog owners could present submissions this good. Keep up the great work.

  7. albertine2380 says:

    You will barely find posts such as this anymore. I remember when you could find one or two topics similar to this in a few minutes but now it’s much harder.

  8. adela3097 says:

    Excellent content. I wish all information I stumbled on was this nice. Continue the great work.

  9. dorothea3895 says:

    Excellent content. If only all information We’ve found turned out to be this nice. Continue the good work.

Leave a Reply

Your email address will not be published. Required fields are marked *