SVG vs PNG/JPG: dlaczego format wektorowy jest kluczowy dla wydajności i SEO

PNG i JPG: idealne do zdjęć, zbyt ciężkie dla interfejsu

PNG i JPG to formaty rastrowe: obraz to siatka pikseli. Wyeksportowane logo PNG w rozmiarze 512×512 „fotografuje” każdy punkt. Aby zachować ostrość na ekranie Retina, często trzeba serwować wersję dwu- lub trzykrotnie większą, co oznacza dwa lub trzy razy więcej kilobajtów. JPG lepiej kompresuje zdjęcia, ale niszczy jednolite kolory, dodaje artefakty wokół tekstu i nie obsługuje przezroczystości. Żaden z nich nie jest zaprojektowany dla logotypów czy ikon, które mają wyświetlać się w rozmiarze 24 px w nawigacji i 240 px w banerze.

SVG (Scalable Vector Graphics) opisuje kształty za pomocą krzywych i współrzędnych, a nie pikseli. Wektoryzacja pliku PNG za pomocą PixelToPath polega na zastąpieniu stałej mapy bitowej ścieżką, którą przeglądarka rysuje w dokładnym rozmiarze ekranu. Efekt: plik zazwyczaj znacznie lżejszy i identyczna ostrość na urządzeniach mobilnych, komputerach i ekranach 4K.

Co tak naprawdę SVG zmienia na stronie

Dla interfejsu SVG to nie tylko estetyczny „dodatek”. To dźwignia wydajności: mniej bajtów przesyłanych przez sieć, mniej wariantów do utrzymania, prostsze zarządzanie pamięcią podręczną i natywne renderowanie wektorowe we wszystkich nowoczesnych przeglądarkach.

Najbardziej widoczne korzyści dla programisty lub specjalisty SEO:

• Rozmiar pliku: proste logo w formacie PNG często zmniejsza się z 40-80 KB do zaledwie kilku KB w SVG, a Ty możesz pozbyć się wersji @2x i @3x.
• Skalowalność: jeden plik, równie ostry przy 16 px, co na pełnym ekranie 4K, bez atrybutów srcset ani zapytań o media (media queries) dla obrazów.
• Core Web Vitals: mniej danych do pobrania (LCP) i stabilnie zarezerwowane miejsce na stronie dzięki viewBox (CLS).
• Techniczne SEO: szybsze ładowanie stron na urządzeniach mobilnych, format interpretowany przez Google oraz możliwość indeksowania tekstu zawartego w pliku SVG.

PNG vs SVG: waga logo ma znaczenie

Obrazy wciąż pozostają jednym z głównych elementów obciążających stronę. Optymalizujemy zdjęcia do formatu WebP, ale zapominamy o logo w nagłówku i dwudziestu ikonach PNG w CSS. Te pliki powtarzają się na wszystkich adresach URL: każda stracona milisekunda odbija się na całej witrynie.

Oto przykładowe różnice wielkości zaobserwowane po wektoryzacji za pomocą PixelToPath w typowym scenariuszu strony wizytówkowej lub aplikacji internetowej:

Scenariusz	PNG / JPG	SVG
Logo 512 px z przezroczystością	od 40 do 80 KB	od 2 do 12 KB zależnie od kolorów i węzłów
To samo logo serwowane jako @2x (1024 px) dla Retiny	Waga rośnie dwu-, czasem trzykrotnie	Jeden plik, bez zmian
20 ikon interfejsu wyeksportowanych jako @3x (72×72)	od 40 do 160 KB więcej	Łącznie tylko kilka KB
Logo w płaskich kolorach z JPG	Artefakty i halo wokół kształtów i tekstu	Czyste krawędzie i jeszcze lżejszy plik

Zasada jest prosta: wszystko, co jest kształtem, tekstem, piktogramem lub logotypem, zyskuje na zmianie formatu na SVG. Fotografie i zrzuty ekranu powinny pozostać w formatach JPG, WebP lub AVIF. SVG nie jest uniwersalnym zamiennikiem – jest odpowiednim formatem dla elementów interfejsu.

Skalowalność: jeden ostry plik od smartfona po 4K

Plik PNG jest ostry tylko w swojej natywnej rozdzielczości. Po powiększeniu widać piksele, a przy brutalnym zmniejszeniu przeglądarka musi go przeskalować. Stąd cała gimnastyka z plikami @1x, @2x, @3x, atrybutami srcset i gęstościami w CSS. Każdy nowy punkt przerwania (breakpoint) lub nowa gęstość ekranu (Retina, nowsze telefony, monitory 4K) wymaga nowego eksportu lub zastosowania jednego, zbyt dużego pliku „na wszelki wypadek”.

