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.