8

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

3
  • Your sample is a bit fishy though. What the browsers do, is show the images pixel by pixel. Viewed like that, your images are similar. The print sizes of the 200dpi images are just way smaller. If you would instead upload the same image in a higher resolution - containing more pixels - you would see the browsers show the images 3 times as large. Which is also not what you want.
    – commonpike
    Commented May 5, 2012 at 22:20
  • ... exactly. That's not what I want. So how this is current approach "fishy"? (Don't mean to attack... just curious.) Commented May 8, 2012 at 5:33
  • sorry if that sounded offending. It was confusing to me: what you want, I assume, is the same size image in a higher resolution. But you uploaded a smaller image in a higher resolution instead. If the browsers would respect the dpi, the 200dpi images you uploaded would be much smaller. (in either case, thanks for the test images - you helped me).
    – commonpike
    Commented May 12, 2012 at 20:54

2 Answers 2

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/

1
  • 1
    How is this an advantage over just always serving the high-resolution image with the width and height attributes set in the <img> tag (like my second example)? A device that doesn't have a "hi-res" screen would still display the image just fine. I understand it will conserve bandwidth, but anything else? I feel like a Javascript solution would be slower as it would likely run after the document is ready, etc. Caching shouldn't be a problem as I can always set the Expires header appropriately. I don't mean to attack this solution, I just want to know all the costs/benefits. Thanks! Commented Mar 12, 2012 at 23:21
0

For image tags, I think you've already given your own solution. The big benefit is, send one and the same image for all clients.

For css images, can't you do the same ? Forget about the clunky -webkit-min-device-pixel-ratio which will require a different image every time they cook up a new device. Just send out the biggest image and use CSS3's background-size to scale it down. I havent tested this. IE<9 will give you a problem.

I am, probably like you, stunned html/css does not provide a proper method to do this yet, only such hacky workarounds. I'm also, like you, confused as to why the browsers dont just adhere to the images DPI info. If anyone knows, comments are appreciated.

Is there a better way of going about this?

Yes, avoid using bitmap images. Use SVG.

2
  • I agree SVG would be a better solution, however browser support and performance is poor at this time. =/ Commented Apr 27, 2012 at 19:37
  • to make things worse, the ipad2 is notoriously bad at downscaling images. they become all jaggy. what i and my client have come to terms with, is use 132dpi for all images, inline and background. its quite acceptable on retina screens and not too big to download either.
    – commonpike
    Commented May 5, 2012 at 22:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.