JPG, PNG, WebP und AVIF: der Leitfaden für Bildformate

Die Frage „Welches Format soll ich verwenden?" hat je nachdem, was du speicherst, eine andere Antwort — und die meisten Anleitungen im Netz beantworten sie falsch, weil sie die vier Formate behandeln, als stünden sie unter gleichen Bedingungen miteinander im Wettbewerb. Das stimmt nicht: JPG und PNG lösen seit 30 Jahren unterschiedliche Probleme, und WebP und AVIF sind jeweils eine direkte Weiterentwicklung eines der beiden. Gehen wir es Schritt für Schritt durch.

JPG: Fotografien — niemals Grafiken mit Text oder harten Kanten

JPG komprimiert „verlustbehaftet" — es verwirft echte Bildinformationen, um die Dateigröße zu reduzieren, in der Erwartung, dass das Auge es nicht bemerkt. Bei Fotografien funktioniert das sehr gut, weil diese weiche, kontinuierliche Farbverläufe haben — genau dort, wo der JPG-Algorithmus (basierend auf der diskreten Kosinustransformation) am effizientesten arbeitet. Sichtbar versagt er in zwei Fällen: bei Text oder geraden Linien mit hohem Kontrast (wo diese verschwommenen Höfe um die Kanten herum entstehen, sogenannte Blockartefakte), und bei jedem Bild, das Transparenz braucht, weil JPG diese schlicht nicht unterstützt.

Nutze es für: Fotografien, Produktbilder mit Hintergrund, alles mit vielen Farbtönen.

PNG: Grafiken, Screenshots, alles mit Transparenz

PNG komprimiert „verlustfrei" — die entpackte Datei ist Pixel für Pixel identisch mit dem Original. Das macht es perfekt für Logos, Icons, Screenshots und jedes Bild mit echter Transparenz (dem berühmten Alphakanal), hat aber seinen Preis: Bei Fotografien kann ein verlustfreies PNG 5- bis 10-mal so schwer sein wie ein JPG von visuell vergleichbarer Qualität, weil es versucht, etwas perfekt zu bewahren, das diese Perfektion gar nicht braucht, um gut auszusehen.

Nutze es für: Logos, Icons, Screenshots, Grafiken mit Text, alles mit Transparenz.

WebP: die direkte Weiterentwicklung der beiden vorherigen Formate

WebP, 2010 von Google entwickelt, macht etwas Ungewöhnliches: Es unterstützt sowohl verlustbehaftete Kompression (wie JPG, aber effizienter — laut Googles eigenen Zahlen 25 bis 35 % leichter bei vergleichbarer visueller Qualität) als auch verlustfreie Kompression mit Transparenz (wie PNG, aber ebenfalls effizienter). In der Praxis bedeutet das: WebP kann sowohl deine JPGs als auch deine PNGs ersetzen, mit einer spürbaren Gewichtsersparnis, ohne dass der Unterschied mit bloßem Auge sichtbar wäre. Die Browser-Unterstützung ist seit Jahren kein Problem mehr — heute ist sie praktisch universell.

Nutze es für: praktisch alles, außer du brauchst Kompatibilität mit sehr alter Software, die es nicht erkennt.

AVIF: noch leichter, mit einem Vorbehalt

AVIF (2019) nutzt den Videokompressions-Codec AV1, angewendet auf Standbilder, und übertrifft in Kompressionstests meist WebP — häufig 20 bis 50 % leichter bei vergleichbarer Qualität, stark abhängig vom Bildinhalt. Der Vorbehalt ist zweifach: Das Kodieren eines AVIF ist rechenintensiver als bei WebP (was nur relevant ist, wenn du Tausende von Bildern auf einem Server verarbeitest, nicht wenn du gelegentlich ein paar konvertierst), und obwohl die Browser-Unterstützung bereits hoch ist, liegt sie noch einen Schritt hinter der universellen Kompatibilität von WebP zurück.

Nutze es für: wenn die Dateigröße oberste Priorität hat und du das kleine Kompatibilitätsrisiko in Kauf nehmen kannst, oder als progressive Verbesserung neben einem WebP-Fallback.

Die Schnellübersicht

• Fotografie für das Web → WebP (oder AVIF, wenn du das letzte Byte herausholen willst)
• Logo oder Icon → PNG, oder verlustfreies WebP, wenn die Dateigröße zählt
• Screenshot mit Text → PNG
• Bild mit Transparenz → PNG oder WebP, niemals JPG
• Maximale Kompatibilität mit jeder alten Software → JPG für Fotos, PNG für den Rest