• Категории: Потоковое содержимое, Фразовое содержимое, Встроенное содержимое
• Контекст:

  Встраиваемый контент

• Модель:

  Ноль или более элементов <source>, за которыми следует один элемент <img>

Тег <picture> позволяет задать несколько альтернативных источников для текущего изображения <img>, которые будут выбираться в зависимости от различных условий:

• плотности пикселей
• размеров окна просмотра
• формата изображений
• и т.д.

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

Идея создания элемента <picture> была взята из элементов <audio> и <video>, которые также могут содержать альтернативные источники в виде вложенных элементов <source>. Однако, несмотря на схожую структуру, алгоритм их работы несколько отличается. Сам по себе элемент <picture> ничего не значит и никак не отображается. Он является лишь оберткой для изначального <img>, который будет использован, если элемент <picture> не поддерживается в браузере, или не было выполнено ни одного условия.

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

Атрибуты

• Глобальные атрибуты

• Кадрирование

  Кадрирование предполагает использование разных источников фотографии в зависимости от различных медиа-выражений. Например, на десктопе мы можем показать фотографию с общим планом, а для мобильного телефона сфокусировать внимание на крупном плане какого-то важного фрагмента, который сложно было бы разглядеть на общем плане. Либо, обрезать изображение еще каким-то образом: изменить пропорции, сделать горизонтальную фотографию вертикальной и т.д.

• Поддерживаемый формат

  Еще одна область применения элемента <picture> - указание изображение в разных форматов, чтобы браузер мог выбрать наиболее подходящее из поддерживаемых. На сегодняшний день существует немало новых форматов, которые имеют низкий размер при высоком качестве: WebP, JPEG-2000 и т.д. Однако, все они пока имеет довольно низкую поддержку в браузерах. Элемент <picture> позволяет использовать данные форматы безопасно. Порядок при этом очень важен, ведь будет использовано первое изображение, формат которого поддерживается браузером.