问题
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
回答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/
回答2:
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.
来源：https://stackoverflow.com/questions/9673234/what-is-the-proper-way-to-handle-hi-res-web-images-for-hi-res-displays-mainly-i