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

PNG та JPG: ідеальні для фото, занадто важкі для інтерфейсу

PNG та JPG — це растрові формати: зображення є сіткою пікселів. Логотип, експортований у PNG 512×512, «фотографує» кожну точку. Щоб він залишався чітким на екрані Retina, вам часто доводиться надавати версію у два-три рази більшу, а отже, в два-три рази більше КБ. JPG краще стискає фотографії, але він руйнує плоскі кольори, додає артефакти навколо тексту і не підтримує прозорість. Жоден з них не призначений для логотипу чи іконки, яка має відображатися розміром 24 пікселі в навігації та 240 пікселів у банері.

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

Що конкретно змінює SVG для сайту

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

Найбільш помітні переваги для розробника або SEO-фахівця:

• Вага: простий логотип часто зменшується з 40-80 КБ у форматі PNG до кількох КБ у SVG, і ви можете відмовитися від експорту @2x / @3x
• Масштабованість: один файл, чіткий як при 16 пікселях, так і на повному екрані 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. Кожна нова контрольна точка (breakpoint) або нова щільність екрану (Retina, новітні телефони, 4K монітори) вимагає нового експорту, або файлу занадто великого розміру «про всяк випадок».

SVG ігнорує це обмеження. Механізм рендерингу обчислює криві відповідно до запитаного розміру CSS. Фавіконка 32 пікселі, логотип 48 пікселів у навігації, той самий бренд на 400 пікселів у банері, проєкція 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) без нового експорту
• Фавіконка та apple-touch: сучасна SVG-фавіконка плюс PNG для зворотної сумісності (fallback) дозволяє уникнути цілої низки розмірів (16, 32, 180 пікселів), які потрібно підтримувати
• Ілюстрації інтерфейсу та порожні стани (empty states): векторизовані плоскі малюнки залишаються чіткими на повному екрані і не важать стільки, скільки зображення в шапці
• SEO цільова сторінка: кожен зекономлений КБ на оболонці покращує результати Lighthouse, PageSpeed Insights та сприйняття на мобільних пристроях — сигнали, які враховуються при ранжуванні

Залиште JPG/WebP для фотографій. Переведіть логотипи, піктограми та плоскі ілюстрації у SVG. Саме такий поділ вже застосовують найшвидші сайти.