На примере hero блока. Если в hero-блоке большая фоновая картинка и она загружается «полосками» или медленно, проблема почти всегда в размере файла, формате или способе подключения. Вот что стоит сделать для нормальной и быстрой загрузки:
1️⃣ Оптимизировать сам файл
✅ Формат
Используйте современные форматы:
- WEBP
- AVIF
Пример:
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Hero image">
</picture>✅ Размер
Не загружайте картинку 4000px, если на экране максимум 1920px.
Для full-width hero обычно достаточно:
- 1600–1920px по ширине
- Вес до 200–400 KB (в идеале меньше)
2️⃣ Правильная загрузка
🚀 Предзагрузка (если hero — первый экран)
<link rel="preload" as="image" href="hero.webp">Это ускорит загрузку главного изображения.
🚀 Использовать fetchpriority
<img src="hero.webp" fetchpriority="high" alt="">3️⃣ Если грузится «полосками»
Такое бывает из-за:
- прогрессивного JPEG
- медленного соединения
- слишком большого файла
Решения:
- Использовать WebP вместо JPEG
- Уменьшить вес
- Включить CDN
- Проверить, не блокируется ли загрузка тяжёлым JS
4️⃣ Если фон через CSS
.hero {
background-image: url("hero.webp");
background-size: cover;
background-position: center;
}Лучше:
- не использовать слишком тяжёлый файл
- добавить fallback цвет:
.hero {
background-color: #111;
}
5️⃣ Дополнительная оптимизация
- Включить lazy loading для остальных изображений
- Использовать CDN
- Включить кэширование
- Проверить Lighthouse
🔥 Лучший современный вариант
- AVIF/WebP
- 1600–1920px
- ~250KB
- preload + fetchpriority
- CDN
Anastasiia Berest
Senior Web UI Engineer
I'm a web development passionate about creating meaningful digital experiences.