SVG против PNG/JPG: почему векторный формат важен для производительности и SEO

PNG и JPG: идеально для фотографий, слишком тяжелые для интерфейса

PNG и JPG — это растровые форматы: изображение представляет собой сетку пикселей. Логотип, экспортированный в PNG 512×512, «фотографирует» каждую точку. Чтобы оставаться четким на экране Retina, часто нужно загружать версию в два или три раза больше, следовательно, в два или три раза больше КБ. JPG лучше сжимает фотографии, но разрушает сплошные цвета, добавляет артефакты вокруг текста и не поддерживает прозрачность. Ни один из них не предназначен для логотипа или иконки, которые должны отображаться в размере 24 px в навигации и 240 px в шапке.

SVG (Scalable Vector Graphics) описывает формы с помощью кривых и координат, а не пикселей. Векторизовать PNG с помощью PixelToPath — значит заменить статичный растр на контур, который браузер перерисовывает в точном размере экрана. Результат: файл, как правило, намного легче и одинаково четкий на мобильном телефоне, компьютере и 4K-панели.

Что SVG конкретно меняет для сайта

Для интерфейса SVG — это не эстетический «плюс». Это рычаг производительности: меньше байтов по сети, меньше вариантов для поддержки, более простой кэш и нативный векторный рендеринг во всех современных браузерах.

Наиболее заметные преимущества для разработчика или SEO-специалиста:

• Вес: простой логотип часто уменьшается с 40-80 КБ в PNG до нескольких КБ в SVG, и вы можете удалить экспорты @2x / @3x
• Масштабируемость: один файл, четкий как при 16 px, так и в полноэкранном 4K, без srcset или медиазапросов для изображений
• Core Web Vitals: меньше данных для загрузки (LCP) и стабильное зарезервированное пространство через viewBox (CLS)
• Техническое SEO: более быстрые страницы на мобильных устройствах, формат, который понимает Google, и текст, потенциально присутствующий в SVG

PNG против SVG: вес логотипа имеет значение

Изображения остаются одной из главных причин большого веса страницы. Мы оптимизируем фотографии в WebP, но забываем о логотипе в шапке и паре десятков PNG-иконок в CSS. Однако эти файлы повторяются на всех URL: каждая потерянная миллисекунда теряется на всем сайте.

Порядки величин, наблюдаемые после векторизации с помощью PixelToPath, на типичном сценарии сайта-визитки или веб-приложения:

Сценарий	PNG / JPG	SVG
Логотип 512 px с прозрачностью	40–80 КБ	2–12 КБ в зависимости от цветов и узлов
Тот же логотип, отдаваемый в @2x (1024 px) для Retina	Вес удваивается, иногда утраивается	Один файл, без изменений
20 иконок интерфейса, экспортированных в @3x (72×72)	Плюс 40–160 КБ	Всего несколько КБ
Логотип с плоскими цветами из JPG	Артефакты и ореолы вокруг фигур и текста	Чистые края и ещё меньший размер файла

Правило простое: все, что является формой, текстом, пиктограммой или логотипом, выигрывает от формата SVG. Фотографии и скриншоты остаются в JPG, WebP или AVIF. SVG — это не универсальная замена: это правильный формат для интерфейса.

Масштабируемость: четкий файл от смартфона до 4K

PNG четкий только в своем родном разрешении. При увеличении видны пиксели. При сильном уменьшении браузеру приходится делать ресемплинг. Отсюда гимнастика с файлами @1x, @2x, @3x, srcset и плотностью CSS. Каждая новая точка разрыва или новая плотность экрана (Retina, новые телефоны, 4K-мониторы) требует нового экспорта или слишком большого файла «на всякий случай».

SVG игнорирует это ограничение. Механизм рендеринга вычисляет кривые для запрошенного размера CSS. Favicon 32 px, логотип 48 px в навигации, тот же бренд на 400 px в шапке, проекция 4K — это один и тот же файл. Никакого размытия, никаких ступенчатых краев, никаких вторых запросов для версии высокой плотности. Для библиотеки компонентов это также меньше технического долга: одна иконка, один файл, все размеры.

Core Web Vitals и SEO: почему Google заботится о формате

Скорость на мобильных устройствах является фактором ранжирования. Core Web Vitals (LCP, INP, CLS) измеряют то, что чувствует пользователь. Замена тяжелого логотипа PNG или множества растровых иконок на SVG не превратит страницу весом 4 МБ в 40 КБ. Но для оформления сайта эффект ощущается сразу, особенно в сети 4G или если LCP задерживается из-за логотипа в шапке.

Конкретно векторный формат помогает трем метрикам, при условии сохранения разумной сложности контура:

• LCP (Largest Contentful Paint): если самый большой видимый элемент — это логотип или плоская иллюстрация, SVG в несколько КБ загружается быстрее, чем PNG @2x на 150 КБ. Меньше нагрузки на сеть для остальной части страницы
• CLS (Cumulative Layout Shift): SVG с width, height и viewBox резервирует свое место уже при анализе HTML. Больше не нужно ждать декодирования растра, чтобы узнать соотношение сторон, следовательно, меньше сдвигов макета
• INP и основной поток: простой SVG (логотип, иконка) требует мало ресурсов для отрисовки. Однако избегайте «фотографических» SVG из нескольких тысяч путей: они могут весить больше, чем PNG, и нагружать процессор. Отсюда ценность чистого контура через PixelToPath, а не попиксельной копии
• SEO за пределами скорости: Google индексирует SVG. Встроенный логотип может содержать доступный заголовок. Изображение SVG с атрибутом alt остается базой. А более легкая страница снижает показатель технических отказов — сигнал об опыте, который учитывается при ранжировании

Где SVG превосходит PNG/JPG на реальном сайте

Это не теория. Вот места, где векторный формат окупается сразу:

• Логотип в шапке и подвале: один файл, четкий на Retina, часто один из самых просматриваемых элементов, а иногда и LCP на минималистичной главной странице
• Система иконок: больше никаких спрайтов PNG 1x/2x. Каждая пиктограмма — это SVG (или SVG-спрайт), стилизуемый через CSS (currentColor) без нового экспорта
• Favicon и apple-touch: современный SVG favicon плюс резервный PNG позволяет избежать поддержки множества размеров 16, 32, 180 px
• Иллюстрации интерфейса и пустые состояния: плоские векторные рисунки остаются четкими в полноэкранном режиме, не занимая столько места, сколько изображение в шапке
• SEO целевая страница: каждый сэкономленный КБ на оформлении улучшает Lighthouse, PageSpeed Insights и ощущения на мобильных, сигналы, которые агрегирует ранжирование

Оставьте JPG/WebP для фотографий. Переведите логотипы, пиктограммы и плоские иллюстрации в SVG. Это разделение, которое уже применяют самые быстрые сайты.