Создайте: эффективно загружаемое изображение

Настройте второстепенное изображение с размерами, loading lazy и decoding async.

Официальный источникWHATWG HTML — image loadingПроверено: 2026-08-26

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

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

Настройте второстепенное изображение с размерами, loading lazy и decoding async. Семантическая структура должна описывать смысл, а не внешний вид.

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

<img src="project-gallery.jpg" alt="Интерфейс проекта на экране телефона" width="960" height="640" loading="lazy" decoding="async">

src указывает ресурс, alt передаёт информацию изображения, а width и height задают пропорции до загрузки. Для второстепенного изображения loading="lazy" может отложить загрузку, а decoding="async" позволяет декодировать его без лишней блокировки отображения.

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

<img src="gallery.jpg" alt="Галерея проекта" width="0" height="abc" loading="eager">

Width не может быть нулём, height не является числом, loading использует eager вместо lazy, а decoding="async" отсутствует.

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

Ваше задание

Дополните пример. Настройте второстепенное изображение с размерами, loading lazy и decoding async.

index.htmlHTML

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

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

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

Что должно пройти

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

У изображения есть непустой src.
У информативного изображения есть alt.
Width — положительное число.
Height — положительное число.
Изображение использует loading lazy и decoding async.

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

Сначала добавьте src и alt. Затем задайте width и height числами больше нуля и добавьте loading="lazy" и decoding="async".

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

Ваше задание

Напишите и посмотрите результат

Что должно пройти