SVG vs PNG/JPG: waarom het vectorformaat essentieel is voor prestaties en SEO

PNG en JPG: perfect voor foto's, te zwaar voor de interface

PNG en JPG zijn rasterformaten: de afbeelding is een raster van pixels. Een geëxporteerd logo in PNG 512×512 'fotografeert' elk punt. Om scherp te blijven op een Retina-scherm, moet u vaak een versie serveren die twee of drie keer zo groot is, dus twee of drie keer zoveel KB's. JPG comprimeert foto's beter, maar vernietigt platte kleuren, voegt artefacten toe rond teksten en ondersteunt geen transparantie. Geen van beide is ontworpen voor een logotype of icoon dat moet worden weergegeven op 24 px in de navigatie en op 240 px in de header.

SVG (Scalable Vector Graphics) beschrijft vormen door curven en coördinaten, niet door pixels. Het vectoriseren van een PNG met PixelToPath is het vervangen van een vaste bitmap door een pad dat de browser hertekent op de exacte schermgrootte. Resultaat: een bestand dat over het algemeen veel lichter is, en met dezelfde scherpte op mobiel, desktop en 4K-schermen.

Wat SVG concreet verandert voor een site

Voor de interface is SVG geen esthetisch 'extraatje'. Het is een prestatiehefboom: minder bytes over het netwerk, minder varianten om te onderhouden, een eenvoudigere cache en native vectorweergave in alle moderne browsers.

De meest zichtbare voordelen voor een ontwikkelaar of een SEO:

• Gewicht: een eenvoudig logo gaat vaak van 40 tot 80 KB in PNG naar enkele KB's in SVG, en u elimineert @2x / @3x exports
• Schaalbaarheid: een enkel bestand, scherp op 16 px evenals op een 4K-scherm, zonder srcset of media queries voor afbeeldingen
• Core Web Vitals: minder gegevens om te downloaden (LCP) en een stabiele gereserveerde ruimte via viewBox (CLS)
• Technische SEO: snellere pagina's op mobiel, een formaat dat Google begrijpt, en tekst die mogelijk aanwezig is in de SVG

PNG vs SVG: het gewicht van een logo is niet onbelangrijk

Afbeeldingen blijven een van de belangrijkste oorzaken van paginagewicht. We optimaliseren foto's in WebP, maar vergeten het header-logo en de twintigtal PNG-iconen in de CSS. Echter, deze bestanden worden herhaald op alle URL's: elke verloren milliseconde geldt voor de hele site.

Grootteordes waargenomen na vectorisatie met PixelToPath, op het typische scenario van een showcase-site of een webapplicatie:

Scenario	PNG / JPG	SVG
512px-logo met transparantie	40 tot 80 KB	2 tot 12 KB, afhankelijk van kleuren en knooppunten
Zelfde logo geleverd als @2x (1024 px) voor Retina	Gewicht verdubbelt, soms verdrievoudigt	Eén enkel bestand, onveranderd
20 UI-iconen geëxporteerd als @3x (72×72)	40 tot 160 KB extra	Samen slechts enkele KB
Logo met vlakke kleuren uit een JPG	Artefacten en halo's rond vormen en tekst	Schone randen en een nog lichter bestand

De regel is simpel: alles wat vorm, tekst, pictogram of logotype is, is beter af als SVG. Foto's en screenshots blijven in JPG, WebP of AVIF. SVG is geen universele vervanger: het is het juiste formaat voor de interface.

Schaalbaarheid: een scherp bestand van smartphone tot 4K

Een PNG is alleen scherp op zijn native resolutie. Uitvergroot zie je pixels. Bruut verkleind moet de browser resamplen. Vandaar de gymnastiek van @1x, @2x, @3x bestanden, srcset en CSS dichtheden. Elk nieuw breekpunt of nieuwe schermdichtheid (Retina, recente telefoons, 4K monitoren) vereist een nieuwe export, of een te groot bestand 'voor het geval dat'.

Een SVG negeert deze beperking. De rendering engine berekent de curven op de gevraagde CSS grootte. Favicon 32 px, logo 48 px in navigatie, hetzelfde merk op 400 px in de header, 4K projectie: het is hetzelfde bestand. Geen vervaging, geen aliasing, geen tweede verzoek voor de hoge dichtheid versie. Voor een componentenbibliotheek betekent het ook minder schulden: één icoon, één bestand, alle groottes.

Core Web Vitals en SEO: waarom Google om het formaat geeft

Mobiele snelheid is een rankingfactor. Core Web Vitals (LCP, INP, CLS) meten wat de gebruiker ervaart. Het vervangen van een zwaar PNG logo of een reeks rastericonen door SVG's zal een pagina niet van 4 MB naar 40 KB brengen. Voor de opmaak van de site is het effect echter onmiddellijk, vooral op een 4G-netwerk of een LCP die wordt tegengehouden door het header-logo.

Concreet helpt het vectorformaat drie metrieken, op voorwaarde dat u redelijk blijft over de complexiteit van het pad:

• LCP (Largest Contentful Paint): als het grootste zichtbare element een logo of platte illustratie is, arriveert een SVG van enkele KB's eerder dan een PNG @2x van 150 KB. Minder netwerkcongestie voor de rest van de pagina
• CLS (Cumulative Layout Shift): een SVG met width, height en viewBox reserveert zijn ruimte zodra de HTML wordt geparseerd. Geen noodzaak meer om te wachten op het decoderen van een bitmap om de verhouding te kennen, dus minder lay-out verschuivingen
• INP en main thread: een eenvoudige SVG (logo, icoon) kost weinig om te renderen. Vermijd daarentegen 'foto' SVG's met duizenden paden: ze kunnen meer wegen dan een PNG en de processor belasten. Vandaar het nut van een schoon pad via PixelToPath, in plaats van een pixel-voor-pixel kopie
• SEO voorbij snelheid: Google indexeert SVG's. Een geïntegreerd logo kan een toegankelijke titel hebben. Een SVG-afbeelding met een alt-attribuut blijft de basis. En een lichtere pagina verlaagt het technische bouncepercentage, het ervaringssignaal dat de ranking meeneemt

Waar SVG wint van PNG/JPG op een echte site

Dit is niet theoretisch. Hier zijn de plekken waar het vectorformaat direct loont:

• Header en footer logo: een enkel bestand, scherp op Retina, vaak een van de meest bekeken elementen, en soms de LCP op een minimalistische homepage
• Iconensysteem: geen 1x/2x PNG sprites meer. Elk pictogram is een SVG (of SVG sprite), stylebaar met CSS (currentColor) zonder nieuwe export
• Favicon en apple-touch: een moderne SVG favicon plus een fallback PNG vermijdt een reeks van 16, 32, 180 px formaten om te onderhouden
• Interface illustraties en empty states: gevectoriseerde platte tekeningen blijven scherp op volledig scherm, zonder het gewicht van een header-afbeelding te kosten
• SEO landingspagina: elke bespaarde KB op de opmaak verbetert Lighthouse, PageSpeed Insights en de mobiele ervaring, signalen die de ranking aggregeert

Bewaar JPG/WebP voor foto's. Zet logo's, pictogrammen en platte illustraties om in SVG. Dit is de verdeling die de snelste sites al toepassen.