SVG ignoruje to ograniczenie. Silnik renderujący oblicza krzywe dla zadanego rozmiaru w CSS. Favicona 32 px, logo 48 px w nawigacji, to samo logo w rozmiarze 400 px na banerze i przy projekcji 4K – to zawsze ten sam plik. Żadnego rozmycia, żadnego ząbkowania (aliasingu), żadnych dodatkowych zapytań (requests) po wersje o wysokiej gęstości. Dla biblioteki komponentów to także mniejszy dług technologiczny: jedna ikona, jeden plik, wszystkie rozmiary.

Core Web Vitals i SEO: dlaczego Google przejmuje się formatem

Szybkość działania na urządzeniach mobilnych jest czynnikiem rankingowym. Wskaźniki Core Web Vitals (LCP, INP, CLS) mierzą odczucia użytkownika. Zastąpienie ciężkiego logo PNG lub całej rzeszy rastrowych ikon plikami SVG nie zmniejszy wagi strony z 4 MB do 40 KB. Jednak z punktu widzenia interfejsu efekt jest natychmiastowy, zwłaszcza na połączeniach 4G lub w przypadku wskaźnika LCP blokowanego przez logo w nagłówku.

W praktyce, format wektorowy pomaga w poprawie trzech wskaźników, pod warunkiem zachowania umiaru w stopniu złożoności ścieżek:

• LCP (Largest Contentful Paint): jeśli największym widocznym elementem jest logo lub płaska ilustracja, plik SVG o wadze kilku kilobajtów ładuje się znacznie szybciej niż plik PNG @2x o rozmiarze 150 KB. Oznacza to mniejsze obciążenie sieci przy ładowaniu reszty strony.
• CLS (Cumulative Layout Shift): plik SVG z określoną szerokością (width), wysokością (height) i viewBox rezerwuje swoje miejsce już podczas analizy składniowej (parsowania) HTML. Nie trzeba już czekać na zdekodowanie mapy bitowej, aby poznać proporcje, co oznacza mniej przesunięć układu strony.
• INP (Interaction to Next Paint) i główny wątek: prosty plik SVG (logo, ikona) jest łatwy i szybki do wyrenderowania. Unikaj natomiast plików SVG ze „zdjęciami”, które składają się z tysięcy ścieżek – mogą one ważyć więcej niż PNG i obciążać procesor. Stąd też zaleta użycia czystej wektoryzacji za pomocą PixelToPath, a nie kopiowania piksel po pikselu.
• SEO poza szybkością: Google indeksuje pliki SVG. Zagnieżdżone w ten sposób logo może posiadać dostępny (accessible) tytuł. Obraz SVG ze znacznikiem alt wciąż pozostaje fundamentem optymalizacji. A lżejsza strona to mniejszy współczynnik odrzuceń (bounce rate) z przyczyn technicznych, co jest sygnałem dla algorytmów rankingowych.

Gdzie SVG pokonuje PNG/JPG na prawdziwej stronie internetowej

To nie tylko teoria. Oto konkretne miejsca, w których format wektorowy natychmiast przynosi korzyści:

• Logo w nagłówku (header) i stopce (footer): pojedynczy, ostry plik na ekranach Retina, często będący najbardziej widocznym elementem, a niekiedy najważniejszym z punktu widzenia LCP (np. na minimalistycznych stronach głównych).
• System ikon: koniec ze sprite'ami PNG (1x/2x). Każdy piktogram staje się plikiem SVG (lub wektorowym sprite'em), który łatwo stylizować za pomocą CSS (np. currentColor) bez potrzeby ponownego eksportowania.
• Favicon i apple-touch: użycie nowoczesnej favicony w formacie SVG i jednego zapasowego pliku PNG pozwala uniknąć konieczności utrzymywania wielu wariantów wielkości (16, 32, 180 px).
• Ilustracje interfejsu i puste stany (empty states): płaskie, wektorowe rysunki pozostają ostre nawet na pełnym ekranie, nie obciążając strony tak mocno, jak tradycyjne grafiki.
• Landing page skoncentrowany na SEO: każdy zaoszczędzony kilobajt rozmiaru strony poprawia oceny w Lighthouse, PageSpeed Insights i przyspiesza ładowanie na urządzeniach mobilnych, co sumuje się w pozycjonowaniu w Google.

Zachowaj pliki JPG/WebP dla zdjęć. Zamień logotypy, piktogramy i płaskie ilustracje na format SVG. Taki podział stosują najszybsze strony internetowe.