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

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

Элемент 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

Пример 1
С помощью 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>
Пример 2
На ширине экрана более 800 пикселей изображение выберется автоматически в зависимости от экрана пользователя — на ретине выберется изображение размером 2000×1000, на экране с единичной плотностью точек — 1000×500 пикселей

В элементе source, вложенном в picture работает тот же синтаксис, что и у img.

Если задача переключения изображений не стоит, то от picture будет не очень много пользы. В таких случаях лучше использовать srcset и sizes.

Что ещё почитать

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы