<picture>

Тег <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="750x100.png" media="(min-width: 1000px)">  <img src="650x100.png" alt="Картинка с размерами"></picture>
          <picture>
  <source srcset="750x100.png" media="(min-width: 1000px)">
  <img src="650x100.png" alt="Картинка с размерами">
</picture>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

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

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

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

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

        
          
          <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>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать