如何處理Retina和非Retina圖像的所有不同尺寸和分辨率iPhone和iPad的網頁

Question

Apple.com最近改變了他們的網頁圖像，以適應新iPad的視網膜顯示器，將圖像大小加倍。例如：

非retina.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中的圖像在Apps中？

[1]：1454 X 605 [2]：視網膜與大小的圖片：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。