PNG vs SVG für Web-Performance: Dateigröße, Ladegeschwindigkeit und Core Web Vitals (2026)

PNG vs SVG: Der definitive technische Vergleich für 2025

Jedes Bild, das Sie ausliefern, ist eine Engineering-Entscheidung. Raster oder Vektor? 45 KB oder 3 KB? Diese Entscheidungen summieren sich über Tausende von Seiten und Millionen von Anfragen. Dies ist der Referenzleitfaden, der die PNG-vs-SVG-Debatte klärt — mit Komprimierungs-Benchmarks, Rendering-Analyse, Lighthouse-Scores und produktionsfertigem Code.

"Der Unterschied zwischen einem guten Frontend und einem großartigen misst sich in den Hunderten von Bildformat-Entscheidungen, die niemand je sieht."

Komprimierungsalgorithmen: So funktioniert jedes Format

PNG: DEFLATE + Filterung

PNG verwendet eine zweistufige Pipeline. Jede Scanline durchläuft einen von fünf Vorhersagefiltern (None, Sub, Up, Average, Paeth), die die Pixel-zu-Pixel-Korrelation ausnutzen. Die gefilterten Bytes werden mit DEFLATE (LZ77 + Huffman-Codierung) komprimiert. Da DEFLATE auf einem Byte-Stream arbeitet, ist die PNG-Komprimierung durch räumliche Redundanz begrenzt: Einfarbige Regionen komprimieren gut; rauschreiche Fotografien schrumpfen kaum.

• Komprimierungsverhältnis bei flachen Icons: 10:1–20:1
• Komprimierungsverhältnis bei Fotografien: 1,5:1–3:1
• Dekomprimierungskosten: ~0,8 ms/Megapixel auf einem Mittelklasse-Mobil-SoC

SVG: Textkomprimierung + SVGO

SVG ist XML. Nicht optimierte Illustrator-Exporte enthalten Metadaten, Editor-Artefakte und redundante Genauigkeit. SVGO entfernt diesen Ballast — typischerweise eine Reduktion von 40–70 % vor gzip. Über das Netzwerk mit Brotli schrumpft ein optimiertes 6-KB-SVG auf etwa 1,8 KB — kleiner als ein Base64-kodiertes Favicon.

Tiefenanalyse der Rendering-Pipeline

PNG-Rendering-Pfad

1. Abruf — Die HTTP-Antwort landet im Netzwerk-Buffer.
2. Dekodierung — Der Decoder entpackt die DEFLATE-Daten in ein rohes RGBA-Bitmap.
3. Rasterisierung — Das Bitmap wird als GPU-Textur hochgeladen.
4. Compositing — Der Compositor zeichnet die Textur an der CSS-Transformation des Elements.

Der Speicher ist fest: Breite x Höhe x 4 Bytes. Ein PNG mit 1920x1080 verbraucht ~8,3 MB GPU-Speicher unabhängig von Transparenz.

SVG-Rendering-Pfad

1. Abruf — Der XML-Payload kommt an (oft kleiner als eine einzelne PNG-Scanline).
2. Parsing — Der XML-Parser erstellt einen DOM-Unterbaum.
3. Stil — Die CSS-Kaskade wird angewendet; viewBox und preserveAspectRatio werden aufgelöst.
4. Zeichnen — Skia/Core Graphics tessellieren Pfade in Dreiecke bei der aktuellen Geräteauflösung.
5. Compositing — Das gerasterte Ergebnis wird wie jede andere Ebene in den Compositor eingespeist.

Der Speicher skaliert mit der Pfadkomplexität, nicht der Canvas-Größe. Ein 200-Knoten-Icon: ~60 KB. Eine illustrierte Karte mit 15 000 Knoten: mehrere MB mit möglichen Main-Thread-Blockaden.

Benchmark-Tabelle: 15 Praxisszenarien

Lighthouse-Benchmark-Daten (2025)

Getestet auf einer E-Commerce-Landingpage: 12 UI-Icons, 1 Logo, 3 Illustrationen, 4 Produktfotos. Simulation Moto G Power auf 4G.

Alles-PNG-Baseline:

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

Hybrid (SVG-Vektoren + WebP-Fotos):

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

Delta: +32 Performance-Punkte, -2,9s LCP, -84 % Bild-Payload — allein durch die Formatwahl.

Produktions-Code-Patterns

Responsives SVG mit 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 — KI-gestützte SVG-Tools"
       width="280" height="60" loading="eager" fetchpriority="high">
</picture>

Dichteumschaltung für Raster-Fallbacks

<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="Produktdashboard-Übersicht"
       width="1200" height="630" loading="lazy" decoding="async">
</picture>

Barrierefreiheit: Vergleich Seite an Seite

SVG ist architektonisch überlegen für Barrierefreiheit und WCAG 2.2 AA-Konformität.

Zukunftsformate: AVIF, WebP und darüber hinaus

• WebP — 25–35 % kleiner als PNG. 97 % Browser-Support. Die sichere Raster-Wahl für 2025.
• AVIF — 40–60 % kleiner als PNG. 92 % Support und steigend. Ideal für Fotografien.
• JPEG XL — Überlegene Komprimierung mit progressiver Dekodierung. Browser-Support ins Stocken geraten. Beobachtenswert.

Keines dieser Formate ersetzt SVG für Vektorinhalte. Die Gewinnerstrategie: SVG für Vektoren, AVIF/WebP für Raster, PNG als letzter Fallback.

Speicherverbrauch: Die versteckten Kosten

Auf speicherbeschränkten Mobilgeräten (2–3 GB geteilt über alle Tabs) ein 2048x2048 PNG-Hero auszuliefern, wenn ein 6-KB-SVG ausreichen würde, ist keine verpasste Optimierung — es ist ein Bug.

Fazit: Engineering-Entscheidungen, keine Formatkriege

Die PNG-vs-SVG-Frage ist keine Geschmackssache — es ist eine Engineering-Entscheidung mit messbaren Konsequenzen für Performance, Barrierefreiheit, Wartbarkeit und User Experience. SVG gewinnt bei Vektorinhalten in jeder Metrik, die 2025 zählt, während moderne Rasterformate wie AVIF und WebP das PNG für fotografische Inhalte abgelöst haben.

Prüfen Sie Ihre aktuellen Assets. Starten Sie Lighthouse. Messen Sie die Paint-Zeiten. Dann konvertieren Sie jedes geeignete PNG in SVG mit VectoSolves KI-gestützter Vektorisierung und beobachten Sie, wie Ihre Performance-Scores steigen. Das beste Bildformat ist das, das zum Inhalt passt — jetzt haben Sie die Benchmarks, um es zu beweisen.

Quellen und weiterführende Lektüre

• MDN Web Docs — SVG — Maßgebliche SVG-Referenz mit Browser-Kompatibilitätsdaten
• W3C SVG 2 Spezifikation — Offizieller Standard zu SVG-Fähigkeiten im Vergleich zu Rasterformaten
• web.dev — Performance-Benchmarks zum Einfluss von Bildformaten auf Core Web Vitals
• CSS-Tricks: Using SVG — Praxisbeispiele und Entscheidungsrahmen für die Wahl SVG vs Raster
• Smashing Magazine — Technische Tiefenanalysen zur Bildformat-Auswahl und Optimierung