PNG of SVG? Een beslisschema voor designers, developers en marketeers

Elk beeld dat je publiceert is een keuze — het verkeerde formaat kost je paginasnelheid, renderingkwaliteit, of allebei. Deze gids geeft je de technische diepgang om altijd de juiste keuze te maken tussen PNG en SVG, met echte benchmarks en kopieerbare code.

Hoe browsers elk formaat daadwerkelijk renderen

PNG: Pixelraster decodering

1. Browser downloadt het binaire bestand, decomprimeert de DEFLATE-stream.
2. Gedecodeerde bitmap wordt gerasterd naar een GPU-textuur.
3. De textuur compositeert op oorspronkelijke pixelafmetingen. Vergroot en de browser interpoleert — hallo, wazig beeld.

SVG: DOM + Paint

1. Browser parst XML naar een DOM-subboom (of beeldcontext via <img>).
2. Elk <path>, <rect>, <circle> wordt berekend ten opzichte van de huidige viewport.
3. Vectorinstructies rasteren in real-time op elke resolutie — 1x, 2x, 100x. Altijd scherp.

Diepgaande technische vergelijking

Compressie

• PNG gebruikt lossless DEFLATE. Uitstekend voor vlakke kleuren, maar foto's worden enorm — 1200×800 bereikt al snel 1-2 MB.
• SVG is platte tekst XML die spectaculair comprimeert met brotli. Een SVG van 12 KB wordt routinematig verzonden als 3 KB.

Transparantie

• PNG slaat een 8-bit alfakanaal op — vloeiende per-pixel transparantie.
• SVG ondersteunt opacity, fill-opacity, rgba(), plus masking en clipping paths.

Animatie

• PNG is statisch (APNG bestaat maar heeft beperkte tooling).
• SVG ondersteunt SMIL, CSS keyframes en JS-gestuurde animatie — allemaal resolutie-onafhankelijk.

Prestatiebenchmarks

Echte cijfers van een Lighthouse-audit in 2026 (Moto G Power, Chrome 124, 4G throttling):

Keuzematrix

Codevoorbeelden die je kunt overnemen

Responsive SVG (schaalt met container)

<svg viewBox="0 0 120 40" role="img" aria-label="Logo"
     class="logo" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 35 L25 5 L40 35" fill="currentColor"/>
  <text x="50" y="30" font-size="16" fill="currentColor">vectosolve</text>
</svg>

<style>
  .logo {
    width: 100%;
    max-width: 240px;
    height: auto;
    color: #0f172a;
  }
  @media (prefers-color-scheme: dark) {
    .logo { color: #f8fafc; }
  }
</style>

Responsive PNG met srcset

<img
  src="/images/hero-800.png"
  srcset="/images/hero-400.png 400w,
         /images/hero-800.png 800w,
         /images/hero-1600.png 1600w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Dashboard-screenshot met analytics"
  width="800" height="450"
  loading="lazy" decoding="async"
/>

Het <picture> element: het beste van twee werelden

<picture>
  <source srcset="/images/photo.avif" type="image/avif" />
  <source srcset="/images/photo.png" type="image/webp" />
  <img src="/images/photo.png" alt="Product met transparante achtergrond"
       width="600" height="600" loading="lazy" />
</picture>

Browserondersteuning en randgevallen

SVG

• Volledige ondersteuning in elke moderne browser sinds ~2015.
• SVG-lettertypen: <text> gebruikt systeem-/weblettertypen. Converteer tekst naar paden voor pixel-perfecte logo's (maar je verliest toegankelijkheid).
• Externe sprites: <use href="sprite.svg#icon"> werkt niet cross-origin in sommige Safari-versies. Gebruik inline of same-origin URL's.
• Beveiliging: Inline SVG kan JavaScript uitvoeren. Inline nooit niet-vertrouwde, door gebruikers geüploade SVG's zonder sanitisatie.

PNG

• Universele ondersteuning — elke browser, e-mailclient en platform. Nul randgevallen.
• Kleurprofielen: Ingesloten ICC-profielen renderen anders in Safari vs Chrome. Verwijder ze tijdens optimalisatie.
• APNG: Ondersteund in moderne browsers maar slechte tooling en grotere bestanden dan SVG/CSS-animatie.

Optimalisatiechecklist

SVG

1. Draai door SVGO of VectoSolve's optimizer om metadata te verwijderen.
2. Verwijder verborgen lagen, ongebruikte <defs>, lege groepen.
3. Vereenvoudig paden — minder controlepunten betekent minder bytes.
4. Serveer met Content-Encoding: br (brotli).
5. Inline kritieke SVG's om een netwerkverzoek te elimineren.

PNG

1. Gebruik oxipng, pngquant of Squoosh om de bestandsgrootte te verkleinen.
2. Exporteer op exact de benodigde afmetingen — stuur geen 4000 px voor een plek van 400 px.
3. Bied srcset aan met 1x en 2x varianten.
4. Stel expliciete width/height in om CLS te voorkomen.
5. Voeg loading="lazy" toe voor afbeeldingen onder de vouw.

Wanneer converteren tussen formaten

PNG naar SVG

Je hebt een rasterlogo en wilt een schaalbare versie. Handmatig overtrekken kost 30+ minuten. AI-gestuurde vectorisatie op VectoSolve duurt seconden en levert schone, geoptimaliseerde paden.

SVG naar PNG

Je hebt een raster-export nodig voor social media of een platform dat geen SVG accepteert. Gebruik VectoSolve's SVG-naar-PNG converter om te exporteren op elke resolutie met transparante of effen achtergronden.

"

Het beste afbeeldingsformaat is degene die het kleinste bestand levert bij de kwaliteit die jouw ontwerp vereist. Al het andere is dogma.

Conclusie

Er is geen universeel "beste" formaat — alleen het beste formaat voor de taak. SVG domineert voor alles dat schaalt, animeert of gestyled wordt met code. PNG en zijn moderne varianten (WebP, AVIF) domineren voor fotografische en zeer complexe beelden.

De beslisboom is kort: vectorafbeelding → SVG. Foto → raster. Complexe illustratie → benchmark beide. Volg de codevoorbeelden hierboven, optimaliseer je assets, en je levert pagina's die snel, scherp en toekomstbestendig zijn.

Moet je tussen formaten converteren? VectoSolve handelt beide richtingen af — PNG naar SVG vectorisatie en SVG naar PNG export — zodat je altijd het juiste formaat bij de hand hebt.

Bronnen & verder lezen

• MDN Web Docs — SVG — Volledige formaatspecificatie voor het begrijpen van SVG-sterke punten en beperkingen
• web.dev — Google's handleiding voor beeldoptimalisatie met beslisschema's voor formaatkeuze
• CSS-Tricks: Using SVG — Praktijkvoorbeelden van wanneer SVG beter presteert dan PNG en omgekeerd
• W3C SVG 2 Specification — Technische specificatie die SVG-mogelijkheden verduidelijkt ten opzichte van rasterformaten