Адаптивные изображения: атрибуты srcset и sizes

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

Атрибут srcset

Атрибут srcset позволяет указать набор изображений, которые могут быть потенциально использованы браузером. Мы, как разработчики, предоставляем, разделенный запятыми, список изображений, а браузер пользователя определяет, какое изображение использовать для отображения, в зависимости от особенностей устройства.

При перечислении изображений, мы предоставляем следующую информацию о каждом изображении:

• путь к файлу изображения,
• плотность пикселей или ширина изображения.

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

<img src="one.png" srcset="two.png 2x, three.png 3x, four.png 4x" />

Предполагается, что изображение, определенное при помощи атрибута src, имеет глубину 1x.

Когда атрибут srcset был впервые представлен в 2012 году, мы могли указать только изображения с различной плотностью пикселей, как показано выше. Но спецификация 2014 года ввела значение ширины, которое позволяет указать ширину различных изображений.

Чтобы определить ширину изображения, мы добавляем w к ширине в пикселях для изображения. Например:

<img src="one.png" srcset="two.png 100w, three.png 500w, four.png 1000w" />

Только при указании ширины в атрибуте srcset, мы можем определять атрибут sizes.

Атрибут sizes

Атрибут sizes позволяет явным образом определить размер изображения, которое должен быть показано в соответствии с media условиями.

<img src="one.png"
    srcset="two.png 100w, three.png 500w, four.png 1000w"
    sizes="<media condition> <width>,
    <media condition> <width>,
    <optional default image width>">

Медиа условия

Media условия не совсем тоже, что media-запросы. Они является частью media-запросов. Они не позволяют нам определить тип носителя, например, screen или printer, но принимают условия, которые мы обычно добавляем к типу носителя.

Примеры валидных значений для media-условий:

• простое медиа-условие, например, (min-width: 900px)
• "отрицательное" медиа-условие, например, (not (orientation: landscape))
• медиа-условие "and", например, (orientation: landscape) and (min-width: 900px)
• медиа-условие "or", например, ( (orientation: portrait) or (max-width: 500px) )

Ширина

Ширина может содержать практически любое значение длины, например, em, rem, pixels, и viewport width. Однако, процентные значения не допускаются, "чтобы избежать путаницы в том, что будет относительно". Значение vw рекомендуется в качестве альтернативы, если требуется относительная величина.

Собираем все вместе

Добавляем медиа-условия и ширину:

<img src="one.png"
    srcset="two.png 100w, three.png 500w, four.png 1000w"
    sizes="(min-width: 900px) 1000px,
    (max-width: 900px) and (min-width: 400px) 50em,
    (not (orientation: portrait)) 300px,
    ((orientation: landscape) or (min-width: 1000px)) 50vw,
    100vw">

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

Поддержка браузерами

Атрибуты srcset и sizes относительно хорошо поддерживаются. Для браузеров, которые не поддерживают эти атрибуты, изображение извлекается из обычного атрибута src и отображается одинаково при любых медиа-условиях.