How can I handle hi-res web images for hi-res displays (mainly iOS retina displays)?

Question

I have a mobile site using jQuery Mobile, however the images frankly look like crap on the iPhone 4 / 4S. I guess the same will be for the “new iPad” when it is available this week.

I know this has something to do with the pixel ratio and / or graphic DPI (or PPI or whatever you want to call ... don't discuss this). I just want to know what is the best method for serving high resolution web images for these iOS retina displays.

At first, I thought changing the DPI image (in Photoshop) would solve the problem. I took a few sample images and reduced them to a width of 190 pixels. I saved one image at 72 DPI and the other at 200 DPI. It had no effect. See for yourself (on iPhone 4 / 4S): http://haxway.com/restest/1.html The lower image of each of them is 200 DPI.

Then, instead of saving the hi-res image at 200 DPI, I saved it again at 72 DPI, but this time I increased the width (up to 528 pixels), so if I reduced it to 190px this would be at ~ 200 DPI. It looked like a trick: http://haxway.com/restest/2.html If you are looking at the source code, you can see that I am forcing width / height over image tags ( <img src="w4.jpg" alt="" width="190" height="143"> ).

However, I am not sure if this is the best solution. Doesn't use width / height attributes to scale image rendering performance, since the device should scale the image, and not just load it (and not touch it further)?

After some research, it looks like there are some CSS multimedia queries, such as -webkit-min-device-pixel-ratio [1], where you can use different CSS to display hi-res and therefore upload higher resolution images in CSS. But I need to configure the HTML <img> tags. Another article I read (sorry, lost the link) suggested using Javascript to replace “regular” images with hi-res. It just sounds crazy!

Is there a better way around this? I understand that opinions may differ from what is the “best” way. If the pros / cons of each method could be explained, that would be great! My goal is to use any method that gives the fastest (hopefully without using some hacked Javascript, etc.).

Thanks!

[1] http://aralbalkan.com/3331

Answer 1

You will need to run some form of js as a solution. The one that is currently in use is one of the wilcox mats. It will show the correct image on the screen. A big plus for this solution is image caching to reduce user load.

http://adaptive-images.com/

There is a push to add a new html image element that can take several sources to solve this problem, but this is not the answer.

http://www.w3.org/community/respimg/

Answer 2

For image tags, I think you have already given your own solution. A big advantage is sending the same image to all customers.

For css images you can't do the same? Forget about the awkward -webkit-min-device-pixel-ratio , which will require a different image every time it prepares a new device. Just send the largest image and use CSS3 background-size to zoom out. I have not tested this. IE <9 will give you a problem.

I probably like you, stunned html / css does not provide the correct method for this, but only such hacker workarounds. I, as well as you, are confused by the fact that why browsers simply do not adhere to images of DPI information. If anyone knows, comments are rated.

Is there a better way around this?

Yes, avoid using bitmaps. Use SVG.