За замовчуванням браузер завантажує всі зображення на сторінці, незалежно від їх розташування. Щоб покращити досвід користувачів, часто використовується API Intersection Observer або зовнішні бібліотеки для лінивого завантаження зображень.
Ліниве завантаження означає, що зображення завантажується на клієнт лише тоді, коли воно доступне у видимій області браузера.
У новітніх версіях браузерів на основі Chromium (включаючи Chrome, Edge і Opera), а також у Firefox, це підтримується нативно за допомогою атрибута loading="lazy":
<img src="..." alt="..." loading="lazy" />
Тепер браузер відкладає завантаження зображень до моменту, коли вони стануть видимими у вікні перегляду.
Часто можна помітити, як зміщується макет, коли зображення завантажується повністю. Щоб уникнути цієї проблеми, рекомендовано вказувати розміри зображень за допомогою інлайн-стилів або атрибутів:
<img loading="lazy" style="height: 200px; width: 300px;" />
<!-- Або -->
<img loading="lazy" height="200" width="300" />