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

HTML Учебник

HTML ГЛАВНАЯ HTML Введение HTML Редактор HTML Основные HTML Элементы HTML Атрибуты HTML Заголовки HTML Параграфы HTML Стили HTML Форматирование HTML Цитирование HTML Комментарии HTML Цвет HTML CSS HTML Ссылки HTML Изображения HTML Таблицы HTML Списки HTML Блоки HTML Классы HTML Идентификаторы HTML Фреймы HTML JavaScript HTML Путь к Файлу HTML Голова HTML Макет HTML Адаптивный HTML Компьютерный код HTML Симантика HTML Руководство по стилю HTML Сущности HTML Символы HTML Смайлики HTML Кодировка HTML URL Кодировка HTML vs. XHTML

HTML Формы

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

HTML Графика

HTML Canvas HTML SVG

HTML Медиа

HTML Media HTML Video HTML Audio HTML Plug-ins HTML YouTube

HTML APIs

HTML Геолакация HTML Drag/Drop HTML Веб Место хранения HTML Веб Работник HTML SSE

HTML Примеры

HTML Примеры HTML Викторина HTML Упражнения HTML Сертификат HTML Резюме HTML Доступность

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

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

HTML Элемент картина



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


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

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

Тег Описание
<img> Определяет изображение
<map> Определяет изображение-карта
<area> Определяет активную область внутри изображении-карты
<picture> Определяет контейнер для нескольких ресурсов изображений

Для получения полного списка всех доступных HTML тегов посетите HTML Справочник тегов.