В АДАПТИВНОМ ВЕБ-ДИЗАЙНЕ ИЗОБРАЖЕНИЯ ОДНИ ИЗ ТЕХ ВЕЩЕЙ, КОТОРЫЕ ТРУДНО ПОДДАЮТСЯ ОПТИМИЗАЦИИ ДЛЯ РАЗЛИЧНЫХ УСТРОЙСТВ. ДО СРАВНИТЕЛЬНО НЕДАВНЕГО ВРЕМЕНИ, ПОДСТАНОВКА РАЗЛИЧНЫХ ИЗОБРАЖЕНИЙ, ОСНОВЫВАЯСЬ НА РАЗМЕРЕ ЭКРАНА ИЛИ ПЛОТНОСТИ ПИКСЕЛЕЙ, БЫЛО ДОВОЛЬНО НЕТРИВИАЛЬНОЙ ЗАДАЧЕЙ.
Элемент <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 и отображается одинаково при любых медиа-условиях.
- Подпись автора