What is the proper way to handle hi-res web images for hi-res displays (mainly iOS retina displays)?

Question

I have a mobile website taking advantage of jQuery Mobile, however the images, frankly, look like crap on the iPhone 4/4S. I assume the same will go for the "new iPad" when it is available later this week.

I know this has something to do with the pixel ratio and/or image DPI (or PPI or whatever you want to call it... let's not get into a discussion about that). I simply want to know what is the best method for serving hi-resolution web images for these iOS retina displays.

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

Then, instead of saving the hi-res image at 200 DPI, I saved it at 72 DPI again but this time I increased the width (to 528px) so that when scaled down to a width of 190px it would be at ~200 DPI. This seemed to do the trick: http://haxway.com/restest/2.html If you view the source, you can see I am forcing a width/height on the image tags (<img src="w4.jpg" alt="" width="190" height="143">).

However, I'm not convinced this is the best solution. Doesn't using the width/height attributes to scale an image impact rendering performance as the device has to scale the image rather than just loading it (and not touching it any further)?

After some research, it looks like there are some CSS media queries like -webkit-min-device-pixel-ratio [1] where you can use different CSS for hi-res displays and therefore load higher-res images in the CSS. But I need to target HTML <img> tags. Another article I read (sorry lost the link) suggested using Javascript to swap out the "regular" images with hi-res ones. That just sounds crazy!

Is there a better way of going about this? I realize opinions may differ about which is the "best" way. If the pros/cons of each method could be explained, that would be great! My goal is to use whatever method renders the fastest (hopefully without using some hacky Javascript, etc).

Thanks!

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

Answer 1

You will need to run some form of js as the solution. The one in choose to use at the moment is one by mat wilcox. It will serve the right image to the screen. The big plus for this solution is it caches the images to reduce load on users.

http://adaptive-images.com/

There is a push to bring in a new picture html element that can take several source to overcome this problem, but it's a way off yet.

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