Адаптивные изображения
Тег picture
Адаптивные изображения
Тег picture
Элемент picture — ещё один инструмент, который предоставляет дополнительные возможности управления выбором изображений. В отличие от srcset и sizes, элемент picture подразумевает ручной выбор изображения в зависимости от условий.
Внутри picture через дочерние элементы source можно указывать изображения и медиаусловия, при которых они будут выбраны:
<picture>
<source srcset="/img/300x350.png" media="(max-width: 350px)" />
<source srcset="/img/800x630.png" media="(max-width: 800px)" />
<source srcset="/img/2000x1000.png" media="(max-width: 1000px)" />
<source srcset="/img/3000x1500.png" media="(min-width: 1001px)" />
<img src="/img/2000x1000.png" style="width: 100%;" alt="Пример 1" />
</picture>
Элемент img обязателен — через него задаются размеры, стили и прочие атрибуты изображения. Если браузер не поддерживает picture или source, подставляется изображение из img.
Всё это напоминает srcset и sizes, но есть принципиальное отличие. В srcset и sizes мы указываем условия и целевой размер изображения. Подбором наиболее подходящего изображения из доступных занимается браузер. В source мы явно указываем ресурс, который должен быть показан при выполнении условия.
Для описания этой задачи в англоязычных статьях часто встречается термин art direction problem
На разных экранах одно и то же изображение может смотреться по‑разному. Иногда требуется показывать главный объект изображения с окружающими мелкими деталями на широких экранах и кадрировать изображение на узких. Технически — показывать разные изображения с разными пропорциями. Как именно кадрировать, каковы условия подстановки нужных изображений — вопрос дизайна, а picture помогает решить его.
Для описания этой задачи в англоязычных статьях часто встречается термин art direction problem
picture удобно управлять переключением изображений в зависимости от размера экранаПри этом в source используется знакомый нам атрибут srcset, а значит, оба подхода можно совместить — менять изображение с помощью медиаусловий и дать браузеру возможность выбирать из вариантов изображения. Для этого нужно добавить варианты и описать критерии подстановки с помощью sizes в source:
<picture>
<source srcset="/img/300x350.png" media="(max-width: 350px)" />
<source srcset="/img/800x630.png" media="(max-width: 800px)" />
<source srcset="/img/2000x1000.png 2x,
/img/1000x500.png 1x"
sizes="1000px"
media="" />
<img src="/img/2000x1000.png" style="width: 100%;" alt="Пример 2" />
</picture>
В элементе source, вложенном в picture работает тот же синтаксис, что и у img.
Если задача переключения изображений не стоит, то от picture будет не очень много пользы. В таких случаях лучше использовать srcset и sizes.
Что ещё почитать
HTML living standard (с примерами)
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.