SVG vs. PNG vs. WebP: Welches Format ist das beste für Webgrafiken?
Die kurze Antwort (und warum es kompliziert ist)
Es gibt hier keinen alleinigen Gewinner. SVG, PNG und WebP haben jeweils eine spezielle Aufgabe, und die falsche Wahl wird dich teuer zu stehen kommen – in Form von aufgeblähten Dateigrößen, schlechter Bildqualität oder Kopfschmerzen bei der Browserkompatibilität. Ein Logo als 340 KB großes PNG auszuliefern, obwohl es ein 4 KB großes SVG hätte sein können, ist eine echte Performance-Bremse für deine Nutzer. Andererseits ist der Versuch, ein detailliertes Foto als SVG zu speichern, nicht nur ein theoretischer Fehler, sondern schlichtweg unbrauchbar, da SVG keine Möglichkeit hat, die Millionen von Pixeln eines Fotos darzustellen. Dieser Artikel schlüsselt jedes Format nach den Kriterien auf, die für Webprojekte wirklich zählen: Skalierbarkeit, endgültige Dateigröße, Browser-Support, Transparenz und die speziellen Aufgaben, bei denen jedes Format glänzt. Wir werden auch konkrete Workflows zur Konvertierung behandeln, einschließlich dessen, was du mit CocoConvert tun kannst und wo du dich möglicherweise nach anderen Tools umsehen musst.
SVG: Das richtige Tool für Logos, Icons und Illustrationen
SVG steht für Scalable Vector Graphics, aber was das wirklich bedeutet, ist: *keine Pixel*. Es ist ein XML-basiertes Format, das ein Bild durch mathematische Pfade und Formen beschreibt. Weil es nur reine Mathematik ist, wird ein SVG in jeder Größe gestochen scharf gerendert, von einem winzigen 16×16-Favicon bis hin zu einem 5K-Monitor. Das macht es zur einzig vernünftigen Wahl für Logos, Icons, Diagramme und jede Illustration, die aus klaren Linien und Formen besteht. Die Dateigrößen für einfache SVGs sind unglaublich klein. Ein typisches Firmenlogo kann nach der Optimierung nur 2–8 KB groß sein. Wenn du es durch einen Optimizer wie SVGO laufen lässt (den CocoConvert automatisch für SVG-Exporte verwendet), kannst du oft weitere 20–40 % einsparen, indem du Müll aus dem Editor entfernst, Pfade kombinierst und die Dezimalgenauigkeit von sechs auf zwei Stellen reduzierst. Hier wird SVG erst richtig mächtig: Es unterstützt Interaktivität und Animationen durch CSS und JavaScript – etwas, das PNG und WebP nicht im Entferntesten können. Du kannst die Farbe eines Icons beim Hovern mit einer einzigen Zeile CSS ändern: `svg path { fill: #0057ff; }`. Diese Art von Flexibilität ist ein Game-Changer für moderne UI-Komponenten. Aber die Einschränkungen sind real. Denk nicht einmal daran, SVG für Fotos zu verwenden. Der Versuch, ein Foto als SVG zu exportieren, wird dir entweder eine gigantische, langsam ladende Datei oder ein posterisiertes, abstraktes Chaos bescheren. Da SVG-Dateien nur Text sind, legen sie außerdem deine Quellpfade offen – nicht ideal, wenn deine Illustration ein urheberrechtlich geschütztes Kunstwerk ist, das nicht einfach kopiert werden soll. Schließlich können extrem komplexe SVGs, wie eine detaillierte Karte mit Tausenden von einzelnen Knoten, für einen Browser tatsächlich langsamer zu rendern sein als ein gut komprimiertes Rasterbild.
PNG: Verlustfreie Qualität, wenn jedes Pixel zählt
PNG, oder Portable Network Graphics, ist ein verlustfreies Rasterformat. Das bedeutet, es speichert jedes einzelne Pixel exakt so, wie es ist, ohne jegliche Kompressionsartefakte. Diese perfekte Wiedergabetreue ist der Grund, warum es der Standard für Screenshots, UI-Mockups und alle Bilder mit scharfem Text ist, bei denen du pixelgenaue Präzision und saubere Transparenz benötigst. Der 8-Bit-Alphakanal von PNG bietet 256 Transparenzstufen, was dir weiche Kanten ermöglicht. Der Kompromiss ist die Dateigröße. Ein 1200×800 großer Screenshot als PNG kann leicht 800 KB bis 1,2 MB groß sein. Die DEFLATE-Kompression von PNG ist verlustfrei, aber nicht sehr aggressiv. Bei Fotos sind PNGs durchweg zwei- bis viermal größer als JPEGs oder WebPs bei gleicher visueller Qualität. PNG glänzt wirklich in Workflows, die mehrere Bearbeitungsschritte erfordern. Da es verlustfrei ist, kannst du eine PNG-Datei hundertmal öffnen, bearbeiten und erneut speichern, ohne ihre Qualität zu verschlechtern. Jeder, der schon einmal zugesehen hat, wie ein JPEG sich nach ein paar Speicherungen in ein Artefakt-Chaos verwandelt, kennt diesen Schmerz. Wenn du ein Asset erstellst, das später von jemand anderem bearbeitet wird – wie ein UI-Element, das ein Entwickler zuschneiden soll – ist PNG das sicherste Format für die Übergabe. Dir werden die Begriffe 'PNG-8' und 'PNG-24' begegnen. PNG-8 ist auf 256 Farben beschränkt (wie ein GIF) und eignet sich für einfache, flächige Grafiken. PNG-24 unterstützt 16 Millionen Farben plus den vollen Alphakanal für Transparenz. Die meisten Tools verwenden standardmäßig PNG-24. Wenn du aus CocoConvert exportierst, wird eine PNG-24-Datei erzeugt, es sei denn, das Quellbild hat eine einfache Farbpalette; in diesem Fall könnte automatisch PNG-8 verwendet werden, um die Dateigröße zu optimieren. Die größte Schwäche von PNG ist die fehlende native Unterstützung für Animationen. Obwohl animierte PNGs (APNG) existieren, ist der Tool-Support lückenhaft. Für Animationen bist du mit WebP oder idealerweise einer SVG/CSS-Animation besser dran.
WebP: Das moderne Arbeitspferd der Kompression
WebP wurde bereits 2010 von Google entwickelt, hatte aber einen langen Weg zur breiten Akzeptanz. Es schaffte den Durchbruch schließlich, als Safari 14 um 2020 die Unterstützung hinzufügte. Mitte 2026 unterstützen alle großen Browser – Chrome, Firefox, Safari und Edge – WebP, was laut caniuse.com-Daten etwa 97 % der weltweiten Nutzer abdeckt. WebP ist ein Alleskönner, der sowohl verlustbehaftete als auch verlustfreie Kompression, Transparenz und sogar Animationen unterstützt. Es kann JPEG, PNG und GIF für die meisten Web-Anwendungen effektiv ersetzen. Seine Kompression ist das Highlight: Verlustbehaftete WebP-Bilder sind bei gleicher visueller Qualität typischerweise 25–35 % kleiner als JPEGs, während verlustfreie WebPs etwa 26 % kleiner als PNGs sind. Das sind nicht nur Marketing-Zahlen; sie stammen aus Googles groß angelegten Tests und werden durch unabhängige Benchmarks bestätigt. Machen wir es praktisch: Ein 180 KB großes Hero-Image, das als JPEG gespeichert wurde, wird bei Qualität 80 vielleicht zu einem 130 KB großen, verlustbehafteten WebP. Erhöhe die Qualität auf 85, und es sind vielleicht 145 KB – immer noch kleiner und mit noch besseren Details. Diese Einstellungen findest du in den WebP-Optionen von CocoConvert unter dem Schieberegler 'Ausgabequalität'. Ein Wert von 75–85 ist ein großartiger Ausgangspunkt für Fotos, während du ihn bei UI-Assets, bei denen Schärfe entscheidend ist, auf über 90 erhöhen könntest. Natürlich ist WebP nicht perfekt. Zunächst einmal ist es ausschließlich für Bildschirme gedacht; die fehlende CMYK-Unterstützung macht es für Druck-Workflows unbrauchbar. Es hatte auch Anlaufschwierigkeiten mit älterer Software – Adobe Photoshop bekam erst mit CC 2022 native Unterstützung. Bei einfachen, flächigen Grafiken ist sein Vorteil gegenüber PNG minimal, und bei Logos und Icons ist SVG immer noch der unangefochtene König der kleinen Dateigrößen.
Direkter Vergleich: Dateigröße und Qualitäts-Benchmarks
Abstrakte Vergleiche bringen uns nur bedingt weiter. Hier siehst du, wie die drei Formate in zwei repräsentativen Testfällen abschneiden. **Test 1: Ein Firmenlogo (flache Farben, transparenter Hintergrund, 400×200 px)** - SVG (SVGO-optimiert): 3,8 KB - PNG-24: 12,4 KB - WebP verlustfrei: 9,1 KB - WebP verlustbehaftet (Qualität 90): 7,2 KB (mit leichtem Color Banding an scharfen Kanten) Bei einem Logo gewinnt SVG mit großem Abstand. Verlustfreies WebP ist eine gute zweite Wahl, falls SVG aus irgendeinem Grund keine Option ist. PNG ist am größten, bietet aber perfekte Wiedergabetreue. **Test 2: Ein Produktfoto (Vollfarbe, keine Transparenz, 1200×800 px)** - SVG: Nicht anwendbar (kann fotografische Daten nicht sinnvoll darstellen) - PNG-24: 1,14 MB - JPEG (Qualität 85): 187 KB - WebP verlustbehaftet (Qualität 80): 134 KB - WebP verlustbehaftet (Qualität 75): 108 KB (leichte Unschärfe bei genauer Betrachtung sichtbar) Bei Fotos ist WebP der klare Sieger in Sachen Dateigröße. Ein so großes PNG sollte nur als Master-Datei für die weitere Bearbeitung verwendet werden, niemals auf einer Live-Webseite. Hier ist eine praktische Einschränkung bei CocoConvert, die du kennen solltest: Du kannst nicht in einem einzigen Exportvorgang eine WebP-Version und ein PNG-Fallback erzeugen. Du musst zwei separate Konvertierungen durchführen und dann das HTML-Element `<picture>` selbst implementieren, um das richtige Format auszuliefern. Das ist eine Lücke im Workflow, und es ist besser, das jetzt zu wissen, als es mitten im Projekt herauszufinden.
Browser-Support, Fallbacks und das <picture>-Element
SVG und PNG werden seit über einem Jahrzehnt von allen Browsern unterstützt. Du musst dir keine Gedanken über Fallbacks machen. WebP wird inzwischen auch breit unterstützt, aber du könntest auf Lücken stoßen, wenn du Nutzer mit alten Unternehmensbrowsern oder Legacy-Apps mit eingebetteten Web-Ansichten unterstützen musst. Die Standardlösung ist das elegante HTML-Element `<picture>`. Es erlaubt dir, mehrere Quellen aufzulisten, und der Browser wählt einfach die erste aus, die er versteht. ```html <picture> <source srcset="hero.webp" type="image/webp"> <img src="hero.png" alt="Product hero image"> </picture> ``` Der Browser liest von oben nach unten und verwendet die erste unterstützte Quelle. Dieses Muster verursacht keinen nennenswerten Mehraufwand und verschafft dir die Performance-Vorteile von WebP mit der felsenfesten Zuverlässigkeit von PNG als Sicherheitsnetz. Bei SVG ist die größte Kompatibilitätsfalle nicht der Browser, sondern E-Mail-Clients. Die Unterstützung für SVG in HTML-E-Mails ist eine Katastrophe; Outlook unter Windows zeigt einfach nur ein kaputtes Bild an. Im Ernst, verwende keine SVGs in E-Mail-Templates. Nimm einfach ein PNG und erspare dir die Support-Tickets. Für Webseiten und Apps ist SVG absolut sicher. Eine kurze Anmerkung zu SVG und der Content Security Policy (CSP): Wenn du ein SVG direkt in dein HTML einbettest, erbt es die CSP der Seite. Wenn du es als externe Datei über einen `<img>`-Tag lädst, kann es keine Skripte ausführen. Das ist ein Sicherheitsfeature. Wenn dein SVG mit JavaScript interaktiv sein soll, musst du es entweder inline in das HTML einfügen oder es über einen `<object>`-Tag laden.
Die richtige Wahl treffen: Eine Entscheidungshilfe
Nach all den Benchmarks und Vorbehalten sieht der praktische Entscheidungsbaum so aus: **Verwende SVG, wenn:** Die Grafik ein Logo, Icon, Diagramm oder eine andere Illustration aus Formen und Pfaden ist. Du eine Vektor-Quelldatei aus einem Tool wie Illustrator, Figma oder Inkscape hast. Es auf jeder Bildschirmdichte scharf aussehen soll, ohne separate @2x- und @3x-Assets zu erstellen. Du Farben steuern oder Hover-Effekte mit CSS hinzufügen möchtest. **Verwende PNG, wenn:** Das Bild ein UI-Screenshot ist oder scharfen Text enthält, bei dem eine verlustbehaftete Kompression furchtbar aussehen würde. Du Transparenz benötigst und WebP nicht verwenden kannst. Die Datei eine verlustfreie Master-Datei für zukünftige Bearbeitungen sein muss. Du Assets für eine E-Mail-Kampagne oder an einen Kunden sendest, der möglicherweise keine moderne Bildbearbeitungssoftware hat. **Verwende WebP, wenn:** Das Bild ein Foto oder eine andere komplexe Rastergrafik für eine moderne Website ist. Deine oberste Priorität das bestmögliche Verhältnis von Dateigröße zu Qualität ist. Du das `<picture>`-Element für Fallbacks implementieren kannst oder dein CMS/CDN (wie Cloudflare Images, Imgix oder Cloudinary) dies für dich erledigt, indem es WebP automatisch an Browser ausliefert, die es unterstützen. Um zwischen diesen Formaten in CocoConvert zu konvertieren, lade einfach deine Datei hoch, wähle dein Zielformat aus dem Dropdown-Menü und lade es herunter. Wenn du zu WebP konvertierst, kannst du den Regler 'Ausgabequalität' anpassen – der Standardwert von 85 ist ein guter Ausgangspunkt für Fotos. Für Stapelverarbeitungen, wie die Konvertierung eines ganzen Ordners von PNGs in WebP, unterstützt der Pro-Plan bis zu 50 Dateien auf einmal. Die SVG-Optimierung erfolgt bei allen SVG-Exporten automatisch, du musst also nichts konfigurieren. Es gibt einen Fall, in dem keines dieser Formate die beste Wahl ist: Animationen. Es ist an der Zeit, es auszusprechen: Für den produktiven Einsatz im Web ist GIF tot. Trotz seiner kulturellen Langlebigkeit erzeugt es Dateien, die 3- bis 5-mal größer sind als eine WebP-Animation. Für kurze, einfache Loops, verwende CSS-Animationen (kein Bild-Overhead). Für komplexe Vektor-Motion-Graphics, nutze eine Lottie/SVG-Animation. Verwende WebP-Animationen nur als letzte Rettung für Raster-Inhalte.