Зображення становлять 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 реалізованих проєктів. Зв'яжіться з нами для аудиту вашого сайту та отримайте перші рекомендації вже сьогодні.