Как работает lazy loading картинок?

Junior
268 просмотров
AFK Offer AI

loading="lazy" на img — нативная ленивая загрузка, браузер загружает картинку когда она приближается к viewport. Поддержка 95%+. Intersection Observer — кастомная реализация с контролем threshold и rootMargin. Не ставь lazy loading на LCP-картинку! Next.js Image — lazy по умолчанию, priority для LCP. Для фоновых картинок — Intersection Observer + добавление класса с background-image. Placeholder: blur preview (LQIP) или цветной placeholder пока грузится полная картинка. Улучшает initial load time.

Следующий вопрос

Что такое responsive design?