Встроенная поддержка браузерами адаптивных изображений

Элемент <picture>

Элемент <picture> предлагает декларативный подход к загрузке изображений. Веб-разработчикам больше не нужно будет колдовать с CSS или JavaScript для обработки изображений в адаптивном дизайне. А пользователи получают выгоду от изначально оптимизированных изображений – это особенно важно для пользователей с медленным мобильным интернет-соединением.

Наряду с новыми атрибутами srcset и sizes, недавно добавленными в <img>, элемент <picture> дает веб-разработчикам больше гибкости в указании источников загрузки изображений.

Создайте четкую HTML-разметку и позвольте браузеру самому делать всю работу по обнаружению одного из описанных ниже сценариев (одного сценария или комбинации нескольких), чтобы поддерживать адаптивные конструкции и уменьшить время загрузки веб-страницы.

Выбор на основе ориентации экрана устройства

Мобильное устройство пользователя имеет в данный момент портретную ориентацию или это широкоформатный монитор стационарного компьютера? Загружается изображение, оптимизированное под эти параметры экрана.

Выбор на основе расширения экрана в пикселях

Устройство имеет экран с высоким разрешением? Загружается изображение с высшим разрешением.

Выбор на основе параметров окна

Изображение предполагает определенные пропорции, привязанные к параметрам окна?

Загружается изображение, связанное с параметрами окна.

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

Браузер поддерживает дополнительные типы файлов изображений, которые дают прирост производительности, например, меньший размер файла? Загружается альтернативный файл изображения, например, WebP.

Использование ориентации экрана

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

Это результат использования одного масштабируемого изображения:

Используйте несколько различных изображений для заполнения всей области просмотра.

Оптимизация производительности источника изображения

При использовании элементов <picture> или <img> с атрибутами srcset и sizes, браузер будет загружать только изображение, четко привязанное к сценарию. Эта реализация совместима с HTML-парсерами и может дать дополнительный эффект при применении с кэшированием изображений браузером и предварительной загрузкой.

Просмотр интерактивных демонстраций

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

Откройте демо в новой вкладке в Google Chrome 38 или выше. Измените размер окна, чтобы увидеть кота в действии.

Эта демо-версия показывает нам только минимум функций, которые можно реализовать с помощью элемента <picture>. Теперь давайте рассмотрим синтаксис.

Синтаксис <picture>

В следующем фрагменте HTML– и CSS-кодов приведено все, что было использовано для реализации данной демонстрации:

<style>
  img {display: block; margin: 0 auto;}
</style>

<picture>
  <source 
    media="(min-width: 650px)"
    srcset="images/kitten-stretching.png">
  <source 
    media="(min-width: 465px)"
    srcset="images/kitten-sitting.png">
  <img 
    src="images/kitten-curled.png" 
    alt="a cute kitten">
</picture>

Обратите внимание, что здесь не используется ни JavaScript, ни сторонние библиотеки. Блок CSS <style> используется только для стиля элемента изображения и не содержит медиа запросов. Оригинальная реализация элемента <picture> предполагает, что вы можете объявить свои адаптивные изображения, используя только HTML.

Использование вместе с элементом <source>

Элемент <picture> не имеет собственных уникальных атрибутов. Магия происходит, когда <picture> используется в качестве контейнера для элемента <source>.

Элемент <source>, который используется для загрузки медиа, таких как видео или аудио, был обновлен для загрузки изображений, и для него были добавлены следующие новые атрибуты:

srcset (обязательный)

Принимает один путь к файлу изображения (например, srcset=”kitten.png”). Или список путей к файлам изображений через запятую с дескрипторами плотности пикселей (например, srcset=”kitten.png, kitten@2X.png 2x”), где дескриптор 1x принимается по умолчанию, если его значение не указано.

media (необязательный)

Принимает любой валидный медиа запрос, который обычно размещается в CSS селекторе @media (например, media=”(max-width: 30em)”).

Используется тот же синтаксис элемента, что и в предыдущем примере.

sizes (необязательный)

Принимает один дескриптор ширины (например, sizes=”100vw”) или один медиа запрос с дескриптором ширины (например, sizes=”(max-width: 30em) 100vw”).

Или список медиа запросов через запятую с дескриптором ширины (например, sizes=”(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw – 100px)”), где последний пункт списка используется в качестве значения по умолчанию.

type (необязательный)

Принимает поддерживаемый тип MIME (например, type=”image/webp” ortype=”image/vnd.ms-photo”).

