⚡ Веб-оптимизация

Ленивая загрузка изображений: полное руководство 2026

⏱ 5 мин чтения 📅 Обновлено март 2026

Ленивая загрузка. одна из простейших и наиболее эффективных оптимизаций производительности, которые можно применить к сайту. Откладывая загрузку изображений, которые не видны в области просмотра, вы снижаете начальный вес страницы, ускоряете первый рендеринг и экономите трафик для пользователей, которые никогда не прокручивают страницу до конца.

Нативная ленивая загрузка: один атрибут

С 2019 года все основные браузеры поддерживают атрибут loading для элементов <img> и <iframe>. Никакая библиотека JavaScript не нужна:

<img src="photo.jpg" alt="Описание" loading="lazy">

Браузер загружает изображение только тогда, когда пользователь прокручивает страницу на определённое расстояние от него. Порог варьируется в зависимости от браузера и скорости соединения. обычно от 1250 до 2500 пикселей от области просмотра.

Три значения атрибута loading=

Значение	Поведение	Когда использовать
`lazy`	Откладывается до приближения к области просмотра	Все изображения ниже линии видимости
`eager`	Загружается немедленно (поведение по умолчанию)	Изображения выше линии видимости, особенно LCP-изображение
`auto`	Браузер решает (в основном то же, что eager)	Не рекомендуется. предпочтительны явные значения

Критическое правило: никогда не применяйте ленивую загрузку к изображениям выше линии видимости

Наиболее распространённая ошибка ленивой загрузки. применение её ко всем изображениям на странице, включая главное изображение. Это задерживает Largest Contentful Paint (LCP). метрику Google, измеряющую момент, когда основное содержимое становится видимым. Ленивая загрузка LCP-изображения может резко снизить ваш LCP-показатель.

Важно: Первое изображение, видимое при загрузке страницы. обычно главный баннер или рекомендуемое изображение. НЕ должно иметь атрибута loading="lazy". Используйте loading="eager" или просто опустите атрибут. В идеале предзагрузите его тегом <link rel="preload">.

Всегда добавляйте width и height

Ленивая загрузка работает лучше, когда браузер знает размеры изображений до их загрузки. Без width и height браузер не может зарезервировать пространство, вызывая сдвиги макета (CLS) при загрузке изображений:

<!-- Правильно: размеры указаны -->
<img src="photo.jpg" alt="..." width="800" height="600" loading="lazy">

<!-- Неправильно: нет размеров, вызовет сдвиг макета -->
<img src="photo.jpg" alt="..." loading="lazy">

Ленивая загрузка с srcset

Ленивая загрузка полностью совместима с адаптивными изображениями:

<img
  srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  src="photo-800.webp"
  alt="Описание"
  width="800" height="600"
  loading="lazy"
>

Ленивая загрузка с элементом <picture>

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Описание" width="800" height="600" loading="lazy">
</picture>

Атрибут loading ставится на элемент <img>, а не на <picture> или <source>.

Поддержка браузерами

Нативная ленивая загрузка поддерживается всеми современными браузерами по состоянию на 2026 год: Chrome 76+, Firefox 75+, Safari 15.4+, Edge 79+. Для старых браузеров опускание атрибута просто загружает все изображения немедленно. безопасная плавная деградация. Полифил не нужен.

Когда использовать загрузчик на JavaScript

Нативный атрибут покрывает подавляющее большинство сценариев использования. JavaScript-библиотека (например, lazysizes) может всё же быть полезна, если:

Вам нужна поддержка очень старых браузеров (Safari 14 и ниже)
Вы выполняете ленивую загрузку фоновых изображений CSS
Вам нужны пользовательские пороги загрузки или коллбэки

Главный вывод: Добавляйте loading="lazy" к каждому изображению ниже линии видимости. Никогда не применяйте его к LCP-изображению. Всегда указывайте width и height для предотвращения сдвигов макета. Это однострочное изменение обычно снижает начальный вес загрузки страницы на 30–50% на страницах с большим количеством изображений.

Попробуйте инструменты imgpact

Бесплатные инструменты в браузере. без загрузки, без регистрации.

Оптимизировать изображения Изменить размер изображений