Как обрабатывать все различные размеры и разрешения изображений для Retina и Non-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 для изображений в приложениях?

[1]: Non-Retina изображения размера: 1454 х 605 [2]: Retina изображения размера: 2908 х 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>, которые половина размера реального пикселя изображения является хорошим способ, чтобы служить изображения высоких DPI, хотя это происходит чтобы тратить некоторую полосу пропускания на экранах обычного DPI.

Возможно, вы захотите, чтобы enable better image interpolation при использовании.