1. Startseite
2. Bildformate

Bildformate im Vergleich: JPEG, PNG, WebP und AVIF

Vier Formate decken mehr als 99 % aller Bilder im modernen Web ab. Sie treffen sehr unterschiedliche Kompromisse zwischen Komprimierung, Transparenz, Animation und Browserunterstützung. Hier ist ein praktischer Leitfaden, um das richtige zu wählen.

Direkter Vergleich

Zuerst ein schneller Überblick, darunter die vollständige Aufschlüsselung jedes Formats.

JPEG — die universelle Basis

Wie es funktioniert

JPEG (Joint Photographic Experts Group) wurde 1992 standardisiert und ist das älteste der vier Formate. Es verwendet eine verlustbehaftete diskrete Kosinustransformation auf 8×8-Pixel-Blöcken, gefolgt von Quantisierung und Entropiekodierung. Die Qualität wird durch eine einzelne Zahl von 1 bis 100 gesteuert. Moderne Encoder wie MozJPEG holen 10–20 % mehr aus dem Format heraus, ohne den Bitstream zu ändern, sodass jeder JPEG-Decoder sie lesen kann.

Ideal für

Fotografischen Inhalt mit weichen Tonverläufen und viel Detail — Porträts, Landschaften, Produktfotografie, Hero-Bilder.

Vorteile

• Wird buchstäblich von jedem Bildbetrachter auf dem Planeten unterstützt.
• Hardware-beschleunigte Dekodierung nahezu überall.
• Ausgereiftes Ökosystem an Optimierern (MozJPEG, jpegli).

Nachteile

• Kein Alphakanal — Hintergründe müssen abgeflacht werden.
• Blockartefakte bei Text, Strichgrafik und scharfen Kanten.
• Nur 8 Bit pro Kanal.

PNG — verlustfrei und transparent

Wie es funktioniert

PNG (Portable Network Graphics) wurde Mitte der 1990er als freier, patentfreier Ersatz für GIF entwickelt. Es ist streng verlustfrei: DEFLATE-Kompression auf zeilenweiser Pixel-Filterung. Optimierer wie oxipng (der Rust-Port von optipng) probieren jede Filter-/Kompressionskombination, um die kleinste Darstellung zu finden, ohne ein einziges Pixel zu ändern.

Ideal für

UI-Grafiken, Icons, Screenshots, Diagramme, Strichgrafik, Logos mit flachen Farben und alles, was einen echten Alphakanal braucht.

Vorteile

• Verlustfrei — Pixel überleben den Round-Trip unverändert.
• Volle 8-bit-Alpha, bis zu 16 Bit pro Kanal.
• Universell unterstützt.

Nachteile

• Groß bei Fotos — oft mehrfach größer als JPEG/WebP/AVIF.
• Keine Animation in der Originalspezifikation (APNG ist eine spätere Erweiterung).

WebP — Googles Web-First-Format

Wie es funktioniert

WebP wurde 2010 von Google veröffentlicht, basierend auf dem Videocodec VP8 und später um einen separaten verlustfreien Modus erweitert. Es unterstützt sowohl verlustbehaftete als auch verlustfreie Komprimierung in einem Container, mit optionalem Alpha und Animation. Im verlustbehafteten Modus schlägt es JPEG typischerweise um 25–35 % bei gleicher Qualität. Verlustfrei schlägt es PNG um 20–30 %.

Ideal für

Allgemeine Web-Auslieferung, wenn AVIF noch nicht sicher ist — Fotos, UI-Sprites mit Transparenz, Ersatz für animierte GIFs und als Fallback-Schicht unter AVIF.

Vorteile

• Ein Format deckt Fotos, Grafiken, Alpha und Animation ab.
• Deutlich kleiner als JPEG und PNG bei vergleichbarer Qualität.
• Breite Unterstützung: alle Evergreen-Browser seit 2020.

Nachteile

• 8 Bit pro Kanal — kein HDR.
• Langsamer zu dekodieren als JPEG auf manchen schwächeren Geräten.

AVIF — der aktuelle Spitzenreiter bei der Kompression

Wie es funktioniert

AVIF (AV1 Image File Format) ist ein Standbild-Profil des AV1-Videocodecs, 2019 von der Alliance for Open Media veröffentlicht. Es unterstützt bis zu 12-bit-Farbe, volles Alpha, HDR, großen Farbraum und Filmkorn-Synthese. Der Referenz-Encoder (aom-av1, von libavif verwendet) ist langsam, liefert aber die beste heute verfügbare Komprimierung für reale Fotos.

Ideal für

Hero-Bilder, Fotogalerien und überall dort, wo Bandbreite wichtiger ist als CPU-Zeit. Funktioniert gut als oberste Ebene in einem <picture>-Element.

Vorteile

• Klassenbeste Komprimierung — häufig 40–60 % kleiner als JPEG.
• Unterstützt Alpha, Animation, HDR, großen Farbraum und 10/12-bit-Tiefe.
• Lizenzfrei und offen.

Nachteile

• Langsam zu kodieren — am besten zur Build-Zeit oder asynchron.
• Safari hat die Unterstützung erst in Version 16 (2022) hinzugefügt.
• Weniger elegant für synthetische Grafiken als WebP lossless oder PNG.

Welches Format soll ich verwenden?

• Fotos, randlose Hero-Bilder: AVIF als primäres Format, WebP und JPEG als Fallbacks über <picture>.
• UI-Grafiken mit Transparenz (Icons, Logos): PNG für Legacy-Kompatibilität, WebP lossless für kleinere Payloads.
• Strichgrafik, Screenshots, Diagramme: PNG (oder WebP lossless) — JPEG-/AVIF-Artefakte sind an scharfen Kanten unerbittlich.
• Ersatz für animierte GIFs: WebP oder AVIF — beide sind dramatisch kleiner und unterstützen echtes Alpha.
• Ein Format für jeden Browser, heute: JPEG für Fotos, PNG für Grafiken. Nicht die kleinste Option, aber null Kompatibilitätsschulden.

In der Praxis müssen Sie sich nicht auf eins festlegen. Servieren Sie AVIF zuerst, WebP als zweites und JPEG oder PNG als letztes innerhalb eines <picture>-Elements — jeder Browser erhält die kleinste Version, die er dekodieren kann.