Зачем конвертировать SVG в WebP и AVIF

SVG — идеальный формат для иконок и логотипов, но на сложных иллюстрациях он тормозит рендеринг браузера. WebP и AVIF весят в 2-3 раза меньше при том же качестве, а ещё поддерживают анимацию и прозрачность.

Если на сайте много мелких SVG (например, иконки соцсетей), растеризация сократит время отрисовки страницы на 30-50%.

  • WebP: поддерживается всеми современными браузерами, сжимает на 30% лучше PNG
  • AVIF: экономит до 50% места по сравнению с WebP, но работает не во всех браузерах (нужен fallback)
  • Прозрачность: оба формата сохраняют альфа-канал, как и SVG
📖 Читайте также: Как сделать прозрачный фон в изображении

Как выбрать разрешение и качество при конвертации

SVG не имеет фиксированного разрешения, поэтому при растеризации нужно задать ширину и высоту в пикселях. Для иконок достаточно 64-128 пикселей, для иллюстраций — 500-2000 пикселей по большей стороне.

Качество WebP/AVIF настраивайте от 70 до 90%: ниже — артефакты, выше — лишний вес. Если SVG содержит градиенты или тени, проверяйте результат на разных экранах — растеризация может «размыть» мелкие детали.

  • Для ретины: удвойте разрешение (например, 128px → 256px)
  • Для анимации: используйте WebP (AVIF не поддерживает анимацию в большинстве браузеров)
  • Для fallback: конвертируйте SVG ещё и в PNG/JPG для старых браузеров

Пошаговая конвертация SVG в WebP и AVIF на 5на5

Загрузите SVG-файл в конвертер, выберите формат (WebP или AVIF) и настройте параметры. Для WebP доступно сжатие с потерями и без, для AVIF — только с потерями.

Укажите размер в пикселях или процентах от оригинала. Если в SVG есть прозрачность, включите альфа-канал — иначе фон станет белым.

Скачайте результат и проверьте его в браузере: сравните вес, качество и скорость загрузки.

  • Шаг 1: Загрузите SVG (максимум 10 МБ)
  • Шаг 2: Выберите WebP или AVIF, настройте размер и качество
  • Шаг 3: Включите прозрачность, если нужно
  • Шаг 4: Скачайте файл и протестируйте на сайте
📖 Читайте также: Как сделать анимацию из нескольких фото?

Что делать с метаданными и цветовыми профилями

SVG может содержать XML-комментарии, метаданные (автор, лицензия) и цветовые профили (например, sRGB). При конвертации в WebP/AVIF эти данные теряются — формат их не поддерживает.

Если метаданные важны (например, для авторских прав), сохраните их отдельно или используйте PNG. Цветовые профили тоже не переносятся: WebP/AVIF работают в sRGB, поэтому проверяйте цвета после конвертации, особенно если SVG был в Adobe RGB.

  • Метаданные: удаляются автоматически, сохраните их вручную при необходимости
  • Цветовые профили: конвертируйте SVG в sRGB перед растеризацией
  • Комментарии: удаляются, так как WebP/AVIF их не хранят

Как использовать конвертированные файлы на сайте

Вставьте WebP/AVIF через тег <picture> с fallback на PNG/JPG для старых браузеров. Пример кода: <picture><source srcset="image.avif" type="image/avif"><source srcset="image.webp" type="image/webp"><img src="image.png" alt="..."></picture>.

Для анимации используйте только WebP (AVIF не поддерживает анимацию в большинстве браузеров). Проверьте загрузку страницы в Chrome DevTools: вкладка «Network» покажет, какой формат выбрал браузер.

  • Fallback: всегда добавляйте PNG/JPG для Safari < 14 и Firefox < 65
  • Lazy loading: используйте loading="lazy" для изображений ниже сгиба
  • Preload: для критичных изображений добавьте <link rel="preload" as="image" href="image.avif">

Частые вопросы

Размытие появляется, если указать слишком низкое разрешение или качество. Увеличьте размер (например, с 64px до 128px) и поднимите качество до 80-90%.

Также проверьте, не растягиваете ли вы изображение через CSS — WebP/AVIF не масштабируются так плавно, как SVG.

Анимированный SVG конвертируется только в WebP — AVIF не поддерживает анимацию. Загрузите SVG в конвертер, выберите WebP и включите опцию «анимация».

Учтите, что анимированный WebP весит больше статичного, поэтому оптимизируйте кадры и задержку.

AVIF сжимает лучше (на 20-30% меньше WebP), но поддерживается не всеми браузерами. Используйте AVIF для современных браузеров с fallback на WebP.

Если важна совместимость (например, для корпоративных сайтов), выбирайте WebP — его поддерживают 95% браузеров.

Прозрачность сохраняется только если включить альфа-канал при конвертации. В настройках конвертера 5на5 выберите опцию «сохранить прозрачность».

Если она выключена, фон станет белым или чёрным.

⚡ Замените тяжёлые SVG на сжатые WebP/AVIF, чтобы ускорить сайт. Настройте разрешение, качество и прозрачность, а для старых браузеров добавьте fallback на PNG/JPG. Проверяйте результат в разных браузерах и на разных экранах.