PNG vs. JPG vs. WebP vs. SVG: Wie Sie jedes Mal das richtige Bildformat wählen

Nur wenige Entscheidungen in der Webentwicklung werden so sorglos getroffen wie die Wahl des Bildformats — und nur wenige haben einen so überproportionalen Einfluss auf das Seitengewicht. Ein Hero-Foto als PNG gespeichert kann zehnmal schwerer sein als dasselbe Bild als WebP; ein als JPG gespeichertes Logo kommt zugleich unscharf und aufgebläht heraus. Die gute Nachricht: Die Wahl ist keine Geschmacksfrage. Jedes Format beruht auf einer bestimmten Kompressionsidee, und wer diese Ideen versteht, für den ist die richtige Antwort meist in Sekunden offensichtlich. Diese Anleitung erklärt die vier Formate, die etwa 99 % der Web-Nutzung abdecken, und gibt Ihnen einen passenden Entscheidungsprozess.

Die eine Unterscheidung, die das meiste entscheidet: verlustbehaftet vs. verlustfrei

Jedes Rasterformat beruht auf einem von zwei Geschäften:

Verlustfreie Kompression (PNG und der verlustfreie Modus von WebP) verkleinert die Datei und garantiert, dass jeder Pixel exakt rekonstruiert werden kann. Sie funktioniert, indem sie statistische Redundanz findet — Läufe gleicher Farbe, wiederholte Muster —, glänzt also bei Bildern mit flachen Farben und scharfen Kanten und verschwendet Bytes bei verrauschten, fotografischen Daten.
Verlustbehaftete Kompression (JPG, WebP im Standardmodus) verwirft dauerhaft Informationen, die das Auge am ehesten übersieht — vor allem feine Farbdetails —, im Tausch gegen drastische Größeneinsparungen. Qualität ist ein Regler: mehr Kompression, mehr Artefakte.

Eine dritte Kategorie ist überhaupt keine Kompression: SVG ist Vektor — eine Textdatei, die Formen beschreibt („hier ein Kreis, dort ein Pfad“) statt Pixel. Es skaliert verlustfrei auf jede Größe und ist für geometrische Grafik winzig, kann aber ein Foto überhaupt nicht darstellen.

JPG: Der Fotografie-Spezialist

JPGs Kompression (DCT auf 8×8-Blöcken, für Neugierige) wurde in den 90ern speziell für Halbton-Fotoinhalte entworfen und ist genau dafür noch immer hervorragend. Die Schwächen sind die Kehrseite des Designs:

Scharfe Kanten und Text entwickeln sichtbares „Moskito-Rauschen“ — die Höfe, die Sie um Buchstaben in einem als JPG gespeicherten Screenshot sehen.
Wiederholtes Speichern verschlechtert: Jede Neukodierung wirft mehr Daten weg, nutzen Sie JPG also nie als Arbeitsformat.
Keine Transparenz — den Alphakanal gibt es in JPG nicht.

Nutzen Sie JPG für: Fotos, Verläufe, jedes Bild mit reichen Halbtönen, wenn Sie maximale Kompatibilität brauchen (jeder Client, der je gebaut wurde, liest es).

PNG: Pixelgenau, zu einem Preis

PNG ist verlustfrei, unterstützt volle Alpha-Transparenz und rendert Text, UI-Elemente und Strichzeichnungen mit haarscharfen Kanten. Für Screenshots, Diagramme, Icons, die scharf bleiben müssen, und alles, was einen transparenten Hintergrund braucht, ist es die klassische Antwort.

Der Preis ist die Größe bei fotografischem Inhalt: Ein PNG-Foto ist routinemäßig 5–10× so groß wie das JPG-Äquivalent, weil statistische Redundanz in verrauschten Daten rar ist. PNG hat außerdem einen Palettenmodus (PNG-8, bis 256 Farben), der einfache Grafiken drastisch verkleinern kann — gut zu wissen, bevor man annimmt, PNG bedeute groß.

