JPG vs. PNG vs. WebP vs. AVIF: Welches Format?

Vier Buchstabenfolgen, vier Versprechen: JPG ist der Klassiker für Fotos,PNG die eiserne Reserve für Grafiken, WebP der moderne Allrounder und AVIF der neueste Spross mit den kleinsten Dateien. Jedes Format deckt einen anderen Anwendungsfall ab – und wer sie falsch kombiniert, zahlt das mit unnötig großen Dateien, sichtbaren Artefakten oder fehlgeschlagenen Uploads.

Diese Übersicht erklärt jedes Format in einer Minute, zeigt, was es im Browser kann, und gibt eine konkrete Empfehlung pro Anwendungsfall. Wer es noch kleiner mag: Wie JPG, WebP und AVIF intern komprimieren, haben wir inunserem Leitfaden zum verlustfreien Komprimierendetailliert aufgeschrieben.

JPG – der Klassiker für Fotos

JPG (genauer JPEG) wurde 1992 standardisiert und hat sich seither für ein Drittel aller Web-Bilder gehalten. Das Prinzip: Das Bild wird in 8×8-Blöcke zerlegt, jeder Block durch eine diskrete Kosinustransformation geschickt und das Ergebnis grob quantisiert. Hohe Frequenzen (feine Details) werden stärker gerundet als niedrige – und genau das macht JPG bei Fotos klein, ohne dass es sofort auffällt.

JPG unterstützt keine Transparenz und ist verlustbehaftet – wer es fünf Mal hintereinander neu speichert, bekommt ein immer weicheres Bild. Dafür versteht es quasi jeder Browser, jede Kamera und jedes CMS der Welt. Aktuelle Encoder wie mozjpeg drücken die Datei bei gleicher visueller Qualität nochmal 10–20 % kleiner als alte Bibliotheken.

Ideal für: Fotos, Hero-Bilder, große Web-Grafiken mit Farbverläufen.

Nicht ideal für: Logos, Screenshots, Icons – alles mit harten Kanten oder Text.

PNG – verlustfrei und transparent

PNG wurde als verlustfreier JPG-Nachfolger entwickelt und funktioniert nach einem anderen Prinzip: St Information wegzuwerfen, entfernt es Redundanz. Zeile für Zeile wird das aktuelle Pixel aus seinen Nachbarn vorhergesagt (Sub, Up, Average, Paeth), nur die kleine Abweichung wird gespeichert und am Ende durch deflate (denselben Algorithmus wie in ZIP) gejagt.

Das Ergebnis: ein Screenshot mit flachen Farben schrumpft auf einen Bruchteil seiner Größe, und ein Logo mit Transparenz bleibt gestochen scharf. Der Preis: bei Fotos ist PNG meist fünf- bis zehnmal größer als JPG, weil echte Fotos keine nennenswerte Redundanz haben.

Ideal für: Logos, UI-Screenshots, Icons, Bilder mit transparentem Hintergrund.

Nicht ideal für: Fotos, große Web-Banner ohne Transparenz.

WebP – der moderne Allrounder

WebP wurde 2010 von Google veröffentlicht und versteht sowohl verlustbehaftete als auch verlustfreie Komprimierung. Verlustbehaftetes WebP nutzt VP8 als Intra-Prediktor, errät also jeden Block aus seinen Nachbarn und kodiert nur die kleine Differenz. Das Ergebnis ist bei gleicher wahrgenommener Qualität 25–35 % kleiner als JPG; verlustfreies WebP ist typischerweise 20–30 % kleiner als PNG.

Browser-Unterstützung ist inzwischen flächendeckend – Chrome, Firefox, Safari und Edge öffnen WebP ohne Probleme. Wer ältere Geräte adressieren muss (z. B. Newsletter, manche E-Mail-Clients), liefert JPG oder PNG als Fallback aus. WebP unterstützt Transparenz, Animation und sogar Alphakanäle – es ist faktisch der JPG-und-PNG-Nachfolger in einem.

AVIF – die kleinsten Dateien

AVIF basiert auf dem gleichen Videocodec (AV1), den Streaming-Dienste für 4K-Videos nutzen, und wendet ihn Standbilder an. Das Ergebnis ist beeindruckend: bei gleicher visueller Qualität ist AVIF oft 40–50 % kleiner als JPG, und in der verlustfreien Variante schlägt es sogar verlustfreies WebP.

Die Kehrseite: die Encode-Zeit ist deutlich länger, und ältere Tools (manche CMS, bestimmte Bildbearbeitungsprogramme) öffnen AVIF noch nicht zuverlässig. Safari unterstützt AVIF erst seit Version 16, was bedeutet, dass ein paar Prozent der Besucher ein JPG-Backend brauchen. Für den Mainstream-Webeinsatz ist AVIF trotzdem oft die beste Wahl – der Bytes-Vorteil gegenüber WebP macht sich auf jeder Core Web Vitals Messung bemerkbar.

Welches Format wann?

Als Faustregel: Foto? Verlustbehaftet. WebP oder AVIF sind heute der Standard, JPG bleibt der Fallback für ältere Clients. Grafik mit Kanten oder Transparenz? Verlustfrei – PNG oder verlustfreies WebP. Animation?WebP für kurze Loops, MP4-Video für alles, was länger als ein paar Sekunden läuft. Wer unsicher ist, probiert es einfach aus: Mit demBildkonverter von ImagElitesehen Sie die Dateigröße und die Vorschau nebeneinander und können das Format wählen, das für Ihr konkretes Bild am besten passt – ohne dass etwas das Gerät verlässt.