PNG vs. JPG vs. WebP: welches Format gewinnt 2026 wirklich?

Wir sind in 2026 und PNG (1996), JPG (1992) und WebP (2010) sind alle noch in aktiver Produktion im Web im Einsatz. Das ist keine Faulheit – jedes belegt einen deutlich anderen Punkt im Kompromissdreieck aus Dateigröße vs. Qualität vs. Funktionsumfang, und sie alle durch ein Format zu ersetzen würde Informationen verlieren, die Sie tatsächlich erhalten möchten.

Das ist die längere Geschichte hinter unserem kürzeren Vergleich PNG vs. JPG, mit WebP ergänzt und der AVIF-Frage behandelt.

Das Kompromissdreieck

*APNG (animiertes PNG) existiert; die Unterstützung ist breit, aber das Format ist 2026 selten die richtige Wahl – WebP und AVIF beherrschen Animation beide besser.

Wo jedes gewinnt

JPG gewinnt, wenn

• Das Objekt ein Foto ist und Sie universelle Kompatibilität brauchen (Drucker, uralte E-Mail-Clients, eingebettete Vorschauleser).
• Das Objekt viele Speicherzyklen durchläuft – auch wenn jedes Speichern Qualität verliert, ist die JPG-Bearbeitung der am breitesten unterstützte Workflow in Bildeditoren.
• Irgendein veralteter Abnehmer Ihres Bildes nichts anderes verarbeitet – eingebettete Systeme, jahrzehntealte Druckereisoftware usw.

PNG gewinnt, wenn

• Das Objekt scharfe Kanten und flächige Farbbereiche hat (Screenshots, UI-Aufnahmen, Logos, Icons). Die verlustbehafteten Artefakte von JPG sind darauf gut sichtbar.
• Transparenz erforderlich ist und WebP keine Option ist (PDF-Einbettung, manche Druck-Workflows).
• Das Original verlustfrei hin- und herübertragen werden muss – ein erneutes Speichern eines PNG verschlechtert es nicht.

WebP gewinnt, wenn

• Das Ziel das Web ist und die Objekte Fotos oder fotoähnlich sind. 25–35 % kleiner als JPG bei gleichwertiger visueller Qualität.
• Sie Transparenz brauchen und die Datei auf eine Webseite kommt. WebPs verlustbehaftetes + Alpha ist unübertroffen – PNG mit Alpha ist riesig; AVIF ist noch kleiner, aber die Unterstützung schmaler.
• Sie Animation brauchen und Ihr Publikum moderne Browser nutzt. WebP-Animation ist kleiner und höherwertig als animiertes GIF.

AVIF gewinnt, wenn

• Sie bereit sind, langsam zu codieren für bessere Kompression. Die AVIF-Codierung kann 10- bis 100-mal langsamer sein als WebP, je nach Encoder. Das Decodieren ist schnell.
• Die 7%-Lücke der Browserunterstützung akzeptabel ist für Ihr Publikum.
• Das Bildgewicht überproportional zählt – E-Commerce-Hero-Bilder above the fold, Bildgalerien, mobile Nutzer mit kostenpflichtigen Verbindungen.

Der Entscheidungsbaum

1. Muss es in beliebigem Kontext dargestellt werden (E-Mail, eingebetteter Leser, Druck)? → JPG für Fotos, PNG für Grafiken.
2. Ist das Ziel strikt das Web UND Ihr Publikum modern? → WebP oder AVIF.
3. Fotoähnlicher Inhalt, Webziel, einfach zu codieren? → WebP.
4. Fotoähnlicher Inhalt, Webziel, bildlastige Seite, bereit langsam zu codieren? → AVIF.
5. UI / Logos / Screenshots? → PNG.
6. Animation? → WebP (oder animiertes GIF nur, wenn es sein muss).
7. Vektorgrafik, die ein Logo oder Icon ist? → SVG. Verwenden Sie gar kein Rasterformat.
8. Unter ~10 KB, einmal inline verwendet? → Base64-Daten-URI über unser Bild-zu-Base64-Tool.

Das picture-Element-Fallback-Muster

Für maximale Kompatibilität bei minimaler Dateigröße verwenden Sie das HTML-<picture>-Element mit Format-Fallbacks:

<picture>
  <source srcset="hero.avif" type="image/avif" />
  <source srcset="hero.webp" type="image/webp" />
  <img src="hero.jpg" alt="..." />
