处理高分辨率显示器（主要是iOS视网膜显示器）的高分辨率网络图像的正确方法是什么？ [英] What is the proper way to handle hi-res web images for hi-res displays (mainly iOS retina displays)?
问题描述
我有一个利用jQuery Mobile的移动网站，但坦率地说，这些图像看起来像是iPhone 4 / 4S上的垃圾。我假设在本周晚些时候推出的新iPad也是如此。
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.
我知道这与像素比率和/或图像有关DPI（或PPI或任何你想称之为的......我们不要讨论这个问题）。我只是想知道为这些iOS视网膜显示器提供高分辨率网页图像的最佳方法是什么。
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.
首先，我想改变图像DPI（在Photoshop中） ）会解决问题。我拍了一些样本图像并将它们缩小到190px的宽度。我以72 DPI保存了一张图像，另一张图像保存在200 DPI。这没有效果。亲身体验（在iPhone 4 / 4S上）： http://haxway.com/restest/1.html 每个的底部图像是200 DPI。
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.
然后，我将其保存在72 DPI，而不是将高分辨率图像保存在200 DPI再次，但这次我增加了宽度（到528px），这样当缩小到190px的宽度时，它将是~200 DPI。这似乎可以解决问题： http://haxway.com/restest/2.html 如果你查看源代码，你可以看到我在图像标签上强制宽度/高度（< img src =w4.jpgalt =width =190height =143 > ）。
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)?
经过一些研究，看起来有一些CSS媒体查询，如 -webkit-min-device-pixel-ratio [1]，你可以使用不同的CSS高分辨率显示，因此在CSS中加载更高分辨率的图像。但我需要定位HTML < img> 标记。我读过的另一篇文章（遗憾地丢失了链接）建议使用Javascript来替换高分辨率的常规图像。这听起来很疯狂！
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!
有没有更好的方法来解决这个问题？我意识到哪些是最好的方式可能会有所不同。如果可以解释每种方法的优点/缺点，那就太棒了！我的目标是使用任何方法呈现最快（希望不使用一些hacky Javascript等）。
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).
谢谢！
[1] http://aralbalkan.com/3331
推荐答案
您需要运行某种形式的js作为解决方案。目前选择使用的是席卷wilcox。它将为屏幕提供正确的图像。此解决方案的一大优点是它可以缓存图像以减少用户的负担。
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.
有一个新的图片html元素，可以采取多种来源来克服这个问题，但还有一段路要走。
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 /
这篇关于处理高分辨率显示器（主要是iOS视网膜显示器）的高分辨率网络图像的正确方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
