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

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

Представьте: клиент загружает фото на сайт, а оно весит 5 МБ. Без автоматической конвертации это убивает LCP, увеличивает отток пользователей и сжигает бюджет на хостинг. Особенно критично для интернет-магазинов и медиасайтов, где изображения — основной контент. Мы решаем эту проблему серверной конвертацией загруженных изображений в WebP и AVIF — с сохранением оригинала и фоновой обработкой. Наша команда имеет более 5 лет опыта в веб-разработке и реализовала такие решения для 50+ проектов. Гарантируем снижение веса изображений на 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; }