picture — адаптивное изображение

  • 25 января 2023

Справочник

Лена Цимбалист

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Тег <picture> позволяет разработчикам указать несколько источников изображения для различных устройств и разрешений экрана, чтобы браузер мог выбрать подходящее изображение в зависимости от возможностей устройства пользователя.

<picture>
  <source srcset="image-small.jpg" media="(max-width: 768px)">
  <source srcset="image-medium.jpg" media="(max-width: 1024px)">
  <source srcset="image-large.jpg">
  <img src="image-default.jpg" alt="Image description">
</picture>

☝ Для каждого изображения должен быть указан альтернативный текст через атрибут alt.

Внутри тега <picture> находятся один или несколько элементов <source> и один <img>. Каждый <source> содержит атрибуты, указывающие различные источники изображения с разными параметрами, такими как размеры, разрешение или тип файла. Браузер использует эти источники для выбора наиболее подходящего изображения, которое соответствует текущим характеристикам устройства, и отображает его. Если ни один из элементов <source> не удовлетворяет условиям, используется тег <img> с его исходным изображением.

Полезные статьи — по почте

Подпишитесь на редакторскую рассылку о фронтенде, новых CSS-штучках и всём, что пригодится разработчику.

Присылаем одно письмо в неделю. Без спама и нейросетей.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники