В адаптивном веб-дизайне изображения трудно поддаются оптимизации для различных устройств. До сравнительно недавнего времени, подстановка различных изображений, основываясь на размере экрана или плотности пикселей, было довольно нетривиальной задачей.
Элемент <picture>
обещает исправить эту ситуацию. Но пока этот элемент не получил широкого распространения, есть два атрибута, которые помогут создавать адаптивные изображения - это srcset и sizes.
Атрибут 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 позволяет явным образом определить размер изображения, которое должен быть показано в соответствии с 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-условий:
Ширина может содержать практически любое значение длины, например, 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 и отображается одинаково при любых медиа-условиях.
© 2008 - 2025 Webmasters.BY Все права защищены
Новый комментарий