WebP: Der moderne Standard

WebP (Google, 2010) kann sowohl verlustbehaftet als auch verlustfrei komprimieren, unterstützt Alpha in beiden Modi und sogar Animation — und schlägt seine Vorgänger in deren eigenen Disziplinen: rund 25–35 % kleiner als JPG bei gleicher visueller Qualität und ~25 % kleiner als PNG verlustfrei. Die Browser-Unterstützung ist seit 2020 universell.

Die praktische Schlussfolgerung: WebP sollte heute Ihr Standard-Rasterformat fürs Web sein. Die verbleibenden Gründe, JPG oder PNG auszuliefern, sind Alt-Tooling, E-Mail-Clients (ein Kompatibilitäts-Minenfeld — dort bei JPG/PNG bleiben) und Zielgruppen auf wirklich uralten Browsern. Eine bestehende Bibliothek umzuwandeln ist mit dem Bildformat-Konverter pro Datei ein Ein-Befehl-Job, und ist die Dateigröße statt des Formats das Problem, handelt der Bildkompressor Qualität gegen Bytes interaktiv aus, sodass Sie die Artefaktschwelle selbst sehen.

SVG: Unendliche Auflösung für geometrische Kunst

Logos, Icons, Diagramme, Illustrationen: Besteht das Kunstwerk aus Formen statt eingefangenem Licht, gewinnt SVG jeden Vergleich — ein 2-KB-Vektorlogo bleibt auf einem 5K-Display scharf und lässt sich mit CSS stylen und mit JS animieren. Der Haken: SVG ist Code — ein SVG aus nicht vertrauenswürdiger Quelle kann Skripte tragen, bereinigen Sie also, bevor Sie Fremddateien inline einbetten, und akzeptieren Sie nie rohe SVG-Uploads ohne Filterung.

Wenn Sie doch Pixel brauchen — Social-Media-Vorschaukarten, PNG-Fallbacks, Design-Übergabe —, rendert der SVG-zu-PNG-Konverter Vektoren in jeder benötigten Auflösung in Raster.

(Zur Vollständigkeit: AVIF komprimiert noch besser als WebP und hat solide moderne Unterstützung, aber das Kodieren ist langsamer und die Randunterstützung dünner — lohnt sich hinter einem <picture>-Fallback, sobald WebP ohnehin steht.)

Der 10-Sekunden-Entscheidungsprozess

Besteht es aus Formen (Logo, Icon, Diagramm, Illustration)? → SVG.
Ist es ein Foto oder ein reicher Verlauf? → WebP (JPG nur für Alt-/E-Mail-Kompatibilität).
Braucht es Transparenz? → WebP oder PNG; SVG, wenn Vektor.
Ist es ein Screenshot, Diagramm oder textlastiges Bild? → PNG (oder verlustfreies WebP).
Geht es an E-Mail oder uralte Browser? → JPG für Fotos, PNG für alles Scharfe.

Zwei abschließende Faustregeln: Passen Sie zuerst das Format an den Inhalt an, dann justieren Sie die Kompression — das falsche Format härter zu komprimieren macht eine große, hässliche Datei nur kleiner und hässlicher. Und bewahren Sie irgendwo ein verlustfreies Master auf: Aus einem perfekten Original können Sie immer eine kleinere Ableitung erzeugen, nie umgekehrt.

Kurzreferenz

Fotos/Verläufe: WebP, Fallback JPG.
Screenshots, Text, Strichzeichnungen: PNG oder verlustfreies WebP.
Logos/Icons/Diagramme: SVG — unendliche Skalierung, winzige Dateien; nicht vertrauenswürdige Dateien bereinigen.
Transparenz: PNG, WebP (beide Modi), SVG — nie JPG.
JPG neu zu kodieren ist jedes Mal verlustbehaftet — nie als Arbeitsformat nutzen.
Standard für neue Web-Arbeit: WebP; für E-Mail: JPG/PNG.