Исправьте: адаптивное изображение с picture

Добавьте альтернативный source и резервный img внутри picture.

ШАГ 1 · ИЗУЧИТЕ

Как это работает

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

Правильный пример

<picture><source media="(min-width: 800px)" srcset="landscape-wide.webp"><img src="landscape.jpg" alt="Пейзаж на закате"></picture>

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

Частая ошибка

<picture><source srcset="landscape-wide.webp"></picture>

Отсутствует резервный img. Если source нельзя выбрать или загрузить, picture не предоставляет изображение и alt.

ШАГ 2 · ПРИМЕНИТЕ

Исправьте пример, не меняя его цель. Добавьте альтернативный source и резервный img внутри picture.

index.htmlHTML

Безопасный результатизолировано

Черновик хранится только в этом браузере.HTML и CSS разрешены · скрипты и сеть заблокированы

ШАГ 4 · ПРОВЕРЬТЕ

0%не проверено

Объясните логику решения

Поместите source перед изображением и добавьте в конце полноценный img с src и alt.