PNG vs. WebP vs. AVIF: Das richtige Bildformat wählen in 2026
Sie laden ein Bild auf Ihre Website hoch und stehen sofort vor einer Frage ohne universal richtige Antwort: In welchem Format soll es sein? PNG ist überall und funktioniert immer. WebP schneidet ein Drittel der Dateigröße ab. AVIF komprimiert noch tiefer, kodiert aber langsam. JPEG XL lauert am Horizont. Und dabei sinkt Ihr Lighthouse-Score, weil Sie aus Gewohnheit statt mit Absicht entschieden haben.
Dieser Leitfaden bringt Klarheit. Am Ende wissen Sie genau, welches Format Sie greifen sollten — und warum — basierend auf Ihrem Inhaltstyp, Ihrer Zielgruppe und Ihren Performance-Anforderungen.
Die Formate auf einen Blick
Bevor wir uns einzelne Kompromisse ansehen, hier eine Seite-an-Seite-Referenz der in diesem Artikel behandelten Formate.
Browser-Unterstützungszahlen sind Näherungswerte für Anfang 2026 auf Basis von Can I Use-Daten.
JPEG: Die universelle Referenz
JPEG ist seit Mitte der 1990er Jahre das Standardformat für Fotografien im Web. Diese Langlebigkeit ist sowohl seine Stärke als auch seine Grenze.
Was JPEG gut macht
JPEG verwendet DCT-Kompression (Diskrete Kosinustransformation), um visuelle Informationen zu verwerfen, für die das menschliche Auge am wenigsten empfindlich ist. Für Bilder mit kontinuierlichen Tönen — Fotografien, Verläufe, gerenderte 3D-Szenen — funktioniert das ausgezeichnet. Bei Qualitätseinstellungen um 75–85 sind JPEG-Bilder für die meisten Betrachter kaum vom Original zu unterscheiden.
Browser-Unterstützung ist faktisch 100 %. Jeder E-Mail-Client, jede Social-Media-Plattform, jedes Gerät der Welt liest JPEG problemlos.
Wo JPEG versagt
JPEG kann keinen transparenten (Alpha-)Kanal speichern. Jedes Bild, das einen durchsichtigen Hintergrund benötigt — ein Logo auf einer farbigen Karte, ein Produktbild auf unbekanntem Hintergrund — kann nicht JPEG sein.
JPEG behandelt auch scharfe Kanten und einfarbige Flächen schlecht. Komprimieren Sie einen Code-Screenshot oder ein Diagramm mit klarem Text, und Sie sehen blockartige Artefakte an jeder Kante. Für alles mit starken Kontrastübergängen ist JPEG das falsche Werkzeug.
Für als PNG statt JPEG gespeicherte Fotos ist die Größenstrafe erheblich: PNG-Dateien für Fotos sind routinemäßig 5–10× größer als ihre JPEG-Entsprechungen, ohne wahrnehmbaren Qualitätsvorteil.
PNG: Verlustfreie Präzision, wenn es darauf ankommt
PNG (Portable Network Graphics) speichert jeden Pixel exakt so, wie er gespeichert wurde. Nichts geht verloren. Der Kompromiss ist die Dateigröße — PNG verwendet verlustfreie Kompression, was bedeutet, dass Bilder mit komplexer Farbvariation (Fotos) groß bleiben.
Was PNG gut macht
PNG ist das richtige Format, wenn pixelgenaue Wiedergabetreue wichtig ist:
- Logos und Markenzeichen — scharfe Kanten, flache Farben, Transparenz für die Platzierung auf beliebigem Hintergrund
- Screenshots — UI-Elemente, Code-Snippets und Text, die bei jedem Zoom-Level scharf gerendert werden
- Diagramme und Illustrationen — Charts, Flussdiagramme, Icon-Sets mit definierten Kanten
- Bilder, die erneut bearbeitet werden — jedes Speichern eines JPEG rekomprimiert und verschlechtert die Qualität; PNG wird verlustfrei übertragen
PNG unterstützt auch vollständige Alpha-Transparenz, was bedeutet, dass Sie halbtransparente Pixel haben können, nicht nur Ein/Aus-Masken. Das ist wichtig für Schlagschatten, Glüheffekte und geglättete Kanten an nicht-rechteckigen Formen.
Wo PNG versagt
Speichern Sie kein Foto als PNG, wenn Sie es im Web bereitstellen möchten. Ein hochauflösendes DSLR-Foto könnte als JPEG mit Qualität 85 3 MB und als PNG 25 MB groß sein. Weder der Nutzer noch Ihre Bandbreitenrechnung wird diese Entscheidung schätzen. Für fotografische Inhalte ist PNG fast immer das falsche Format.
WebP: Der praktische Allrounder
Google führte WebP 2010 ein und verbrachte das folgende Jahrzehnt damit, es in jeden Browser zu integrieren. Stand 2026 liegt die weltweite Browser-Unterstützung bei etwa 97 %, was für praktische Zwecke bedeutet, dass Sie es ohne Fallback für die meisten Zielgruppen verwenden können.
Die Kompressionszahlen
Googles ursprüngliche Forschung, die WebP mit JPEG bei gleichwertigem SSIM-Qualitätswert vergleicht, ergab, dass WebP 25–34 % kleiner als JPEG ist. Unabhängige Studien haben seitdem bestätigt, dass dieser Bereich über verschiedene Bildsammlungen hinweg gilt. Für eine Website, die monatlich tausende Bilder ausliefert, schlägt diese Reduktion direkt in niedrigere CDN-Kosten und schnellere Ladezeiten durch.
WebP unterstützt sowohl verlustbehaftete als auch verlustfreie Modi, was es in den meisten Situationen zu einem echten Ersatz für JPEG (verlustbehafteter Modus) und PNG (verlustfreier Modus) macht. Entscheidend ist, dass es auch in beiden Modi vollständige Alpha-Transparenz unterstützt — etwas, das JPEG überhaupt nicht kann.
Wann WebP verwendet werden sollte
- Allgemeine Web-Bilder, bei denen breite Kompatibilität Priorität hat
- JPEG ersetzen für Produktfotos, redaktionelle Bilder und Hero-Bilder
- PNG ersetzen für Logos und Grafiken, bei denen Sie Transparenz mit kleinerem Footprint als PNG wünschen
- Jede Situation, in der Sie eine einzelne Formatentscheidung möchten, die für Ihre gesamte Bildbibliothek funktioniert
Um Bilder zu komprimieren zu WebP oder Bildformate zu konvertieren zwischen PNG, JPEG und WebP, können Sie das direkt im Browser tun, ohne etwas zu installieren.
Die Randfälle, in denen WebP unterdurchschnittlich abschneidet
WebPs verlustbehafteter Modus kann bei aggressiven Kompressionseinstellungen subtiles Banding in glatten Verläufen einführen — mehr als JPEG bei äquivalenten Dateigrößen. Für bestimmte fotografische Inhalte, insbesondere Hauttöne und Himmelverläufe, liefert AVIF bei gleicher Dateigröße sauberere Ergebnisse.
AVIF: Maximale Kompression, wachsende Unterstützung
AVIF (AV1 Image File Format) ist vom AV1-Video-Codec abgeleitet, der von der Alliance for Open Media entwickelt wurde. Es stellt einen generationellen Sprung in der Kompressionseffizienz dar.
Die Kompressionszahlen
Studien, die AVIF mit JPEG bei gleichwertiger visueller Qualität vergleichen, zeigen konsistent eine Dateigrößenreduktion von 50 % oder mehr. Ein 200-KB-JPEG kann oft als 90–100-KB-AVIF reproduziert werden, das bei normalen Betrachtungsabständen nicht zu unterscheiden ist. Netflix, das riesige Mengen an Thumbnail- und Vorschaubildern kodiert, hat Ergebnisse veröffentlicht, die zeigen, dass AVIF die Bildbandbreite um 50 % im Vergleich zu JPEG reduziert.
Für die Auslieferung hochvolumiger Bilder — E-Commerce-Produktkataloge, Social-Media-Plattformen, nachrichtenintensive Websites — sind diese Einsparungen nicht marginal. Sie wirken sich spürbar auf CDN-Ausgaben und Seitenladezeiten aus.
HDR und Wide-Color-Gamut-Unterstützung
AVIF unterstützt nativ HDR (High Dynamic Range) und Wide Color Gamuts wie Display P3. Auf kompatiblen Displays können AVIF-Bilder hellere Lichter und tiefere Schatten zeigen als SDR-Formate. Für Fotografie-Showcases, Design-Portfolios und jede Website, bei der Bildtreue auf Premium-Displays wichtig ist, ist das ein bedeutender Differenzierungsfaktor.
Das Problem der Kodiergeschwindigkeit
AVIFs Schwäche ist die Kodierzeit. Im Vergleich zu JPEG oder WebP ist AVIF-Kodierung deutlich langsamer — bei gleichwertigen Qualitätseinstellungen oft 5–10× langsamer. Für Build-Pipelines, die tausende von Bildern verarbeiten, summiert sich das. Die meisten Teams mildern dies, indem sie AVIF zur Build-Zeit oder als einmaligen Batch-Job kodieren, nicht auf Abruf.
Die Dekodiergeschwindigkeit (was der Browser beim Rendern des Bildes macht) ist schnell und auf moderner Hardware kein nutzerseitiges Problem.
Browser-Unterstützung in 2026
Die AVIF-Unterstützung liegt laut früher 2026 bei etwa 93 % der Browser, was bedeutet, dass Sie für vollständige Abdeckung immer noch ein WebP- oder JPEG-Fallback bereitstellen sollten. Das Standardmuster lautet:
<picture>
<source srcset="image.avif" type="image/avif" />
<source srcset="image.webp" type="image/webp" />
<img src="image.jpg" alt="Beschreibung" />
</picture>Dieser Progressive-Enhancement-Ansatz bedeutet, dass AVIF-fähige Browser die kleinste Datei erhalten, WebP-fähige Browser einen soliden Mittelweg, und alles andere auf JPEG zurückfällt.
JPEG XL: Es lohnt sich, es zu beobachten — noch nicht bereit
JPEG XL (.jxl) ist das technisch leistungsfähigste Format in dieser Liste. Es entspricht AVIF oder übertrifft es in Sachen Kompression, unterstützt verlustfreies Neu-Kodieren bestehender JPEG-Dateien ohne Qualitätsverlust (was es einzigartig nützlich für die Archivierung macht) und verarbeitet HDR, Wide Color Gamut und Animationen. Das JPEG-Komitee hat es als langfristigen Ersatz für das gesamte JPEG-Ökosystem konzipiert.
Das Problem ist die Browser-Unterstützung. Stand Anfang 2026 befindet sich JPEG XL in den meisten Browsern hinter experimentellen Flags und ist nirgendwo außer Safari standardmäßig aktiviert (das 2022 Unterstützung hinzugefügt hat). Chromium entfernte seine experimentelle Unterstützung 2022, obwohl die Debatte im Chromium-Issue-Tracker aktiv bleibt.
Unsere Empfehlung: Verwenden Sie JPEG XL heute nicht für die Web-Auslieferung. Beobachten Sie es. Wenn Sie eine Archivierungspipeline für Fotografie aufbauen oder mit Apple-Ökosystem-Apps arbeiten, verdient es Aufmerksamkeit. Für produktive Web-Arbeit ist AVIF + WebP-Fallback jetzt die richtige Kombination.
Der Entscheidungsbaum
Nutzen Sie dies für eine schnelle Formatentscheidung.
Benötigen Sie Transparenz?
Ja — Verwenden Sie WebP (verlustfreier Modus) als Ihr primäres Format. Es gibt Ihnen Transparenz mit kleineren Dateien als PNG. Wenn Sie pixelgenaue verlustfreie Treue benötigen (Logos, die für den Druck wiederverwendet werden, Quelldateien), verwenden Sie PNG. JPEG ist keine Option.
Nein — Weiter unten.
Ist es ein Foto oder eine Grafik?
Foto (kontinuierliche Töne, komplexe Farben):
- Wenn Sie die breitest mögliche Browser-Unterstützung benötigen: JPEG
- Wenn Sie deutlich kleinere Dateien mit nahezu universeller Unterstützung möchten: WebP (verlustbehafteter Modus)
- Wenn Sie für Bandbreite im großen Maßstab optimieren und ein Fallback bereitstellen können: AVIF mit WebP-Fallback
Grafik (Logo, Diagramm, Screenshot, Text):
- Verwenden Sie WebP (verlustfreier Modus) oder PNG, je nachdem, ob Dateigröße oder Tool-Kompatibilität wichtiger ist
- Verwenden Sie niemals JPEG für Grafiken mit scharfen Kanten oder einfarbigen Flächen
Liefern Sie im großen Maßstab aus?
Wenn Ihre Website mehr als einige tausend Bildanfragen pro Tag liefert, wird die Kompressionslücke zwischen JPEG und AVIF in echten Kosten signifikant. Implementieren Sie das <picture>-Element mit AVIF + WebP + JPEG-Fallbacks. Der Engineering-Aufwand ist gering; die Infrastrukturersparnis wächst über die Zeit.
Kurzreferenz-Zusammenfassung
Zwischen Formaten konvertieren
Die meisten Bildbearbeitungsprogramme exportieren alle vier hier behandelten Formate. Für Web-Entwickler, die Batches von Dateien programmatisch konvertieren müssen:
ImageMagick (Kommandozeile):
# JPEG in WebP konvertieren
magick input.jpg -quality 82 output.webp
# JPEG in AVIF konvertieren
magick input.jpg -quality 60 output.avif
# PNG in WebP verlustfrei konvertieren
magick input.png -define webp:lossless=true output.webpSquoosh (browserbasiert): Googles Squoosh-App ermöglicht den Formatvergleich nebeneinander mit Qualitätsschieberegler und Live-Dateigrößenvorschau — nützlich zum visuellen Kalibrieren von Kompressionseinstellungen vor einer Batch-Konvertierung.
FileCrank: Sie können Bildformate konvertieren direkt in Ihrem Browser ohne Installation — nützlich für Einzelkonvertierungen oder wenn Sie auf einem Rechner ohne lokales Tooling arbeiten.
Für die Massenverarbeitung und Größenreduktion erledigt das Bildkomprimierungstool Formatkonvertierung und Qualitätsoptimierung in einem Schritt.
Die Beziehung zwischen Formatwahl und Kompression
Die Wahl des richtigen Formats ist nur die halbe Miete. Zwei WebP-Dateien bei unterschiedlichen Qualitätseinstellungen können bei kaum sichtbarem Unterschied um den Faktor 3 in der Dateigröße variieren. Wenn Sie tiefer in die Qualitäts-Größen-Kalibrierung einsteigen möchten, behandelt der Artikel über Bilder komprimieren ohne Qualitätsverlust die praktischen Mechanismen von Qualitätseinstellungen, progressivem Laden und Wahrnehmungsqualitätsmetriken wie SSIM und DSSIM.
Für eine grundlegende Erklärung, warum verlustbehaftete und verlustfreie Kompression so unterschiedliche Ergebnisse erzeugen und wann jeder Ansatz angemessen ist, lesen Sie verlustbehaftete vs. verlustfreie Dateikonvertierung erklärt.
Fazit
Die Formatentscheidung hängt von drei Fragen ab: Brauche ich Transparenz? Ist es ein Foto oder eine Grafik? Optimiere ich für maximale Kompression?
Für die meisten modernen Web-Projekte in 2026 lautet die praktische Antwort:
- WebP als Ihr Standardformat — es verarbeitet Transparenz, funktioniert sowohl im verlustbehafteten als auch verlustfreien Modus, hat nahezu universelle Browser-Unterstützung und ist 25–34 % kleiner als JPEG
- AVIF dort, wo Bandbreiteneinsparungen am wichtigsten sind — mit einem WebP- oder JPEG-
<picture>-Fallback für die verbleibenden 7 % der Browser - PNG nur wenn verlustfreie Präzision oder Tool-Kompatibilität es spezifisch erfordert
- JPEG als letzter Ausweg und nach wie vor die richtige Wahl für E-Mail
Entscheiden Sie basierend auf Inhaltstyp und Auslieferungskontext, nicht aus Gewohnheit. Der Unterschied zwischen einem 200-KB-AVIF und einem 600-KB-PNG desselben Bildes ist für Benutzer unsichtbar, aber sehr sichtbar in Ihren Seitenladezeiten und Infrastrukturkosten.
Bereit, es in die Praxis umzusetzen? Konvertieren Sie Ihre Bilder zu WebP oder AVIF, oder komprimieren Sie bestehende Bilder, um zu sehen, wie viel Größe Sie aus Ihren aktuellen Formatentscheidungen zurückgewinnen können.