Адаптивные изображения для Retina дисплеев на HTML5

Так как рост популярности Retina и других дисплеев высокой четкости возрастает, веб-разработчикам сейчас как никогда важно использовать изображения высокой четкости. Для достижения этого существуют разные способы, некоторые из которых я описал в статье. Мы рассмотрим следующие способы:

• Загрузка изображения размером 2х и установка значения высоты и ширины изображения размером 1x
• Использование библиотеки JavaScript (или своей собственной) для загрузки 2x изображения
• Использование атрибута HTML5 srcset
• Использование элемента HTML5 picture

Загружаем изображения в размере 2x 

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

• Для использования графики высокой четкости, укажите img src.
• Установите высоту и ширину изображения не таким размером, как для Retina.

К примеру, изображение высокой четкости имеет размер 100 × 200 пикселей. Итак, используя CSS или атрибуты в HTML укажите данную высоту и ширину изображения(100 × 200). А загрузите изображение, которое в два раза больше (200 × 400 пикселей).

HTML код будет таким:

<img src="/images/foo@2x.png" style="height:100px; width: 200px;" alt="bar" />

Используем JavaScript

Есть так же другой вариант - использовать JavaScript для загрузки графики под retina после загрузки самой страницы. Для этого в свободном доступе есть несколько библиотек. Я решил использовать retinajs library. Я, кстати, отправил pull request для исправления ошибки, когда библиотека пыталась загрузить графику под retina, в то время, когда я уже загружал ее через атрибут srcset (мы поговорим об этом позже).

Вкратце, наиболее распространенный подход - перебрать все изображения в DOM и попытаться загрузить изображение высокой четкости. Retinajs ищет аннотированные (имя файла + @ 2x) изображения на вашем сервере. После того, как Apple для iOS впервые использовал это соглашение об именовании, оно стало стандартным. Если файл изображения лежит на вашем сервере (возвращает код состояния 200), то Retina изображение заменяется изображением без него. Конечно, также должно обеспечиваться соблюдение исходных размеров изображения (так же, как с загрузкой изображений Retina), чтобы изображения на экране не были в два раза больше. 

И еще я не упомянул одну вещь: прежде чем что-либо делать, JavaScript должен сначала проверить, сидит ли пользователь с устройства на Retina. Нам не нужно пытаться загружать изображения под Retina без необходимости.

Это решение работает довольно хорошо, но не без изъянов:

• Браузер по-прежнему сначала загружает изображения не под Retina, хотя для пользователей с ней этого делать не нужно. 
• Пользователи Retina могут заметить нечеткие изображения, прежде чем они будут заменены графикой Retina высокой четкости. Не то, что бы это бросается в глаза, но это может быть заметно.
• И конечно же, теперь нам нужно загрузить библиотеку JavaScript. Код часто довольно короткий, но все же добавляет немного дополнительного времени загрузки.

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

Атрибут HTML5 srcset

Новый атрибут srcset для элемента <img> был предложен W3C как часть спецификации HTML5, и уже реализован в некоторых браузерах. Первые два метода, которые мы рассмотрели выше, на самом деле просто хаки, до того славного момента, когда появится широкая поддержка изображений высокой четкости в браузерах. Оба решения в принципе довольно адекватны, но мы же четко видим необходимость стандартного подхода, который бы реализовывался основными браузерами. Попробуйте эти два метода: используя атрибут srcset и используя новый тег <picture>. 

Атрибут srcset позволяет вам указать список источников изображений, которые можно использовать на основе ширины браузера и плотности пикселей устройства. Это действительно круто, и я очень рад сообщить, что Google Chrome уже реализовал это. Вы можете посмотреть, какие браузеры поддерживают эту спецификацию на caniuse.com/srcset. Обратите внимание, что WebKit (механизм рендеринга для Safari) тоже реализовал ее, и он, вероятно, будет выпущен в Safari 8, который будет поставляться с OS X.

HTML код загрузки изображений для retina экранов: 

<img src="/images/foo.png" alt="bar" srcset="/images/foo.png 2x" />

Просто и красиво.

Для атрибута srcset тоже можно использовать список. Использование списка для srcset позволяет разработчику сообщить браузеру, что вместо изображения src по умолчанию доступны и другие размеры. Используя флаг w, мы сообщаем браузеру, что доступны разные параметры ширины для одного и то же изображения. Параметр ширины width используем аналогично тому, как работаем с CSS-свойствами max-width в медиа-запросах. Например, мы можем разрешить браузеру использовать среднее и большое изображение в зависимости от размеров изображения в окне просмотра:

<img
  src="/images/foo.png"
  alt="bar"
  srcset="/images/foo-medium.png 1024w,
               /images/foo-large.png 2048w,
               /images/foo.png 800w"
/>

В комбинации с атрибутом sizes, браузер может выбрать изображение, которое лучше всего подходит для пользователя, на основе желаемого размера изображения области просмотра(viewport) и доступных размеров изображения, предоставленных в атрибуте srcset. Мы также можем использовать медиа-запросы вместе с атрибутом sizes, чтобы установить размер относительно области просмотра(viewport) на основе его ширины. Вот пример отображения изображения при 50% ширины от области просмотра на настольных компьютерах и 100% на мобильных устройствах.

<img
  src="/images/foo.png"
  alt="bar"
  srcset="/images/foo-medium.png 1024w,
               /images/foo.png 800w"
  sizes="(min-width: 1024px) 1024px,
              800px"
/>

Атрибут srcset- отличный способ включить графику высокой четкости для пользователей на Retina дисплеях. Кроме того, браузер не будет загружать стандартное изображение с низким разрешением для них, поэтому скорость загрузки и обьем памяти страницы не изменится. И, как я уже говорил, комбинируя атрибуты srcset и sizes, можно дополнительно указать ширину изображения в окне просмотра браузера, чтобы он мог выбрать наиболее подходящее изображение.

Элемент HTML5 picture

И последний метод, о котором я вам расскажу, - это новый элемент <picture>. Элемент picture использует тот же подход, что и элементы HTML5 <audio> и <video>, а это позволяет указывать несколько источников с возможностью возврата к стандартному изображению без Retina. Элемент picture использует атрибуты srcset и sizes, о которых мы уже поговорили, и инкапсулирует различные источники изображений, из которых браузер выбирает нужный, исходя из ширины области просмотра и плотности пикселей устройства. К сожалению, на момент написания этой статьи он еще не был реализован ни в одном из основных браузеров: caniuse.com/picture.

В следующем примере мы собираемся указать два разных источника загрузки изображения с возможностью загрузки исходного. Первый источник <source> использует медиазапрос, чтобы ограничить использование для устройств с разрешением экрана более 1024 пикселей. Кроме того, этот источник <source> также определяет различные размеры изображений, в зависимости от ширины области просмотра. Второй источник <source> определяет изображения, которые будут использоваться на основе плотности пикселей устройства. А еще у нас есть тег <img>, который использует изображение по умолчанию для отображения в браузере. При использовании элемента picture, необходимо всегда указывать тэг fallback <img>. Если тег <img> отсутствует, то первые два источника не будут отображать изображение в браузере. По сути, source источники просто предоставляют информацию браузеру, который, в свою очередь, на основе размера области просмотра и плотности пикселей устройства выбирает лучшее изображение.

<picture>
   <source media="(min-width: 1024px)" srcset="foo-large.jpg  1024w, foo-medium.jpg 640w, foo-small.jpg 320w" sizes="50vw" />
   <source srcset="foo@2x.jpg 2x, foo.jpg 1x" />
   <img src="foo.jpg" alt="Bar" />
</picture>

Я надеюсь, что помог вам узнать немного больше о Retina и адаптивных изображениях в HTML5. Изображения высокой четкости уже повсюду. Поэтому я не вижу здравых причин не добавлять Retina и адаптивные изображения на ваш сайт.