19 марта 2015

Улучшаем верстку изображений с помощью элемента picture

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

Первое, что нужно понять о picture это то, что сам элемент не отображается на странице. Он просто описывает контекст для вставленных в него изображений, позволяя браузеру выбрать один из нескольких вариантов. Его название вносит некоторую путаницу, так как у многих оно ассоциируется с такими элементами, как video и audio. В отличие от этих элементов, указание параметра src для элемента picture не имеет никакого смысла в том случае, если браузер поддерживает элемент source.

Если мы вернемся к спецификации, мы обнаружим, что элемент является контейнером, который обеспечивает несколько источников для содержащихся в нем IMG элементов. Это позволяет авторам декларативно контролировать или давать подсказки агенту пользователя о том, какие ресурсы использовать для загрузки изображения, на основе разрешения экрана, размера окна просмотра, формата изображения и других факторов. Внутри этого элемента мы можем разместить два различных тега: img, который используется для обеспечения совместимости со старыми браузерами, и source.

Source обладает четырьмя атрибутами:

srcset: С помощью этого атрибута можно указать URL изображения, которое мы хотим показать. Принимает несколько URL-адресов, разделенных запятыми. С помощью этого атрибута мы можем связать каждый URL с разрешением экрана или шириной окна. Эти данные должны быть отделены от ссылки пробелами.
- media: media-запрос, который должен передать элементу информацию о контексте отображения;
- sizes: здесь мы указываем данные о реальных размерах источников, указанных в srcset.
- type: информация о типе изображений, чтобы агент пользователя мог выбрать оптимальный из тех, которые он поддерживает.

Давайте рассмотрим способы использования элемента picture:

Режиссура контента:

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

Аппаратный выбор разрешения:

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

Адаптация под окно просмотра:

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

Выбор формата изображения:

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

Практические примеры

Представьте себе, что мы работаем над сайтом, отталкиваясь от его мобильной версии. В следующем коде изображение autumn-in-moscow-mobile.png установлено как источник по умолчанию, а затем указаны изображения, которые должны загружаться, если пользователь посещает сайт с планшета или мобильного устройства. Таким образом, autumn-in-moscow-tablet.png будет использоваться для устройств с экраном не менее 680px, autumn-in-moscow-desctop.png для устройств с шириной экрана минимум 1024px. Так как мы предполагаем, что пользователи могут посещать сайт, используя браузеры, которые не поддерживают picture, мы добавляем элемент img.

<picture>  <source media=\"(min-width: 1024px)\" srcset=\"autumn-in-moscow-desktop.png\">  <source media=\"(min-width: 680px)\" srcset=\"autumn-in-moscow-tablet.png\">  <source srcset=\"autumn-in-moscow-mobile.png\">  <img src=\"autumn-in-moscow.png\" alt=\"Autumn in Moscow\"></picture>

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

<picture>  <source media=\"(min-width: 1024px)\" srcset=\"autumn-in-moscow-desktop.png, autumn-in-moscow-desktop-hd.png 2x\">  <source media=\"(min-width: 480px)\" srcset=\"autumn-in-moscow-tablet.png, autumn-in-moscow-tablet-hd.png 2x\">  <source srcset=\"autumn-in-moscow-mobile.png, autumn-in-moscow-mobile-hd.png 2x\">  <img src=\"autumn-in-moscow.png\" alt=\"Autumn in Moscow\"></picture>

Как мы уже обсуждали выше, srcset принимает несколько адресов, разделенных запятыми. Кроме того, мы можем установить разрешение или ширину экрана для каждого источника. В этом случае второй URL в паре со строкой 2x, отделенной пробелом, предназначен для пользователей с дисплеем высокого разрешения (плотность пикселей 2x).

Теперь давайте посмотрим, как мы можем использовать атрибут size. Предположим, что нам необходимо, чтобы изображение занимало 50% ширины экрана, независимо от его фактического размера и плотности пикселей. Для достижения этой цели мы должны определить размер, который мы хотим охватить, и размер каждого изображения следующим образом:

<picture>  <source sizes=\"50vw\" srcset=\"autumn-in-moscow-mobile.png 480w, autumn-in-moscow-small-tablet.png 768w, autumn-in-moscow-tablet.png 968w, autumn-in-moscow-desktop.png 1024w\">  <img src=\"autumn-in-moscow.png\" alt=\"Autumn in Moscow\"></picture>

Совместимость

На момент написания статьи элемент поддерживается Chrome 38+ и Opera 25+. Начиная с 34-й версии Firefox поддерживает picture, если это указанно в настройках, а начиная с 38-й версии поддержка будет установлена по умолчанию. Рассматривается возможность поддержки этого элемента и в Internet Explorer (или его наследниках). К счастью, Скотт Джел создал кроссбраузерное решение, которые вы можете найти здесь.

Вывод

Правильное использование элемента picture позволяет легко справиться с проблемой отзывчивых изображений. Разработчики могут решать множество вопросов, не увеличивая объем передаваемого трафика. Этот элемент стал воплощением лучшего из того, что было предложено в течение последних нескольких лет, и сделал верстку отзывчивых сайтов несколько проще.