<picture>

Адаптирует картинки под разные устройства и поддерживаемые форматы.

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

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

Пример

Секция статьи "Пример"
        
          
          <picture>  <source srcset="320.jpg" media="(max-width: 800px)">  <img src="640.jpg" alt="Абстрактное изображение"></picture>
          <picture>
  <source srcset="320.jpg" media="(max-width: 800px)">
  <img src="640.jpg" alt="Абстрактное изображение">
</picture>

        
        
          
        
      

Как это понять

Секция статьи "Как это понять"

Одна и та же страница может быть открыта на разных устройствах и в браузерных окнах разной ширины. У телефона небольшой экран, и было бы круто не загружать полноразмерные картинки с большим разрешением. В CSS мы можем изменять фон элемента (background-image) в зависимости от ширины экрана, используя медиавыражения. Но если изображение контентное, вставлено в HTML при помощи тега <img>, то CSS нам уже не поможет. Мы должны использовать теги <picture> и <source>.

Как пишется

Секция статьи "Как пишется"

Внутри тега <picture> обязательно должен находиться тег <img>, и опционально — теги <source>.

        
          
          <picture>  <source srcset="750x400.png" media="(min-width: 1000px)">  <img src="650x300.png" alt="Картинка с размерами"></picture>
          <picture>
  <source srcset="750x400.png" media="(min-width: 1000px)">
  <img src="650x300.png" alt="Картинка с размерами">
</picture>

        
        
          
        
      

Браузер анализирует каждый тег <source> по порядку, останавливается на первом подходящем под текущие условия и отображает картинку из атрибута srcset. Другие теги <source> не анализируются. Если тег <picture> не поддерживается браузером или ни один из тегов <source> не подходит под условия, то отображается картинка из тега <img>.

Открыть демо в новой вкладке

В этом примере при помощи атрибута media в теге <source> мы задаём условие по аналогии с медиавыражением @media в CSS. Если условие определяется как ложное, то элемент <source> пропускается. Разница становится видна, если менять размер окна браузера.

Подсказки

Секция статьи "Подсказки"

💡 Если медиавыражение не сработало, то браузер не загружает для него изображение. Так что можно не экономить и писать столько условий, сколько нужно.

💡 Тег <picture> не является полноценным блочным контейнером, как <div>, поэтому стили необходимо применять к тегу <img> внутри.

💡 Старайтесь при вёрстке всегда готовить несколько версий одной и той же картинки для отображения на разных устройствах. Пользователи мобильных телефонов будут вам очень благодарны, если для них вы будете готовить картинки с меньшим разрешением. В то же время пользователям десктопов с экранами высокой чёткости можно показывать картинки с увеличенным разрешением:

Открыть демо в новой вкладке

В этом примере пользователи с обычными экранами увидят картинку с надписью 750x300. Пользователи, у которых ретиновые дисплеи, увидят картинку с надписью 1500x600.

На практике

Секция статьи "На практике"

Денис Ежков советует

Секция статьи "Денис Ежков советует"

🛠 Одна из частых ошибок при работе с тегом <picture> — забытый тег <img>. Помните, что браузер показывает изображение исключительно при помощи тега <img>, а теги <source> только помогают выбрать нужный URL картинки для текущих условий. Поэтому если внутри <picture> не будет тега <img>, то и показывать браузеру будет нечего.

Егор Левченко советует

Секция статьи "Егор Левченко советует"

🛠 Используйте все доступные вам медиавыражения по полной.

Не обязательно останавливаться только на размерах картинок для мобильных и ПК. Можно использовать медиавыражения для определения тёмной темы на устройстве пользователя и подменять картинку, делая интерфейс более приятным для глаз.

        
          
          <picture>  <!-- Картинка для тёмной темы -->  <source srcset="image-dark.png" media="(prefers-color-scheme: dark)">  <!-- Картинка по умолчанию для светлой темы -->  <img src="image-light.png" alt=""></picture>
          <picture>
  <!-- Картинка для тёмной темы -->
  <source srcset="image-dark.png" media="(prefers-color-scheme: dark)">
  <!-- Картинка по умолчанию для светлой темы -->
  <img src="image-light.png" alt="">
</picture>