/ ↲
    Расширенный поиск
    Планшет, телефон, монитор, кружка, на которых изображены матрёшки
    Иллюстрация: Кира Кустова

    HTML

    <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="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> — забытый тег <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>

    Читайте также