Как оптимизировать изображения на сервере. WebP, AVIF, компрессия и автоматизация

Изображения — один из самых «тяжёлых» ресурсов на любом сайте. Даже хорошо оптимизированный backend и CDN не спасут, если на страницах используются JPEG и PNG по несколько мегабайт. Оптимизация изображений на сервере позволяет снизить нагрузку на сеть, ускорить загрузку страниц и улучшить Core Web Vitals.

В этой статье разберём, какие форматы использовать, как правильно сжимать изображения и как автоматизировать этот процесс на сервере.

Почему оптимизация изображений важна

Неоптимизированные изображения приводят к:

• увеличению времени загрузки страниц;
• росту трафика и затрат на CDN;
• ухудшению показателей LCP и CLS;
• снижению конверсии и SEO-позиций.

По статистике, изображения часто занимают 60–80% веса страницы, поэтому их оптимизация даёт наибольший эффект.

Современные форматы изображений

WebP

WebP — формат от Google, поддерживающий lossy и lossless-сжатие, а также прозрачность.

Плюсы:

• размер на 25–35% меньше JPEG;
• хорошая поддержка браузерами;
• подходит для большинства сайтов.

Минусы:

• сложнее отлаживать визуально;
• старые браузеры не поддерживаются.

AVIF

AVIF — более современный формат на базе кодека AV1.

Плюсы:

• сжатие на 40–50% лучше JPEG;
• отличное качество при низком размере;
• поддержка HDR и широкого цветового охвата.

Минусы:

• более медленное кодирование;
• поддержка есть не во всех браузерах (но быстро растёт).

Когда использовать JPEG и PNG

Классические форматы всё ещё актуальны:

• PNG — для иконок и изображений с прозрачностью (если нет WebP/AVIF);
• JPEG — как fallback для старых браузеров.

Серверная компрессия изображений

Оптимизация должна происходить до попадания изображения к пользователю. Для этого используются серверные утилиты.

ImageMagick

Поддерживает большинство форматов:

convert input.jpg -quality 80 output.jpg

Подходит для базовой компрессии, но не всегда даёт лучший результат.

jpegoptim и optipng

Специализированные утилиты:

jpegoptim --max=80 image.jpg
optipng -o7 image.png

Работают быстрее и аккуратнее, чем универсальные инструменты.

cwebp и avifenc

Для современных форматов:

cwebp image.jpg -q 80 -o image.webp
avifenc image.jpg image.avif

Именно они чаще всего используются в production.

Отдача разных форматов через сервер

Оптимальный вариант — отдавать формат в зависимости от браузера.

HTML-подход

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="">
</picture>

Через Nginx

Можно использовать Accept-заголовок браузера:

map $http_accept $img_ext {
  default jpg;
  ~image/avif avif;
  ~image/webp webp;
}

Это позволяет прозрачно отдавать оптимальный формат.

Автоматизация оптимизации

Ручная обработка изображений не масштабируется. Обычно используют:

• обработку при загрузке файла;
• фоновые очереди (cron, workers);
• batch-обработку существующих изображений.

Пример cron-задачи

0 3 * * * find /var/www/images -type f -name "*.jpg" -exec jpegoptim --max=80 {} \;

CI/CD и сборка

В проектах с frontend-сборкой оптимизация часто выносится:

• в CI-пайплайн;
• в этап билда Docker-образа;
• в отдельный сервис обработки медиа.

Баланс качества и производительности

Важно помнить:

• не всегда максимальное сжатие даёт лучший UX;
• для превью и каталогов можно снижать качество сильнее;
• для hero-изображений лучше оставить запас по качеству.

Оптимизация изображений — это компромисс между размером, качеством и нагрузкой на сервер.

Итоги

Оптимизация изображений на сервере — обязательная часть современной веб-инфраструктуры. Использование WebP и AVIF, правильная компрессия и автоматизация позволяют значительно ускорить сайты и снизить расходы на трафик.

Если процесс выстроен один раз и автоматизирован, он перестаёт быть точкой боли и начинает работать на производительность и SEO.