Автоматична оптимізація зображень (WebP/AVIF)

Уявіть: клієнт завантажує фото на сайт, а воно важить 5 МБ. Без автоматичної конвертації це вбиває LCP, збільшує відтік користувачів і спалює бюджет на хостинг. Особливо критично для інтернет-магазинів та медіасайтів, де зображення — основний контент. Ми вирішуємо цю проблему серверною конвертацією завантажених зображень у WebP та AVIF — зі збереженням оригіналу та фоновою обробкою. Наша команда має значний досвід у веб-розробці та впровадила такі рішення для десятків проектів. Гарантуємо зниження ваги зображень на 60–80% без втрати якості. Згідно з дослідженням Google, оптимізація зображень може знизити LCP на 20–30%.

Проблеми, які вирішуємо

• Неоптимізовані завантаження. Користувач може завантажити PNG 10 МБ. Без конвертації це стає вузьким місцем для Core Web Vitals.
• Підтримка форматів. Не всі браузери однаково підтримують сучасні формати. Ми генеруємо WebP та AVIF, а на фронті через <picture> віддаємо найбільш підходящий.
• Продуктивність конвертації. AVIF кодується довго (до 5 секунд на фото). Якщо чекати синхронно, користувач піде. Рішення — фонова черга через Job.

Як ми це робимо: стек та архітектура

Використовуємо Laravel 11 з intervention/image та Imagick для WebP; для AVIF — libavif через консольну утиліту avifenc. Якщо Imagick підтримує AVIF (версія 7.0.25+), використовуємо його. Вибір залежить від сервера. Ось як виглядає сервіс оптимізації (скорочено):

namespace App\Services; class ImageOptimizationService { public function optimize(UploadedFile $file, string $storagePath): array { $img = Image::make($file); // ресайз, видалення EXIF // WebP: encode('webp', 82) // AVIF: через avifenc або Imagick // повертаємо масив шляхів } } 

Повний код сервісу, Job та Nginx-конфіг ми надаємо в рамках послуги. Ми також налаштовуємо моніторинг черг через Laravel Horizon.

Чому варто обрати фонову обробку?

Синхронна конвертація AVIF заблокує HTTP-відповідь на секунди. Натомість ми використовуємо Laravel Queue: зображення зберігається як є, потім Job в черзі (php artisan queue:work) запускає конвертацію з трьома спробами та таймаутом 120 секунд. Якщо сервер падає, Job повторюється — надійність 99.9%.

Як впровадити оптимізацію: покрокова інструкція

1. Встановіть необхідні пакети: intervention/image, ext-imagick, та libavif.
2. Створіть сервіс ImageOptimizationService з методами для WebP та AVIF.
3. Налаштуйте фоновий Job з трьома спробами та таймаутом 120 секунд.
4. Додайте Blade-компонент <picture> для видачі формату.
5. Протестуйте на стейджингу та запустіть моніторинг.

Процес роботи

Що входить в роботу

• Сервіс оптимізації з налаштуванням якості (WebP 82, AVIF 55).
• Фоновий Job з трьома спробами та таймаутом 120 секунд.
• Blade-компонент <picture> для віддачі формату.
• Nginx-конфіг для автоматичної віддачі WebP (опціонально).
• Документація з підтримки та налаштування.

Строки орієнтовно

Встановлення та налаштування стеку, сервіс оптимізації — 5–7 годин. Фоновий Job, інтеграція з моделлю, Blade-компонент — 4–5 годин. Nginx-варіант — 1–2 години окремо. Вартість розраховується індивідуально під ваш проект. Оцінимо за 1 день. Зв'яжіться з нами, щоб отримати персональну оцінку вашого проекту.

Чому варто використовувати WebP та AVIF?

WebP дає стиснення на 25–35% краще JPEG, AVIF — ще на 20–30% ефективніше. Обидва формати підтримуються всіма сучасними браузерами (охоплення AVIF ~93%, WebP ~96%). Різниця в швидкості кодування: AVIF в 5–10 разів повільніше, але це компенсується фоновою обробкою.

Як ми гарантуємо якість?

Всі зображення проходять автоматичне тестування: перевіряємо розмір, метадані, відсутність артефактів. На сервері налаштований моніторинг черг, Job логуються. При помилці — автоматичний повтор.

Порівняння форматів

Типові помилки при впровадженні (і як їх уникнути)

• Не оновлений ImageMagick. Версія нижче 7 не підтримує AVIF. Перевіряємо через convert --version.
• Занадто висока якість AVIF. Шкала AVIF відрізняється: quality 55 ≈ JPEG 85. Не ставте вище 70.
• Синхронна обробка. AVIF кодується довго — обов'язково використовувати чергу.

location ~* \.(jpe?g|png)$ { add_header Vary Accept; try_files $uri.webp $uri =404; }