САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ
×

HTML5 Учебник

HTML ГлавнаяHTML ВведениеHTML РедакторыHTML ОсновныеHTML ЭлементыHTML АтрибутыHTML ЗаголовкиHTML ПараграфыHTML СтилиHTML ФорматированиеHTML ЦитированиеHTML КомментарииHTML ЦветаHTML c CSSHTML СсылкиHTML ИзображенияHTML ТаблицыHTML СпискиHTML БлокиHTML КлассыHTML ИдентификаторыHTML ФреймыHTML JavaScriptHTML Путь к ФайлуHTML ГлаваHTML МакетHTML АдаптивныйHTML Компьютерный кодHTML ОбъектыHTML СимволыHTML КодировкаHTML URL КодированиеHTML XHTML

HTML Формы

HTML ФормыHTML Элементы формыHTML Тип вводаHTML Атрибуты ввода

HTML5

HTML5 ВведениеHTML5 ПоддержкаHTML5 Новые ЭлементыHTML5 СемантикаHTML5 МиграцияHTML5 Синтасис

HTML Графика

HTML CanvasHTML SVGHTML Google Карта

HTML Медиа

HTML МедиаHTML ВидеоHTML АудиоHTML ОбъектыHTML YouTube

HTML API

HTML ГеолокацияHTML ПеретаскиваниеHTML Веб ХранилищеHTML Веб РаботникHTML СОС

HTML Примеры

HTML ПримерыHTML ВикторинаHTML УпражненияHTML СертификатHTML ЗаключениеHTML Возможности

HTML Справочники

HTML Список ТеговHTML АтрибутыHTML ГлобальныеHTML СобытияHTML ЦветаHTML ХолстHTML Аудио/ВидеоHTML ДекларацииHTML Набор КодировокHTML URL КодHTML Коды языкаHTML Коды странHTTP СообщенияHTTP МетодыКовертер PX в EMКлавишные комбинации

HTML Изображения картина



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



HTML элемент <picture>

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

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

Каждые элементы <source> имеют атрибуты, описывающие, когда их изображение является наиболее подходящим.

Пример

Показывать разные изображения на разных размерах экрана:

<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>
Редактор кода »

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


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

Существует две основные цели для элемента <picture>:

1. Пропускная способность

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

2. Поддержка форматов

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

Пример

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

<picture>
  <source srcset="img_avatar.png">
  <source srcset="img_girl.jpg">
  <img src="img_beatles.gif" alt="Битлз" style="width:auto;">
</picture>
Редактор кода »

Примечание: Браузер будет использовать первый элемент <source> с соответствующими значениями атрибутов, и игнорировать любые следующие элементы <source>.