SVG vs PNG/JPG: varför vektorformat är avgörande för prestanda och SEO

PNG och JPG: perfekta för foton, för tunga för gränssnitt

PNG och JPG är rasterformat: bilden är ett rutnät av pixlar. En logotyp exporterad som en 512×512 PNG "fotograferar" varje punkt. För att förbli skarp på en Retina-skärm måste du ofta servera en version som är två eller tre gånger större, vilket innebär två eller tre gånger fler KB. JPG komprimerar foton bättre, men det förstör platta färger, lägger till artefakter runt text och stöder inte transparens. Ingetdera är designat för en logotyp eller ikon som behöver visas i 24px i navigationen och 240px i hero-bannern.

SVG (Scalable Vector Graphics) beskriver former med kurvor och koordinater, inte pixlar. Att vektorisera en PNG med PixelToPath innebär att man ersätter en statisk bitmapp med en bana som webbläsaren ritar om till exakt skärmstorlek. Resultatet: typiskt en mycket lättare fil, och identisk skärpa på mobil, skrivbord och 4K-skärmar.

Vad SVG praktiskt förändrar för en webbplats

För gränssnittet är SVG inte en estetisk "bonus". Det är en prestandahävstång: färre byte över nätverket, färre varianter att underhålla, enklare cachelagring och inbyggd vektorrendering i alla moderna webbläsare.

De mest synliga vinsterna för en utvecklare eller SEO:

• Vikt: en enkel logotyp går ofta från 40 till 80 KB i PNG till några få KB i SVG, och du eliminerar @2x / @3x-exporterna
• Skalbarhet: en enda fil, skarp vid 16px såväl som hel 4K-skärm, utan srcset eller bildmediafrågor
• Core Web Vitals: mindre data att ladda ner (LCP) och en stabil platshållare via viewBox (CLS)
• Teknisk SEO: snabbare sidor på mobil, ett format Google förstår, och text potentiellt närvarande i SVG:n

PNG vs SVG: en logotyps vikt är inte trivial

Bilder förblir en av sidans största viktfaktorer. Vi optimerar foton i WebP, men glömmer sidhuvudets logotyp och de tjugo PNG-ikonerna i CSS:en. Ändå upprepas dessa filer över alla webbadresser: varje förlorad millisekund går förlorad över hela webbplatsen.

Storleksordningar som observerats efter vektorisering med PixelToPath, i det typiska scenariot för en showcase-sajt eller webbapp:

Scenario	PNG / JPG	SVG
512px logotyp med transparens	40 till 80 KB	2 till 12 KB beroende på färger och noder
Samma logotyp serverad @2x (1024px) för Retina	Vikten fördubblas, ibland tredubblas	En enda fil, oförändrad
20 UI-ikoner exporterade @3x (72×72)	40 till 160 KB läggs till i gränssnittet	Några KB totalt
Logotyp i platt färg från en JPG	Artefakter och halos runt former och text	Rena kanter, och en ännu lättare fil

Regeln är enkel: allt som är en form, text, ett piktogram eller en logotyp mår bra av att vara en SVG. Fotografier och skärmdumpar förblir i JPG, WebP eller AVIF. SVG är ingen universell ersättning: det är rätt format för gränssnittet.

Skalbarhet: en skarp fil från smartphone till 4K

En PNG är bara skarp vid sin inbyggda upplösning. När den förstoras ser du pixlarna. När den förminskas aggressivt måste webbläsaren sampla om den. Därav gymnastiken med @1x, @2x, @3x-filer, srcsets och CSS-densiteter. Varje ny brytpunkt eller ny skärmdensitet (Retina, senaste telefonerna, 4K-skärmar) kräver en ny export, eller en fil som är för stor "för säkerhets skull".

En SVG ignorerar denna begränsning. Renderingsmotorn beräknar kurvorna i den begärda CSS-storleken. 32px favicon, 48px logotyp i navigeringen, samma varumärke på 400px i bannern, 4K-projicering: det är samma fil. Ingen suddighet, ingen kantutjämning (aliasing), ingen andra förfrågan för den högupplösta versionen. För ett komponentbibliotek innebär det också mindre skuld: en ikon, en fil, alla storlekar.

Core Web Vitals och SEO: varför Google bryr sig om formatet

Mobilsnabbhet är en rankningsfaktor. Core Web Vitals (LCP, INP, CLS) mäter vad användaren upplever. Att byta ut en tung PNG-logotyp eller ett gäng rasterikoner mot SVG kommer inte att få en sida att gå från 4 MB till 40 KB. Men på webbplatsens layout är effekten omedelbar, särskilt i ett 4G-nätverk eller när en LCP flaskhalsas av sidhuvudets logotyp.

Rent praktiskt hjälper vektorformatet till med tre mätvärden, förutsatt att du håller banans komplexitet rimlig:

• LCP (Largest Contentful Paint): om det största synliga elementet är en logotyp eller en platt illustration kommer en SVG på några KB fram snabbare än en 150 KB PNG @2x. Mindre nätverksträngsel för resten av sidan
• CLS (Cumulative Layout Shift): en SVG med width, height och viewBox reserverar sin ruta direkt från HTML-tolkningen. Ingen mer väntan på avkodning av bitmappar för att få veta proportionerna, alltså färre layoutförskjutningar
• INP och huvudtråd: en enkel SVG (logotyp, ikon) är billig att rita ut. Undvik dock "foto"-SVG:er med tusentals banor: de kan väga mer än en PNG och få CPU:n att jobba hårt. Därav värdet av ren spårning via PixelToPath, inte en kopia pixel för pixel
• SEO bortom hastighet: Google indexerar SVG:er. En inbäddad logotyp kan ha en tillgänglig titel. En SVG-bild med ett alt-attribut förblir grundläggande. Och en lättare sida minskar den tekniska avvisningsfrekvensen, en upplevelsesignal som vägs in i rankningen

Där SVG slår PNG/JPG på en riktig webbplats

Detta är inte teoretiskt. Här är de platser där vektorformatet lönar sig omedelbart:

• Sidhuvud- och sidfotslogotyp: en enda fil, skarp på Retina, ofta ett av de mest sedda elementen, och ibland LCP på en minimalistisk hemsida
• Ikonsystem: inga mer 1x/2x PNG-sprites. Varje piktogram är en SVG (eller SVG sprite), stylbar med CSS (currentColor) utan ny export
• Favicon och apple-touch: en modern SVG-favicon plus en fallback-PNG undviker att underhålla en hög med 16, 32, 180px-storlekar
• UI-illustrationer och tomma tillstånd (empty states): platta vektorritningar förblir skarpa i helskärm, utan att kosta samma vikt som en hero-bild
• SEO-landningssida: varje sparad KB på layouten förbättrar Lighthouse, PageSpeed Insights och mobilupplevelsen, signaler som rankningen aggregerar

Behåll JPG/WebP för foton. Flytta logotyper, piktogram och platta illustrationer till SVG. Det är den uppdelningen som de snabbaste webbplatserna redan tillämpar.