SVG vs PNG vs WebP: de definitieve gids voor webdesigners in 2025

Wat elk formaat werkelijk is

Voordat we vergelijken, helpt het te begrijpen wat elk formaat opslaat — omdat ze fundamenteel verschillende problemen oplossen.

SVG — Scalable Vector Graphics

SVG is een XML-gebaseerde opmaaktaal, geen pixelraster. Het beschrijft vormen, paden en tekst als wiskundige instructies. Een cirkel in SVG is letterlijk <circle cx="50" cy="50" r="40"/>. Het rendert perfect op elke grootte en is volledig toegankelijk voor schermlezers.

PNG — Portable Network Graphics

PNG slaat een lossless pixelraster op met volledige alfakanaalondersteuning. Het blinkt uit bij afbeeldingen met scherpe randen, vlakke kleuren en tekst. Het nadeel: bestandsgroottes zijn groot voor fotografische inhoud.

WebP — het moderne formaat van Google

WebP ondersteunt zowel lossy als lossless compressie, transparantie en animatie. In lossless modus produceert het doorgaans bestanden die 25–35% kleiner zijn dan equivalente PNG's. Browserondersteuning is nu universeel in Chrome, Firefox, Safari (sinds 2020) en Edge.

Toepassingsmatrix: welk formaat wint waar

Het juiste formaat hangt af van het assettype, niet van een universele voorkeur:

Assettype	SVG	PNG	WebP
Logo / woordmerk	✅ Beste	⚠ Terugval	❌ Vermijden
UI-icoon (inline)	✅ Beste	⚠ Acceptabel	❌ Vermijden
App-icoon / favicon	✅ Bron	✅ Goed (ICO)	❌ Geen ondersteuning
Vlakke illustratie	✅ Beste	⚠ Grote bestanden	✅ Goed
Screenshot / UI	❌ Verkeerd gereedschap	✅ Beste	✅ Uitstekend
Fotografie	❌ Verkeerd gereedschap	⚠ Te zwaar	✅ Beste
Geanimeerde graphic	✅ CSS/JS	❌ Geen animatie	✅ WebP anim
E-mailafbeelding	❌ Slechte ondersteuning	✅ Universeel	⚠ Beperkte ondersteuning

Waarom SVG superieur is voor logo's en iconen

Het argument tegen SVG is meestal de bestandsgrootte. Maar voor logo's en UI-iconen gaat dat argument niet op:

• Resolutieonafhankelijkheid: één SVG-bestand bedient mobiel retina, 4K desktop en grootformaat drukwerk. Met PNG heb je @1x, @2x, @3x varianten nodig.
• CSS-thematisering: SVG-paden erven currentColor, zodat één enkel icoonbestand zich aanpast aan dark mode en hover-states zonder nieuwe export.
• Inline interactie: ingebed in HTML maken SVG-elementen deel uit van de DOM — je kunt individuele paden animeren en event listeners koppelen.
• Toegankelijkheid: SVG ondersteunt <title> en <desc> elementen die schermlezers direct gebruiken.
• Compressie-efficiëntie: een typisch logo-SVG met gzip is 1–4 KB. Een @2x PNG van hetzelfde logo is zelden kleiner dan 20 KB.

Wanneer je een rasterversie nodig hebt — voor een platform dat geen SVG accepteert, voor een OG-afbeelding, of voor een drukkerij — is de conversie slechts één klik verwijderd.

Gratis Tool SVG naar PNG Converter Converteer elke SVG naar een pixelperfecte PNG op elke resolutie. Ondersteunt transparante achtergrond en aangepaste schaalfactoren.

Wanneer WebP PNG verslaat voor fotografie en illustraties

Voor fotografische inhoud en complexe rasterillustraties heeft WebP een duidelijk voordeel ten opzichte van PNG en een concurrentievoordeel ten opzichte van JPEG:

Het compressieverschil is niet academisch. Een hero-afbeelding van 800 KB als PNG komt doorgaans onder de 200 KB als lossy WebP bij perceptueel identieke kwaliteit. Directe impact op Core Web Vitals — specifiek Largest Contentful Paint (LCP).