</picture>

Der Browser wählt das erste unterstützte Format. Modernes Chrome erhält AVIF; Safari 14+ erhält WebP; die 3 % auf alten Browsern fallen auf JPG zurück. Die Kosten sind das Codieren dreier Versionen; der Nutzen ist das richtige Format auf jedem Gerät.

Unsere Empfehlungen

• UI-Screenshots und Logos: PNG. Überdenken Sie es nicht.
• Hero-Fotos: AVIF + WebP-Fallback + JPG-Fallback über <picture>.
• Long-Tail-Fotos und Blogbilder: WebP, JPG-Fallback. AVIF nur, wenn Sie eine Build-Pipeline haben, die es günstig erzeugt.
• Animierter Inhalt: WebP (oder Video – bei nennenswerten Größen schlägt ein kurzes MP4 ein animiertes WebP).
• Icons: SVG.

Verwenden Sie unser Bildumrechner-Cluster für die Formatwechsel. Jede Umrechnung läuft in Ihrem Browser – kein Upload, kein Warten, kein Qualitätskompromiss durch einen serverseitigen Dienst.

Durchgerechnetes Beispiel: Hero-Bild in drei Formaten

Quelle: ein 3000×2000 24-Bit-Foto mit 17,4 MB als unkomprimiertes BMP. Bei visuell gleichwertiger Qualität (SSIM ≥ 0,98 gegenüber der Quelle) mit Standard-Encoder-Einstellungen codiert:

• JPG (Qualität 82): 612 KB.
• WebP (Qualität 80): 388 KB – 37 % kleiner als JPG.
• AVIF (CRF 28): 241 KB – 61 % kleiner als JPG, 38 % kleiner als WebP.
• PNG (verlustfrei): 14,8 MB – 24-mal größer als JPG, als Web-Hero unbrauchbar.

Codierzeiten auf einem 2024er-M2-Laptop mit libjpeg-turbo,libwebp bzw. libavif: JPG 0,08 s, WebP 0,34 s, AVIF 4,2 s. Die 50-fache Codierverlangsamung von AVIF ist der eigentliche Grund, warum es noch nicht das Standardformat ist. Für eine Build-Pipeline, die Hero-Bilder einmal zur Deploy-Zeit erzeugt, amortisieren sich diese Kosten; für vom Nutzer hochgeladene, on the fly skalierte Avatare sind sie untragbar.

Häufige Fehler

• Ein JPG wiederholt speichern. Jedes Speichern requantisiert die DCT-Koeffizienten; die Qualität verfällt, auch wenn der Unterschied am Bildschirm zunächst unsichtbar ist. Bewahren Sie das Original (PNG, TIFF oder RAW) auf und exportieren Sie erst zur Veröffentlichung erneut nach JPG. Verwenden Sie für den letzten Schritt unser PNG-zu-JPG-Tool.
• PNG-24 verwenden, wo PNG-8 genügt. Ein Screenshot einer UI mit 256 verschiedenen Farben passt in PNG-8 (8-Bit indiziert) bei einem Drittel der PNG-24-Größe mit identischer visueller Ausgabe. Die meisten Bildeditoren verwenden PNG-8 nicht standardmäßig – exportieren Sie für indizierte Paletten explizit dorthin.
• Das <picture>-Fallback für AVIF überspringen. Selbst 93 % globale Unterstützung bedeuten, dass 1 von 14 Besuchern ein kaputtes Bild erhält. Das Fallback fügt kein Gewicht für Browser hinzu, die AVIF zuerst laden.
• WebPs verlustfreien Modus als PNG-Ersatz behandeln. WebP-verlustfrei ist hervorragend für verlustfrei codierte Fotos; für indizierte UI-Objekte ist PNG-8 oft kleiner. Testen Sie beide, bevor Sie standardisieren.
• EXIF und ICC bedingungslos entfernen. Das Farbprofil (ICC) zählt für Fotos, die auf Wide-Gamut-Displays betrachtet werden. Entfernen Sie EXIF aus Datenschutzgründen, behalten Sie ICC für die Wiedergabetreue.

Für die zugrunde liegenden Kompressionsformat-Kompromisse auf Codec-Ebene erklärt siehe unseren Ratgeber Wie man Bilder ohne Qualitätsverlust skaliert.