Элемент picture в HTML

Элемент HTML <picture>

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

Элемент HTML <picture>

Элемент <picture> даёт больше гибкости в выборе отображаемого изображения. Он содержит один или несколько элементов <source>, каждый из которых указывает на разное изображение с помощью атрибута srcset, чтобы браузер мог выбрать наиболее подходящее для текущего вида или устройства. У каждого <source> есть атрибут media, который сообщает, когда он является лучшим выбором.

Примечание: Всегда размещайте элемент <img> как последний дочерний элемент <picture>. Браузер использует его, если не поддерживает <picture> или если ни один <source> не подошёл.

Пример

Разные изображения, показываемые при разных размерах экрана.

Страница, использующая элемент picture с двумя элементами source, показывающими разные изображения при разной ширине экрана (изображение с едой при min-width 650px, изображение с машиной при min-width 465px), и резервным изображением (img_girl.jpg) в качестве последнего дочернего элемента.

> Вывод: полная HTML-страница

Prompt

Страница, использующая элемент picture с двумя элементами source, показывающими разные изображения при разной ширине экрана (изображение с едой при min-width 650px, изображение с машиной при min-width 465px), и резервным изображением (img_girl.jpg) в качестве последнего дочернего элемента.

Вывод: полная HTML-страница

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Размеры экрана для picture</title>
</head>
<body>

<picture>
  <source media="(min-width: 650px)" srcset="img_food.jpg">
  <source media="(min-width: 465px)" srcset="img_car.jpg">
  <img src="img_girl.jpg">
</picture>

</body>
</html>

Когда использовать элемент Picture

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

Пример

Браузер использует первый распознанный формат изображения.

Страница, использующая элемент picture с двумя элементами source, предлагающими разные форматы изображения (сначала PNG, затем JPG), и GIF-изображением (img_beatles.gif, alt Beatles) в качестве резервного последнего дочернего элемента, чтобы браузер использовал первый распознанный формат.

> Вывод: полная HTML-страница

Prompt

Страница, использующая элемент picture с двумя элементами source, предлагающими разные форматы изображения (сначала PNG, затем JPG), и GIF-изображением (img_beatles.gif, alt Beatles) в качестве резервного последнего дочернего элемента, чтобы браузер использовал первый распознанный формат.

Вывод: полная HTML-страница

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Формат picture</title>
</head>
<body>

<picture>
  <source srcset="img_avatar.png">
  <source srcset="img_girl.jpg">
  <img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>

</body>
</html>

Теги HTML для изображений

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