Blurred non-retina images on iPhone 4

I'm having a bit of a problem with the way Safari on iOS displays graphics on retina displays (iPhone 4+, iPod touch 4th generation and probably also the iPad 3).

Before I begin, let me say that these screen captures are viewed at 100% zoom since I use the meta-tag "viewport" set to 320px and disabled the zoom entirely.

It seems that instead of simply resizing the image to fit the high-resolution display, someone in the Safari or Webkit development team actually thought that resampling (thus blurring) the image would be better.

Attached are screen captures from Safari on Mac OS X, Safari on a first-generation iPod touch and Safari on an iPhone 4. Note that I have doubled the size of the screen captures of Mac OS X and the iPod touch (with the "nearest neighbor" method so it's a pixel-perfect doubling) so you can clearly compare with the iPhone 4 screen capture.





As you can see, there's nothing blurry on either the OS X or iPod touch screen captures. Blocky yes, but otherwise not blurred.



On the iPhone 4 screen capture, however, while we do get our "retina" images displayed with a much better result the smaller and bigger images appear blurry. That's because of the method used by Safari to double their size for the retina display. This is the problem to which I can't seem to find a solution. Using resampling to make an image smaller is the right choice, but using resampling to make them bigger, especially if they're exactly 200% bigger, is far from the right choice as you can see for yourself.

So my question is: does anyone know if there is a way, via an HTML meta, CSS parameters or other method, to force Safari/Webkit to NOT use resampling when doubling the size of the non-retina images?

-jeffB said:

So, what you're saying is that you'd prefer to have your image simply pixel-doubled (aka nearest-neighbor interpolation) for the high-resolution displays?

Click to expand...

Yes, that's exactly what I'm saying, but it should only work that way for images that are scaled up 200%/300%/etc only. But almost all of the current websites only have "1x resolution" graphics, which means Safari is always doing a 200% zoom on those images for the time being. That 200% number is not a rare scenario, it's 99.999% of the time.

So, doing a pixel-perfect zoom for 200% means all graphics on current websites would still end up looking exactly the same on the retina screen, because of the following:

If you do a pixel-perfect doubling of images on a double-resolution display, it cancels each other out and the result would look the same as on a regular LCD. It would also be less GPU-intensive because there's no interpolation required, thus requiring less battery power.

-jeffB said:

I can't offer any advice on how to control OS X or iOS's behavior here, but I think I can see Apple's reasoning. If you're actually displaying on a Retina Display, there should be little or no perceptible degradation from the "blurring" that's visible in your screen captures -- the apparent "lost information" would be at spatial frequencies that your eye won't perceive anyhow.

Your images may, indeed, do better with pixel-doubling rather than interpolation. But arbitrary images won't -- instead, you'll get spurious high-frequency information that, in conjunction with human vision's "vernier acuity" or "hyperacuity", actually makes the image look worse.

Again, I may be missing your major point; please feel free to elaborate if I am.

Click to expand...

No matter the DPI of the display, doing interpolation on the pixels changes the image data and blurs it. It does work when decreasing the size (see the 40x40 images displayed as 20x20 on OS X and the iPod touch) but it doesn't work when increasing it (going from 20x20 to 40x40 to display on the iPhone 4).

FYI, I did view those icons on both the first-generation iPod Touch and the iPhone 4, side-by-side. And yes, they are more blurry (for the smaller images) on the iPhone 4 than on my first-generation iPod touch. The difference is really as visible as on the screen captures above.

Just look at those screen captures on your computer display at more or less twice your usual distance from the monitor. You'll clearly see that the OS X/iPod touch screen captures look fine while the one from the iPhone 4 is clearly blurry.