PNG vs SVG voor webprestaties: bestandsgrootte, laadsnelheid en Core Web Vitals (2026)

PNG vs SVG: de definitieve technische vergelijking voor 2025

Elke afbeelding die je levert is een engineering-beslissing. Raster of vector? 45 KB of 3 KB? Deze keuzes stapelen zich op over duizenden pagina's en miljoenen requests. Dit is de referentiegids die het PNG-vs-SVG-debat beslecht — met compressie-benchmarks, rendering-analyse, Lighthouse-scores en productieklare code.

"Het verschil tussen een goed frontend en een uitstekend wordt gemeten in de honderden afbeeldingsformaat-beslissingen die niemand ooit ziet."

Compressie-algoritmen: hoe elk formaat werkt

PNG: DEFLATE + filtering

PNG gebruikt een tweefasige pipeline. Elke scanline doorloopt een van vijf voorspellingsfilters (None, Sub, Up, Average, Paeth) die pixel-tot-pixel-correlatie benutten. De gefilterde bytes worden gecomprimeerd met DEFLATE (LZ77 + Huffman-codering). Omdat DEFLATE op een bytestream werkt, is PNG-compressie beperkt door ruimtelijke redundantie: vlakke kleurgebieden comprimeren goed; ruisrijke foto's krimpen nauwelijks.

• Compressieratio op vlakke iconen: 10:1–20:1
• Compressieratio op foto's: 1,5:1–3:1
• Decompressiekosten: ~0,8 ms/megapixel op een mid-range mobiele SoC

SVG: tekstcompressie + SVGO

SVG is XML. Niet-geoptimaliseerde Illustrator-exports bevatten metadata, editor-artefacten en overbodige precisie. SVGO uitvoeren verwijdert die ruis — typisch een reductie van 40–70 % vóór gzip. Over het netwerk met Brotli krimpt een geoptimaliseerd 6-KB-SVG naar ongeveer 1,8 KB — kleiner dan een Base64-gecodeerd favicon.

Diepteanalyse van de renderingpipeline

PNG-renderingpad

1. Ophalen — Het HTTP-antwoord komt aan in de netwerkbuffer.
2. Decodering — De decoder ontpakt DEFLATE-data naar een ruw RGBA-bitmap.
3. Rasterisatie — Het bitmap wordt geüpload als GPU-textuur.
4. Compositing — De compositor tekent de textuur op de CSS-transformatie van het element.

Het geheugen is vast: breedte x hoogte x 4 bytes. Een PNG van 1920x1080 verbruikt ~8,3 MB GPU-geheugen ongeacht transparantie.

SVG-renderingpad

1. Ophalen — De XML-payload komt aan (vaak kleiner dan één PNG-scanline).
2. Parsing — De XML-parser bouwt een DOM-subboom.
3. Stijl — De CSS-cascade wordt toegepast; viewBox en preserveAspectRatio worden opgelost.
4. Schilderen — Skia/Core Graphics tesselleren paden in driehoeken op de huidige apparaatresolutie.
5. Compositing — Het gerasterde resultaat gaat de compositor in als elke andere laag.

Het geheugen schaalt met padcomplexiteit, niet canvasgrootte. Een 200-node icoon: ~60 KB. Een geïllustreerde kaart van 15 000 nodes: meerdere MB met mogelijke main-thread-blokkades.

Benchmarktabel: 15 praktijkscenario's

Lighthouse-benchmarkdata (2025)

Getest op e-commerce landingspagina: 12 UI-iconen, 1 logo, 3 illustraties, 4 productfoto's. Simulatie Moto G Power op 4G.

Alles-PNG baseline:

Performance: 62  |  LCP: 4,8s  |  TBT: 620ms  |  CLS: 0,08  |  Afbeeldingsgewicht: 2,4 MB

Hybride (SVG-vectoren + WebP-foto's):

Performance: 94  |  LCP: 1,9s  |  TBT: 180ms  |  CLS: 0,01  |  Afbeeldingsgewicht: 380 KB

Delta: +32 performancepunten, -2,9s LCP, -84 % afbeeldingspayload — alleen door formaatkeuze.

Productiecode-patterns

Responsive SVG met art direction

<picture>
  <source media="(max-width: 639px)" srcset="/img/logo-simple.svg" type="image/svg+xml">
  <source media="(min-width: 640px)" srcset="/img/logo-full.svg" type="image/svg+xml">
  <img src="/img/logo-full.png" alt="VectoSolve — AI-gestuurde SVG-tools"
       width="280" height="60" loading="eager" fetchpriority="high">
</picture>

Dichtheidswisseling voor rasterfallbacks

<picture>
  <source srcset="/img/hero.avif" type="image/avif">
  <source srcset="/img/hero.png" type="image/webp">
  <img src="/img/hero.png"
       srcset="/img/hero-1x.png 1x, /img/hero-2x.png 2x"
       sizes="(max-width: 768px) 100vw, 50vw"
       alt="Overzicht productdashboard"
       width="1200" height="630" loading="lazy" decoding="async">
</picture>

Toegankelijkheid: vergelijking naast elkaar

SVG is architecturaal superieur voor toegankelijkheid en WCAG 2.2 AA-naleving.

Toekomstige formaten: AVIF, WebP en verder

• WebP — 25–35 % kleiner dan PNG. 97 % browserondersteuning. De veilige rasterkeuze voor 2025.
• AVIF — 40–60 % kleiner dan PNG. 92 % ondersteuning en groeiend. Ideaal voor foto's.
• JPEG XL — Superieure compressie met progressieve decodering. Browserondersteuning gestagneerd. De moeite waard om te monitoren.

Geen van deze formaten vervangt SVG voor vectorcontent. De winnende strategie: SVG voor vector, AVIF/WebP voor raster, PNG als ultieme fallback.

Geheugengebruik: de verborgen kosten

Op geheugenbeperkte mobiele apparaten (2–3 GB gedeeld over alle tabbladen), een 2048x2048 PNG-hero leveren wanneer een 6-KB-SVG zou volstaan is geen gemiste optimalisatie — het is een bug.

Conclusie: engineeringbeslissingen, geen formatenoorlog

De PNG-vs-SVG-vraag is geen kwestie van voorkeur — het is een engineeringbeslissing met meetbare consequenties voor prestaties, toegankelijkheid, onderhoudbaarheid en gebruikerservaring. SVG wint voor vectorcontent op elke metriek die ertoe doet in 2025, terwijl moderne rasterformaten zoals AVIF en WebP het PNG voor fotografische content hebben overtroffen.

Audit je huidige assets. Draai Lighthouse. Meet de schildertijden. Converteer dan elke geschikte PNG naar SVG met VectoSolve's AI-gestuurde vectorisatie en kijk hoe je prestatiescores stijgen. Het beste afbeeldingsformaat is het formaat dat bij de content past — nu heb je de benchmarks om het te bewijzen.

Bronnen en verdere lectuur

• MDN Web Docs — SVG — Gezaghebbende SVG-referentie met browsercompatibiliteitsdata
• W3C SVG 2 Specificatie — Officiële standaard voor SVG-mogelijkheden vergeleken met rasterformaten
• web.dev — Prestatiebenchmarks over de impact van afbeeldingsformaten op Core Web Vitals
• CSS-Tricks: Using SVG — Praktische use cases en besliskaders voor SVG vs raster
• Smashing Magazine — Diepgaande technische analyses over formaatselectie en -optimalisatie