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.

Схожі інструменти

Тег <img>

Атрибути src, alt, loading та srcset тегу <img> з прикладами.

Responsive image

Як віддати браузеру кілька варіантів зображення для різних розмірів екрана.