В истории развития веб-дизайна изображения — отстающая технология. До недавнего времени использование разных изображений в зависимости от размера экрана или плотности пикселей не было четко определено.
Но с появлением элемента <picture> ситуация начинает исправляться. В нем есть два атрибута, которые являются ключевыми для использования адаптивных изображений — srcsetи соответствующих sizes.
Атрибут srcset
Атрибут srcset позволяет использовать комплект исходных файлов изображения, которые могут быть использованы при рендеринге страницы в браузере. Для этого нужно задать список изображений, разделенных запятыми, и юзер-агент определяет, какое из них отобразить, в зависимости от типа и особенностей устройства.
При перечислении изображений мы предоставляем две типа данных о каждом изображении
- Путь к файлу изображения
- Плотность пикселей или ширина изображения
Чтобы задать плотность пикселей , добавим xк числу плотности изображение. Например —
<img src="myimage-one.png"
srcset="myimage-two.png 2x, myimage-three.png 3x, myimage-four.png 4x">Предполагается, что изображение, установленное по умолчанию с тегом src имеет атрибут srcset, равный 1x.
Когда спецификация атрибута srcset была представлена в 2012 году, у нас была возможность использовать только изображения с разной плотностью пикселей, как показано выше. Однако спецификация 2014 г. ввела значение ширины, что позволило указывать ширину разным изображениям.
Для указания ширины изображения нужно добавить wк значению ширины изображения в пикселях. Например —
<img src="myimage-one.png"
srcset="myimage-two.png 100w, myimage-three.png 500w, myimage-four.png 1000w">Только при использовании ширины в атрибуте srcset мы можем сопровождать его атрибутом sizes.
Атрибут sizes
Атрибут sizes позволяет явно определить размер изображения, который должен быть использован, в зависимости от условий media.
<img src="myimage-one.png"
srcset="myimage-two.png 100w, myimage-three.png 500w, myimage-four.png 1000w"
sizes="<media condition> <width>,
<media condition> <width>,
<optional default image width>">Media условия
Медиа условия — это не то же самое, что медиа-запрос. Это часть медиа-запроса. Они не позволяет нам указывать типы медиа, например, screenили print, но принимает условия, которые мы обычно добавляем к типу медиа.
Допустимыми медиа условиями могут быть либо —
- Прямое медиа условие, например
(min-width: 900px) - Меди условие с отрицанием, например
( not (orientation: landscape) ) - Комбинация медиа условий, например
(orientation: landscape) and (min-width: 900px) - Выбор одного из условий, например
( (orientation: portrait) or (max-width: 500px) )
Ширина
Указанная ширина может быть почти любым значением длины, например em, rem, пиксели или ширина вьюпорта.
Однако процентные значения не допускаются, чтобы избежать путаницы.
Если требуется относительная величина, в качестве альтернативы рекомендуется использовать vw.
Общий вид
Объединяя пример использования srcsetи sizes —
<img src="myimage-one.png"
srcset="myimage-two.png 100w, myimage-three.png 500w, myimage-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 и нормально отображается при всех медиа условиях.
