处理高分辨率显示器（主要是iOS视网膜显示器）的高分辨率网页图像的正确方法是什么？
我有一个手机网站利用jQuery Mobile，但是坦率地说，这些图像看起来像iPhone 4 / 4S上的废话。 我认为，本周晚些时候推出的“新iPad”也是如此。
我知道这与像素比例和/或图像DPI（或PPI或任何你想称之为的事情）有关。我们不要讨论这个问题。 我只是想知道为这些iOS视网膜显示器提供高分辨率网页图像的最佳方法是什么。
起初，我认为改变图像DPI（在Photoshop中）将解决这个问题。 我拿了一些示例图像，并缩小到190px的宽度。 我以72 DPI和200 DPI保存了一张图片。 这没有效果。 请亲自看看（在iPhone 4 / 4S上）： http : //haxway.com/restest/1.html每张图片的底部图片都是200 DPI。
然后，我不再将高分辨率图像保存为200 DPI，而是将其保存为72 DPI，但是这次我将宽度增加到了528像素，因此当缩小到190像素的宽度时，它将在〜200 DPI。 这似乎是诀窍： http : //haxway.com/restest/2.html如果你查看源代码，你可以看到我强制图像标签的宽度/高度（ <img src="w4.jpg" alt="" width="190" height="143"> ）。
不过，我不相信这是最好的解决scheme。 不使用宽度/高度属性来缩放图像会影响渲染性能，因为设备不得不缩放图像，而不是仅仅加载图像（而不是继续触摸它）。
经过一番研究，看起来好像有一些CSS媒体查询，如-webkit-min-device-pixel-ratio [1]，你可以使用不同的CSS来显示高分辨率的图像，因此在CSS中加载更高分辨率的图像。 但是我需要定位HTML <img>标签。 我阅读的另一篇文章（对不起，失去了链接）build议使用Javascript来换出高分辨率的“常规”图像。 这听起来很疯狂！
有没有更好的方法去做这件事？ 我意识到意见可能会有所不同，这是“最好”的方式。 如果每种方法的优缺点都可以解释，那就太棒了！ 我的目标是使用任何方法呈现最快（希望没有使用一些黑客的Javascript等）。
谢谢！
[1] http://aralbalkan.com/3331
您将需要运行某种forms的js作为解决scheme。 目前select使用的是wilcox。 它将为屏幕提供正确的图像。 这个解决scheme的最大优点是caching图像以减less用户的负担。
有一个新的图片html元素，可以采取几个来源来克服这个问题，但它还有一段路要走。
对于图片标签，我想你已经给出了自己的解决scheme。 最大的好处是，为所有的客户发送一个相同的图像。
对于CSS图像，你不能这样做吗？ 忘记每次烹饪新设备时需要不同图像的笨重的-webkit-min-device-pixel-ratio 。 只发送最大的图像，并使用CSS3的background-size来缩小它。 我没有testing过这个。 IE <9会给你一个问题。
我，可能像你一样，目瞪口呆的HTML / CSS没有提供一个适当的方法来做到这一点，只有这样的hacky解决方法。 我也像你一样， 为什么浏览器不坚持图像DPI信息困惑。 如果有人知道，意见表示赞赏。
有没有更好的方法去做这件事？
是的，避免使用位图图像。 使用SVG。