• Lossy WebP vs JPEG: dezelfde waargenomen kwaliteit, ~25–30% kleinere bestandsgrootte. Voor fotografische inhoud, geef de voorkeur aan WebP boven JPEG in alle moderne contexten.
• Lossless WebP vs PNG: dezelfde pixelperfecte getrouwheid, ~25–35% kleiner. Voor screenshots en vlakke illustraties met alfa is WebP lossless de betere keuze.
• Geanimeerd WebP vs GIF: dramatisch betere compressie voor animatie. WebP-animatie is het moderne antwoord als je animatie zonder JavaScript nodig hebt.
• De PNG-uitzondering: bewaar PNG voor assets die maximale toolcompatibiliteit nodig hebben — Figma-exports, Photoshop-bronbestanden en design-handoff workflows.

Het belangrijkste voorbehoud: WebP heeft beperkte ondersteuning in sommige e-mailclients en oudere versies van Apple's native apps. Voor weblevering is er geen reden meer om PNG boven WebP te kiezen.

De favicon-uitzondering: waarom ICO nog bestaat

Favicons volgen andere regels. Het klassieke favicon.ico-formaat bevat meerdere resoluties (16×16, 32×32, 48×48) in één bestand. De moderne praktijk stapelt drie declaraties: ICO voor legacy browsers, PNG 192×192 voor Android, en SVG favicon voor browsers die het ondersteunen.

De bron voor al deze moet je originele SVG zijn. Een goede favicon-generator converteert het in één stap naar alle benodigde formaten.

Gratis Tool Favicon Generator Upload een SVG of PNG en ontvang een compleet favicon-pakket: ICO, 16×16, 32×32, 192×192, 512×512 en een Apple Touch-icoon — klaar om in je HTML te plakken.

E-mail vs web vs app — dezelfde asset, verschillende regels

E-mail

E-mailclients zijn de meest conservatieve omgeving. SVG wordt geblokkeerd door Gmail, Outlook en Apple Mail. WebP wordt niet ondersteund in Outlook op Windows. De veilige keuze: PNG voor logo's, JPEG voor fotografie.

Web

Het moderne web biedt de meeste flexibiliteit. Gebruik SVG voor logo's, iconen en vectorillustraties. WebP (lossy) voor fotografie en complexe rasterafbeeldingen. WebP (lossless) voor screenshots. PNG-terugval alleen indien nodig.

Native app (iOS / Android)

iOS en Android ondersteunen beide SVG via hun vectorformaten. In de praktijk genereren asset-pipelines meerdere PNG-dichtheden (1x, 2x, 3x) vanuit een vectorbron. WebP wordt native ondersteund door Android 4.0+ en iOS 14+.

Base64-embedding: wanneer de leveringsgrootte er niet toe doet

Er is een specifiek scenario waarin je een afbeelding naar Base64 converteert en direct in HTML, CSS of JavaScript inbed: wanneer de asset minuscuul is en beschikbaar moet zijn zonder een extra HTTP-verzoek. Kleine SVG-iconen in CSS background-image en laadspinners zijn de canonieke gevallen.

Base64-codering vergroot de bestandsgrootte met ongeveer 33%, dus het is alleen geschikt voor kleine assets (minder dan ~10 KB). Voor iets groters is het extra verzoek goedkoper dan de coderingsoverhead.

Gratis Tool Afbeelding naar Base64 Converter Converteer elke PNG, SVG, WebP of JPEG naar een Base64 data URI — klaar om in CSS, HTML of JavaScript te plakken.

Het beslissingskader: een stroomdiagram in proza

Pas deze regels in volgorde toe. De eerste match wint:

• Is de asset begonnen als vector? (logo, icoon, illustratie in Figma/Illustrator) → Gebruik SVG. Converteer alleen naar PNG/WebP wanneer de doelomgeving geen SVG ondersteunt.
• Is het een foto of een complexe gradiëntafbeelding? → Gebruik lossy WebP. Val terug op JPEG alleen voor e-mail of tools die WebP afwijzen.
• Is het een screenshot, UI-opname of vlakke illustratie met alfa? → Gebruik lossless WebP. PNG als terugval voor e-mail.
• Is het een favicon? → Genereer een ICO + PNG + SVG-pakket vanuit je vectorbron. Gebruik nooit WebP voor favicons.
• Gaat het in een HTML-e-mail? → Gebruik PNG (logo's) of JPEG (foto's). Vermijd SVG en WebP volledig.
• Moet het ingebed worden zonder een HTTP-verzoek? → Converteer naar Base64, maar alleen als de asset kleiner is dan ~10 KB.

Veelgestelde vragen