AVIF и WebP — новые форматы

AVIF и WebP — современные форматы изображений с более эффективным сжатием по сравнению с JPEG/PNG: WebP даёт 25-35% меньший размер, AVIF — 40-55%. Оба формата имеют поддержку прозрачности и анимации.

Зачем нужно

Изображения составляют 60-70% веса типичной веб-страницы. Переход с JPEG/PNG на WebP/AVIF сокращает LCP (Largest Contentful Paint) и экономит трафик пользователей без потери визуального качества. Google Search учитывает производительность страниц при ранжировании.

Где используется

  • Фото-галереи, продуктовые страницы e-commerce
  • Hero-изображения, баннеры (критично для LCP)
  • Иконки и UI-элементы (PNG → WebP/AVIF)
  • Аватары пользователей

Основной контент

Поддержка браузерами (2026)

WebP  — Chrome, Firefox, Safari, Edge (95%+ пользователей)
AVIF  — Chrome 85+, Firefox 93+, Safari 16+ (90%+ пользователей)

HTML: picture element с fallback

<!-- Браузер выбирает первый поддерживаемый формат -->
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Описание" width="800" height="600"
       loading="lazy" decoding="async">
</picture>

Конвертация через Sharp (Node.js)

const sharp = require('sharp');

async function convertImage(inputPath, outputDir) {
  const baseName = path.basename(inputPath, path.extname(inputPath));

  await Promise.all([
    // WebP
    sharp(inputPath)
      .webp({ quality: 80, effort: 4 })
      .toFile(path.join(outputDir, `${baseName}.webp`)),

    // AVIF (медленнее, лучше сжатие)
    sharp(inputPath)
      .avif({ quality: 65, effort: 6 })
      .toFile(path.join(outputDir, `${baseName}.avif`)),

    // JPEG fallback
    sharp(inputPath)
      .jpeg({ quality: 85, progressive: true })
      .toFile(path.join(outputDir, `${baseName}.jpg`)),
  ]);
}

Nginx: автоматическая отдача WebP

map $http_accept $webp_suffix {
  default "";
  "~*webp" ".webp";
}

location ~* \.(jpg|jpeg|png)$ {
  add_header Vary Accept;
  try_files $uri$webp_suffix $uri =404;
}

Сравнение форматов

Формат Сжатие Прозрачность Анимация Поддержка
JPEG Базовое Нет Нет 100%
PNG Хорошее для графики Да Нет 100%
WebP +25-35% vs JPEG Да Да 95%+
AVIF +40-55% vs JPEG Да Да 90%+

Частые ошибки

  • Не использовать <picture> с fallback — AVIF не поддерживается в старых браузерах
  • Конвертировать PNG-иконки с прозрачностью в JPEG (теряется прозрачность)
  • Отсутствие width и height атрибутов — вызывает CLS (layout shift)
  • Конвертация уже сжатых JPEG в WebP с качеством 100% — размер растёт
  • AVIF для thumbnail 32x32 — overhead кодирования не оправдан

Связанные темы

Ресурсы