Как работать со всеми различными размерами и разрешениями изображений для Retina и Non-Retina iPhone и iPad для Интернета

Question

Apple.com недавно изменила свои веб-изображения, чтобы приспособить дисплей сетчатки нового iPad, удвоив размер их изображений.Пример:

non-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 для изображений в приложениях?

[1]: изображение без Retina с размером: 1454 x605 [2]: изображение сетчатки размером: 2908 x 1210

Answer 1

Нет, недостаточно просто создать изображение _2x. Apple использует собственный скрипт, чтобы заставить это работать. Это описано здесь:

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

Это не идеальное решение, так как оно тратит впустую полосу пропускания, сначала загружая изображение обычного размера, и делает дополнительные запросы к серверу.

---

Как обслуживать изображения с высоким разрешением - это открытый вопрос. На W3C есть неофициальное обсуждение этого вопроса:

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

---

Добавление размеров width и height к <img>, составляющих половину реального размера пикселя изображения, является хорошим способом обслуживания изображений с высоким разрешением, хотя при этом на экранах с обычным разрешением будет использоваться некоторая пропускная способность. *

Возможно, вы захотите включить лучшую интерполяцию изображения при использовании этого.