Изображения составляют 50–70% веса средней страницы — об этом говорят данные HTTP Archive. Неоптимизированные картинки — главная причина медленной загрузки и плохих Core Web Vitals. Мы ежегодно прорабатываем десятки проектов с этой проблемой, и каждый раз видим прирост LCP на 30–50% после внедрения сжатия и lazy loading.
Типичный кейс: интернет-магазин с 10 000 товаров. До оптимизации средний вес страницы — 3,5 МБ, LCP — 4,2 с. После конвертации в WebP, настройки srcset и отложенной загрузки вне экрана вес упал до 1,2 МБ, LCP — 1,6 с. Конверсия выросла на 12%. Как этого добились — разберём ниже.
Почему стоит оптимизировать изображения?
Google учитывает LCP и CLS в ранжировании. Каждый лишний мегабайт снижает конверсию на 2–3%. Хорошая оптимизация — самый быстрый способ повысить скорость и пройти Core Web Vitals. Многолетний опыт показывает: грамотная настройка изображений окупается за неделю-две. Мы гарантируем улучшение показателей LCP и CLS после наших работ.
Что дают форматы WebP и AVIF?
WebP сжимает JPEG без потерь на 20–30%, с потерями — на 25–35%. AVIF сжимает ещё эффективнее: до 40–60% по сравнению с JPEG. При этом AVIF поддерживает HDR и 10-битную глубину цвета. Если у вас много фотографий товаров — AVIF даст ощутимую экономию. Для иллюстраций с резкими переходами цветов лучше подходит WebP (AVIF может давать артефакты на контрастных границах).
| Формат | Поддержка браузеров | Экономия vs JPEG | Потери качества при визуально одинаковом результате |
|---|---|---|---|
| JPEG | 100% | — | — |
| WebP lossy | 96% | 25–35% | 15–20% (quality 85–90) |
| WebP lossless | 96% | 20–30% vs PNG | без потерь |
| AVIF | 88% | 40–60% | 35–40% (quality 65–70) |
Для совместимости используем элемент <picture> с fallback:
<picture> <source type="image/avif" srcset="/images/product-400.avif 400w, /images/product-800.avif 800w, /images/product-1200.avif 1200w" sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 400px"> <source type="image/webp" srcset="/images/product-400.webp 400w, /images/product-800.webp 800w, /images/product-1200.webp 1200w" sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 400px"> <img src="/images/product-800.jpg" width="800" height="800" alt="Название продукта" loading="lazy" decoding="async"> </picture> Как правильно настроить lazy loading?
Нативный loading="lazy" поддерживается во всех современных браузерах. Подробнее об атрибуте loading читайте на MDN. Для изображений вне первого экрана он подходит идеально. Для LCP-элемента (обычно hero) обязательно ставим loading="eager" и fetchpriority="high".
<img src="photo.webp" loading="lazy" alt="Описание изображения"> <!-- LCP-изображение — НИКОГДА не lazy --> <img src="hero.webp" loading="eager" fetchpriority="high" alt="..."> Для фоновых изображений используем Intersection Observer с предзагрузкой. Важно: не вешать lazy loading на изображения, которые видны при загрузке — это ухудшит LCP. Также избегайте loading="lazy" для изображений с атрибутом fetchpriority="high" (они конфликтуют).
Как мы настраиваем конвертацию?
В типовом проекте на Laravel используем пакет spatie/laravel-medialibrary. Он генерирует конверсии автоматически при загрузке изображения. Мы задаём форматы, размеры и качество.
class Product extends Model { use InteractsWithMedia; public function registerMediaConversions(?Media $media = null): void { $this->addMediaConversion('thumb') ->width(400)->height(400) ->format('webp') ->quality(80) ->performOnCollections('images'); $this->addMediaConversion('medium') ->width(800)->height(800) ->format('webp') ->quality(82) ->performOnCollections('images'); $this->addMediaConversion('avif-medium') ->width(800)->height(800) ->format('avif') ->quality(65) ->performOnCollections('images'); } } Если не используете Laravel — конвертируем заранее через CLI или на сервере. Nginx можно настроить на автоматическую отдачу WebP по заголовку Accept:
map $http_accept $webp_suffix { default ""; "~*webp" ".webp"; } location ~* \.(jpg|jpeg|png)$ { add_header Vary Accept; try_files $uri$webp_suffix $uri =404; expires 30d; } Почему AVIF лучше WebP для некоторых задач?
AVIF обеспечивает на 15–25% лучшее сжатие при том же визуальном качестве. Он поддерживает HDR и 10-битную глубину цвета, что критично для фототоваров. Однако WebP имеет более широкую поддержку (96% против 88%), поэтому используем оба с fallback. Для контрастных иллюстраций WebP предпочтительнее из-за меньших артефактов.
Типичные ошибки при оптимизации изображений
- Использование только одного формата (например, только WebP) — старые браузеры не отобразят картинку.
- Отсутствие атрибутов width/height — вызывает CLS.
- Lazy loading на LCP-изображение — ухудшает LCP.
- Сжатие с качеством ниже 60 для WebP и ниже 50 для AVIF — видимые артефакты.
- Неправильные размеры srcset (например, слишком большие изображения для мобильных).
Что входит в работу?
Мы предлагаем комплексную оптимизацию изображений под ключ:
- Аудит: замеряем вес, размеры, форматы всех изображений.
- Настройка конвертации: WebP/AVIF с заданным качеством.
- Responsive images: генерация srcset под разные разрешения.
- Lazy loading и LQIP (blur placeholder).
- Деплой и интеграция с CDN.
- Документация и обучение вашей команды.
Сроки: от 2 до 5 дней в зависимости от объёма каталога. Стоимость рассчитывается индивидуально. Закажите консультацию — мы пришлём план работ и точную оценку.
Какой результат вы получите?
- Снижение веса страниц на 50–70%.
- Улучшение LCP на 30–50%.
- Прохождение Core Web Vitals.
- Рост конверсии за счёт скорости.
Мы гарантируем улучшение показателей. Многолетний опыт — более 200 реализованных проектов. Свяжитесь с нами для аудита вашего сайта и получите первые рекомендации уже сегодня.