Браузер будет использовать указания, предоставляемые через значения атрибутов для загрузки наиболее подходящего источника изображения. Порядок расстановки тегов имеет значение! Браузер будет использовать в качестве указания первый элемент <source> и игнорировать все следующие теги <source>.

Добавление окончательного элемента

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

Использование <img> в <picture> является обязательным требованием – если вы забудете сделать это, изображения не будут выводиться.

Используйте <img> для объявления изображения по умолчанию, которое будет использоваться в блоке <picture>. Элемент <img> должен размещаться, как последний дочерний элемент <picture>, так как браузер будет игнорировать все объявления <source>, которые размещаются после тега <img>. Тег изображения также используется в том месте, где вы должны указать альтернативный текст с помощью атрибута изображения alt.

Использование с дескрипторами плотности пикселей

Вы можете добавить поддержку для дисплеев с высоким разрешением, используя дескрипторы плотности пикселей, такие как 1x, 1.5x, 2x и 3x. Новый атрибут srcset применяется и к элементу <img>, и к элементу <source>.

В приведенном ниже примере поддерживается разрешения экранов 1x, 1.5x, и 2x:

<picture>
  <source 
    media="(min-width: 650px)" 
    srcset="images/kitten-stretching.png,
            images/kitten-stretching@1.5x.png 1.5x,  
            images/kitten-stretching@2x.png 2x">
  <source 
    media="(min-width: 465px)" 
    srcset="images/kitten-sitting.png,
            images/kitten-sitting@1.5x.png 1.5x
            images/kitten-sitting@2x.png 2x">
  <img 
    src="images/kitten-curled.png" 
    srcset="images/kitten-curled@1.5x.png 1.5x,
            images/kitten-curled@2x.png 2x"
    alt="a cute kitten">
</picture>

Использование с дескрипторами ширины

Основополагающие принципы Веб описывают новые атрибуты размеров для элемента <img> следующим образом:

Ниже приводится пример использования атрибута sizes для установки пропорций изображения таким образом, чтобы оно всегда заполняло 80% видимой области экрана. Он применяется вместе с атрибутом srcset, чтобы предоставить четыре версии одного и того же фото маяка шириной в 160 пикселей, 320 пикселей, 640 пикселей, и 1280 пикселей:

<img src="lighthouse-160.jpg" alt="lighthouse"
     sizes="80vw"
     srcset="lighthouse-160.jpg 160w, 
             lighthouse-320.jpg 320w,        
             lighthouse-640.jpg 640w,
             lighthouse-1280.jpg 1280w">

Браузер будет использовать эти указания, чтобы выбрать наиболее подходящий источник изображения для текущей ширины окна браузера и разрешения дисплея устройства:

Например, окно слева имеет приблизительно 800 пикселей в ширину. Браузер загрузит файл lighthouse-640.jpg. Если только соотношение пикселей дисплея устройства не равно 2x – в этом случае будет загружен файл lighthouse-1280.jpg.

Добавив <picture>, вы можете применить атрибут sizes и к элементу <img>, и к элементу <source>:

<picture>
  <source media="(min-width: 800px)"
          sizes="80vw"
          srcset="lighthouse-landscape-640.jpg 6400w,
                  lighthouse-landscape-1280.jpg 1280w,
                  lighthouse-landscape-2560.jpg 2560w">
  <img src="lighthouse-160.jpg" alt="lighthouse"
       sizes="80vw"
       srcset="lighthouse-160.jpg 160w,
               lighthouse-320.jpg 320w,
               lighthouse-640.jpg 640w,
               lighthouse-1280.jpg 1280w">
</picture>

Основываясь на предыдущем примере, если окно просмотра имеет ширину 800 пикселей и больше, браузер будет обслуживать альбомную версию фотографии маяка:

Ширина области просмотра слева больше 800 пикселей, поэтому отображается альбомная версия фото маяка.

Загрузите альтернативные форматы файлов изображений

Атрибут type элемента <source> может быть использован для загрузки альтернативных форматов файлов изображений, которые не поддерживаются во всех браузерах.

Например, вы можете предоставить изображение в формате WebP для браузеров, которые поддерживают его, в то время как для других браузеров будет использоваться формат JPEG:

<picture>
  <source type="image/webp" srcset="images/butterfly.webp">
  <img src="images/butterfly.jpg" alt="a butterfly">
</picture>

Перевод статьи «Built-in Browser Support for Responsive Images» был подготовлен дружной командой проекта Сайтостроение от А до Я.