Атрибут loading тега <img>
Описание
Атрибут loading определяет стратегию загрузки изображения, позволяя отложить загрузку изображений, находящихся за пределами видимой области (lazy loading). Это улучшает производительность страницы.
<img
src="image.jpg"
alt="Описание изображения"
loading="lazy"
width="800"
height="600">
Доступные значения:
| Значение | Описание | Когда использовать |
|---|---|---|
eager |
Загрузить изображение сразу (по умолчанию) | Для изображений в видимой области (выше сгиба) |
lazy |
Отложить загрузку до приближения к области просмотра | Для изображений ниже сгиба или галерей |
Рекомендации по использованию:
<!-- Главное изображение (загружать сразу) -->
<img src="hero.jpg" loading="eager" alt="Главный баннер">
<!-- Изображения в галерее (ленивая загрузка) -->
<img src="photo1.jpg" loading="lazy" alt="Фото 1">
<img src="photo2.jpg" loading="lazy" alt="Фото 2">
<!-- Изображение без явного указания (по умолчанию eager) -->
<img src="content-image.jpg" alt="Контентное изображение">
Оптимизация производительности:
- Используйте
loading="lazy"для изображений ниже сгиба - Сочетайте с атрибутами
widthиheightдля предотвращения скачков макета - Для LCP-изображений (Largest Contentful Paint) используйте
eager - Тестируйте влияние на метрики Core Web Vitals
Пример с адаптивными изображениями:
<img
srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w"
sizes="(max-width: 600px) 480px, (max-width: 1000px) 768px, 1200px"
src="large.jpg"
alt="Адаптивное изображение"
loading="lazy">
Ограничения и совместимость:
- Поддерживается Chrome, Firefox, Edge и Safari (с версии 15.4+)
- Не поддерживается в Internet Explorer
- Порог срабатывания lazy loading зависит от браузера
- Не заменяет оптимизацию изображений (сжатие, современные форматы)
Примечание: Атрибут loading="lazy" может значительно улучшить производительность страницы, особенно для контента с большим количеством изображений. Для максимального эффекта сочетайте его с адаптивными изображениями и современными форматами (WebP, AVIF).