如何处理适用于 Web 的 Retina 和非 Retina iPhone 和 iPad 的所有不同尺寸和分辨率的图像

Question

Apple.com 最近更改了他们的网络图像，通过将图像大小增加一倍来适应新 iPad 的视网膜显示屏。示例：

非视网膜.jpg： http://images.apple.com/home/images/ipad_hero.jpg [1] retina_2x.jpg： http://images.apple.com/home/images/ipad_hero_2x.jpg [2]

虽然两张图片都在 html 中设置为width="1381" height="575"。 使用 _2x 重命名放大的图像是否足以让浏览器获取适当的图像，类似于应用程序中的图像 @2x？

[1]：非 Retina 图像，尺寸：1454 x 605 [2]：Retina 图像尺寸：2908 x 1210

Answer 1

不，仅创建 _2x 图像是不够的。 Apple 使用自定义脚本来完成这项工作。这里有描述：

http://cloudfour.com/how-apple-com-will-serve-retina-images-to-new-ipads/

这不是一个理想的解决方案，因为它首先会浪费带宽下载常规大小的图像，并且会向服务器发出额外的请求。

---

如何提供高 dpi 图像是一个悬而未决的问题。在 W3C 上有一些非官方的讨论：

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

---

将 width 和 height 尺寸添加到图像实际像素大小的一半的 <img> 是提供高 DPI 图像的好方法，尽管它会在常规 DPI 屏幕上浪费一些带宽。

当你使用它时，你可能想enable better image interpolation。