Тег picture помогает подобрать изображение под устройство и возможности браузера. Внутри него находятся варианты source и обязательный запасной img.
Пример с форматом и экраном
<picture>
<source media="(max-width: 767px)" srcset="team-mobile.webp" type="image/webp">
<source srcset="team.webp" type="image/webp">
<img src="team.jpg" alt="Команда студии за рабочим столом" width="1200" height="800">
</picture>Браузер проверяет source сверху вниз и берёт первый подходящий вариант. Если WebP не поддерживается или ни один вариант не подходит, отображается img.
Что важно не забыть
Описание alt, размеры и поведение загрузки задаются у img, а не у source. Не создавайте разные изображения ради декоративной разницы: picture оправдан, когда меняется кадрирование, размер или формат файла.
Читайте также: тег img, формат WebP, показатели скорости сайта.