Элемент picture в HTML

Одного img часто достаточно для многих страниц. Когда нужны разные файлы для разных экранов или форматов — широкий кроп на десктопе, более плотный на телефонах или современный формат с запасным JPEG — элемент picture предлагает кандидатов. Браузер выбирает подходящий; запасной img закрывает старые клиенты и доступность.

Что добавляет picture

picture — контейнер. Внутри него размещают ноль или больше элементов source и ровно один запасной img. Каждый source может объявить, когда он применим (media) или какой у него формат (type), и где лежит файл (srcset). img — не необязательное украшение: это обязательный запасной вариант и место для alt.

Прямой ответ

Оберните один или несколько элементов <source> и запасной <img> в <picture>. Используйте media для условий viewport и type для форматов вроде WebP. У img по-прежнему нужны src и alt. Новички могут начать с двух ширин одного фото, прежде чем собирать все современные форматы.

Арт-дирекшн с media

Арт-дирекшн означает разные кропы или раскладки для разных viewport — не только «то же фото поменьше». media на source позволяет направить широкую и узкую раскладки на разные файлы.

Как читать пример с media

• Источники часто перечисляют от более конкретных условий к более общим в учебных схемах; браузер всё равно оценивает и выбирает совпадение
• srcset на source указывает на URL файла-кандидата
• Финальный img даёт src и alt, когда ни один source не подошёл или поддержка picture неполная
• В практике меняйте размер окна, чтобы увидеть, какой файл уместен — при желании подтвердите запрос во вкладке Network в DevTools

Выбор формата с type

Иногда одна и та же композиция отдаётся как WebP для поддерживающих браузеров и JPEG для остальных. type сообщает MIME-тип, чтобы браузер мог пропустить неподдерживаемые форматы, не скачивая их сначала.

Держите первый день простым

Не нужно сразу все форматы и все брейкпоинты. Сделайте один picture с двумя разумными кандидатами, держите честный alt на img, затем расширяйте. Дескрипторы плотности в адаптивном srcset и продвинутые атрибуты sizes придут позже по мере роста.

alt остаётся на img

Не кладите текст доступности только на source. Программы чтения с экрана и запасной рендеринг опираются на img. Правила декора из сессии про изображения всё ещё действуют: информативные изображения нуждаются в настоящем alt; чистый декор может использовать alt="".

picture против одного img

Используйте простой img, когда одного файла достаточно. Беритесь за picture, когда действительно нужны разные файлы под условия — арт-дирекшн по viewport или смена формата. Лишняя разметка без реальной нужды только усложняет сопровождение.

Порядок и привычки запасного варианта

Перечисляйте элементы source перед img. Всегда включайте img. Если забыть запасной вариант, некоторые браузеры и многие учебные валидаторы сочтут схему неполной. Проверяйте с узким и широким окном и с браузером, который может не предпочесть ваш «модный» формат.

Практика в редакторе

1. Подготовьте две ширины одного фото (или два понятных файла для практики).
2. Соберите picture с двумя media-запросами в source и одним запасным img.
3. Меняйте размер окна браузера и наблюдайте, какой файл уместен.
4. Убедитесь, что alt остаётся на img, а не только в комментарии.
5. По желанию добавьте WebP-source с type="image/webp" над JPEG-img и убедитесь, что картинка показывается везде.

Типичные ошибки

• Забыть запасной img
• Поставить alt только на source вместо img
• Усложнять множеством форматов, пока не работает базовая схема с media
• Использовать picture, когда хватило бы одного оптимизированного img
• Несовпадающие кропы, которые удивляют пользователей при пересечении брейкпоинта
• Путать srcset на source с href ссылки

Итог

• picture предлагает несколько кандидатов изображения; браузер выбирает один
• Используйте source плюс обязательный запасной img
• media направляет выбор по viewport; type — по формату
• alt остаётся на img
• Начинайте просто: две ширины или один современный формат плюс запасной JPEG