18 марта 2026 · 5 мин чтения

Автоматическая оптимизация изображений: WebP, AVIF и responsive images

Изображения составляют 50-70% веса среднего сайта. Оптимизация картинок — самый эффективный способ ускорить загрузку. Разберём, как автоматизировать это на edge.

Форматы нового поколения

Формат	Экономия vs JPEG	Поддержка
WebP	25-35%	97% браузеров
AVIF	40-50%	85% браузеров
JPEG XL	35-45%	~5% (только Safari)

WebP — безопасный выбор для всех. AVIF даёт лучшее сжатие, но медленнее кодируется и не везде поддерживается.

Content Negotiation

Браузеры сообщают поддерживаемые форматы в заголовке Accept:

Accept: image/avif,image/webp,image/apng,image/*,*/*;q=0.8

CDN может автоматически выбирать лучший формат:

Браузер запрашивает /image.jpg
CDN видит Accept: image/avif
CDN конвертирует в AVIF и отдаёт
Кэширует с Vary: Accept

Ресайз на лету

Зачем отдавать 4K изображение для превью 200x200? Ресайз на edge экономит трафик и ускоряет загрузку:

# Исходный URL
https://cdn.example.com/photos/sunset.jpg

# С параметрами трансформации
https://cdn.example.com/photos/sunset.jpg?w=400&h=300&fit=cover&q=80

Конфигурация в EdgeByte

image_optimization:
  enabled: true
  formats:
    - avif
    - webp
  quality:
    default: 85
    avif: 80
    webp: 82
  max_width: 4096
  max_height: 4096
  strip_metadata: true

  presets:
    thumbnail:
      width: 200
      height: 200
      fit: cover
    hero:
      width: 1920
      quality: 90

Responsive images

Для responsive layouts нужны разные размеры для разных viewport:

<img
  src="/photo.jpg?w=800"
  srcset="
    /photo.jpg?w=400 400w,
    /photo.jpg?w=800 800w,
    /photo.jpg?w=1200 1200w"
  sizes="(max-width: 600px) 400px, 800px"
  alt="Photo"
>

EdgeByte автоматически генерирует все размеры при первом запросе и кэширует.

Lazy loading

Для изображений ниже fold используйте loading="lazy":

<img src="/photo.jpg" loading="lazy" alt="Photo">

Браузер загрузит изображение только когда оно приблизится к viewport.

Placeholder и LQIP

Low Quality Image Placeholder — крошечное размытое изображение, показываемое пока грузится полная версия:

# LQIP (10x10 blur)
https://cdn.example.com/photo.jpg?w=10&blur=20

Размер LQIP ~200-500 байт, инлайнится в HTML как base64.

Результаты

Типичные результаты после включения image optimization:

Размер изображений: -60%
LCP (Largest Contentful Paint): -40%
Bandwidth costs: -50%

Один из наших клиентов сэкономил $3,000/мес на CDN трафике после включения автоматической оптимизации изображений.

Заключение

Автоматическая оптимизация изображений — low-hanging fruit для производительности. В EdgeByte CDN это включается одной настройкой и работает для любого origin.