Lazy-loaded image

Нативный атрибут loading="lazy" откладывает загрузку изображения, пока оно не приблизится к видимой области экрана — без единого JavaScript.

Код

<img src="photo.jpg" alt="Описание изображения" loading="lazy" width="800" height="450">

Пояснение

Браузер сам решает, когда начать загрузку, ориентируясь на позицию скролла. Это уменьшает начальную нагрузку на страницу, особенно при большом количестве изображений.

Для изображений в первом экране (above the fold) loading="lazy" НЕ рекомендуется — лучше loading="eager" (значение по умолчанию), чтобы не задерживать LCP.

Lazy-loaded image

Код

Пояснение

Похожие инструменты

Тег <img>

Responsive image