SVG vs PNG/JPG: proč je vektorový formát zásadní pro výkon a SEO

PNG a JPG: ideální pro fotografie, příliš těžké pro rozhraní

PNG a JPG jsou rastrové formáty: obrázek je mřížka pixelů. Logo exportované do PNG 512×512 „vyfotografuje“ každý bod. Aby zůstalo ostré na obrazovce Retina, musíte často poskytnout verzi dvakrát nebo třikrát větší, tedy dvakrát nebo třikrát více KB. JPG komprimuje fotografie lépe, ale ničí plné barvy, přidává artefakty kolem textu a nepodporuje průhlednost. Ani jeden formát není určen pro logotyp nebo ikonu, která se musí zobrazit ve velikosti 24 px v navigaci a 240 px v banneru.

SVG (Scalable Vector Graphics) popisuje tvary pomocí křivek a souřadnic, nikoliv pixelů. Vektorizovat PNG pomocí PixelToPath znamená nahradit statickou bitmapu cestou, kterou prohlížeč překreslí v přesné velikosti obrazovky. Výsledek: obecně mnohem lehčí soubor a identická ostrost na mobilu, počítači i 4K panelu.

Co SVG konkrétně mění u webových stránek

Pro rozhraní není SVG jen estetické „plus“. Je to páka pro zvýšení výkonu: méně bajtů v síti, méně variant k údržbě, jednodušší mezipaměť a nativní vektorové vykreslování ve všech moderních prohlížečích.

Nejviditelnější výhody pro vývojáře nebo SEO specialistu:

• Hmotnost: jednoduché logo často klesne ze 40 na 80 KB v PNG na pár KB v SVG a vy odstraníte exporty @2x / @3x
• Škálovatelnost: jeden jediný soubor, ostrý při 16 px jako na celé obrazovce 4K, bez nutnosti použití srcset nebo media queries pro obrázky
• Core Web Vitals: méně dat ke stažení (LCP) a stabilní vyhrazené místo pomocí viewBox (CLS)
• Technické SEO: rychlejší stránky na mobilních zařízeních, formát, který Google dokáže interpretovat, a text případně obsažený v SVG

PNG vs SVG: váha loga není zanedbatelná

Obrázky zůstávají jedním z hlavních zdrojů velikosti stránky. Optimalizujeme fotografie ve formátu WebP, zapomínáme na logo v hlavičce a dvacet PNG ikon v CSS. Tyto soubory se přitom opakují na všech URL: každá ztracená milisekunda se projeví na celém webu.

Zde je srovnání orientačních velikostí po vektorizaci pomocí PixelToPath v typickém scénáři vizitky nebo webové aplikace:

Scénář	PNG / JPG	SVG
Logo 512 px s průhledností	40 až 80 KB	2 až 12 KB v závislosti na barvách a uzlech
Stejné logo v @2x (1024 px) pro Retina displeje	Hmotnost se zdvojnásobí, někdy ztrojnásobí	Jeden soubor, beze změny
20 ikon rozhraní exportovaných v @3x (72×72)	O 40 až 160 KB více	Celkem několik KB
Jednobarevné logo z JPG	Artefakty a svatozáře kolem tvarů a textu	Ostré hrany a ještě lehčí soubor

Pravidlo je jednoduché: vše, co tvoří tvar, text, piktogram nebo logotyp, by mělo být ve formátu SVG. Fotografie a snímky obrazovky zůstávají ve formátech JPG, WebP nebo AVIF. SVG není univerzální náhradou: je to správný formát pro rozhraní.

Škálovatelnost: ostrý soubor ze smartphonu na 4K

PNG je ostré pouze ve svém nativním rozlišení. Při zvětšení vidíme pixely. Při drastickém zmenšení musí prohlížeč převzorkovat. Proto ta gymnastika kolem souborů @1x, @2x, @3x, atributů srcset a hustot CSS. Každý nový bod zlomu nebo nová hustota pixelů (Retina, novější telefony, 4K monitory) vyžaduje nový export, nebo soubor, který je „pro jistotu“ příliš velký.

SVG toto omezení ignoruje. Vykreslovací engine vypočítá křivky na požadovanou velikost CSS. Favicon 32 px, logo 48 px v navigaci, stejná značka na 400 px v banneru, 4K projekce: je to tentýž soubor. Žádné rozmazání, žádný aliasing, žádný druhý požadavek na verzi s vysokou hustotou. U knihovny komponent to znamená také menší dluh: jedna ikona, jeden soubor, všechny velikosti.

Core Web Vitals a SEO: proč Google dbá na formát

Rychlost na mobilních zařízeních je faktorem hodnocení. Core Web Vitals (LCP, INP, CLS) měří, co uživatel prožívá. Nahrazení těžkého PNG loga nebo velkého množství rastrových ikon formátem SVG nezmenší stránku z 4 MB na 40 KB. U designu webu je však efekt okamžitý, zvláště v 4G sítích nebo v případech, kdy je LCP blokován logem v hlavičce.

Vektorový formát konkrétně pomáhá třem metrikám, pokud zůstanete u přiměřené složitosti cesty:

• LCP (Largest Contentful Paint): Pokud je největším viditelným prvkem logo nebo plochá ilustrace, několik kilobajtové SVG se načte dříve než 150KB PNG @2x. Méně síťového zatížení pro zbytek stránky.
• CLS (Cumulative Layout Shift): SVG s hodnotami width, height a viewBox si rezervuje místo již během parsování HTML. Už žádné čekání na dekódování bitmapy k určení poměru stran, tedy i méně posunů rozvržení.
• INP a hlavní vlákno (Main thread): jednoduché SVG (logo, ikona) je na vykreslení nenáročné. Vyhněte se naopak „foto“ SVG s několika tisíci cest: ty mohou být větší než PNG a zatěžovat procesor. Proto je lepší mít čistou cestu přes PixelToPath, nikoliv kopii pixel po pixelu.
• SEO nad rámec rychlosti: Google indexuje SVG. Integrované logo může mít přístupný titulek. Základem je také použití alt u obrázků SVG. A odlehčená stránka snižuje míru okamžitého opuštění z technických důvodů, což je signál, který algoritmus hodnocení bere v úvahu.

Kde SVG na reálném webu poráží PNG/JPG

Není to jen teorie. Zde jsou oblasti, kde se vektorový formát vyplatí okamžitě:

• Logo v hlavičce a v zápatí: jeden soubor, čistý v Retina, často jeden z nejsledovanějších prvků a na minimalistické domovské stránce to může být i LCP.
• Systém ikon: již žádné sprite obrázky z PNG 1x/2x. Každý piktogram je SVG (nebo SVG sprite), který lze upravit přes CSS (currentColor) bez nutnosti dalšího exportu.
• Favicon a apple-touch: moderní SVG favicon plus záložní PNG vás ušetří nutnosti udržovat velikosti 16, 32 a 180 px.
• Ilustrace rozhraní a prázdné stavy: ploché, vektorizované kresby zůstávají ostré na celé obrazovce a nezatěžují tak stránku jako velké obrázky z hlavičky.
• SEO vstupní stránka: každý ušetřený KB na rozhraní zlepšuje Lighthouse, PageSpeed Insights a dojem na mobilních zařízeních – signály, které hodnocení agreguje.

Ponechte JPG/WebP pro fotografie. Přepněte loga, piktogramy a ploché ilustrace na SVG. Tento postup rozdělení aplikují nejrychlejší stránky již nyní.