JPEG vs. PNG vs. WebP vs. AVIF: Der vollständige Bildformat-Vergleich

Das falsche Bildformat zu wählen ist einer der häufigsten und teuersten Fehler in der Web-Performance. Ein JPEG, wo ein WebP ausreichen würde, ein PNG, wo ein JPEG genügt, oder ein Format, das Ihr Browser nicht unterstützt — jeder dieser Fehler fügt jeder Seitenladung unnötiges Gewicht hinzu und schadet direkt Ihren Core Web Vitals und der Nutzererfahrung. Dieser Leitfaden erklärt, wie JPEG, PNG, WebP und AVIF jeweils intern komprimieren, wann Sie welches Format einsetzen und wie Sie eine fundierte Entscheidung für Ihren Anwendungsfall treffen.

Zwischen diesen Formaten können Sie mit dem BrowseryTools Bildkonverter konvertieren — kostenlos, ohne Anmeldung, alles läuft lokal in Ihrem Browser.

JPEG: Der Standard für Fotografie

JPEG (Joint Photographic Experts Group) wurde 1992 eingeführt und ist nach wie vor das dominante Format für Fotografien. Sein Kompressionsalgorithmus basiert auf der Diskreten Kosinustransformation (DCT): Jedes Bild wird in 8×8-Pixel-Blöcke aufgeteilt, und jeder Block wird vom Ortsbereich (Pixelfarben) in den Frequenzbereich (wie schnell sich Farben über den Block ändern) transformiert. Der Encoder quantisiert dann diese Frequenzdaten — er behält die Niederfrequenzkomponenten, die breite Farbregionen beschreiben, und verwirft oder gröbert die Hochfrequenzkomponenten, die feine Details und scharfe Kanten beschreiben.

Deshalb erzeugt JPEG-Komprimierung bei aggressiven Einstellungen charakteristische Artefakte: blockige 8×8-Patches (Macroblocking), Verschmieren um scharfe Kanten und Farbbanding in Farbverläufen. Diese Artefakte treten in Bereichen mit feinen Details und hohem Kontrast auf — genau dort, wo die verworfenen Hochfrequenzkomponenten am meisten gefehlt hätten.

JPEG ist verlustbehaftet — jedes Speichern verwirft dauerhaft Informationen. Bei Qualität 85–90 (auf einer Skala von 0–100) sehen Fotografien beim Betrachten im Web typischerweise vom Original nicht zu unterscheiden aus, sind dabei aber 5–20× kleiner als ein PNG desselben Bildes. JPEG unterstützt keine Transparenz (Alphakanal) und keine Animationen.

PNG: Verlustfreie Präzision

PNG (Portable Network Graphics) verwendet verlustfreie Komprimierung auf Basis des DEFLATE-Algorithmus, der LZ77-Wörterbuch-Komprimierung (Suchen und Ersetzen wiederholter Bytefolgen) mit Huffman-Kodierung (kürzere Bitcodes für häufigere Werte) kombiniert. Es werden niemals Bilddaten verworfen. Jeder Pixel wird exakt gespeichert.

Das macht PNG hervorragend für Bilder, die pixelgenau reproduziert werden müssen: Screenshots, Logos, Icons, Illustrationen mit scharfen Kanten, Text über Bildern und alles mit Transparenz. PNG unterstützt vollständige 8-Bit-Alphakanäle, was weiche halbtransparente Farbverläufe ermöglicht.

Der Nachteil ist die Dateigröße. Bei fotografischen Inhalten mit durchgehenden Farbverläufen sind PNG-Dateien im Vergleich zu JPEG bei ähnlicher wahrgenommener Qualität enorm. Ein Foto als PNG gespeichert kann 10–20× größer sein als dasselbe Bild als gut komprimiertes JPEG. PNG glänzt, wenn Inhalte große gleichmäßige Bereiche, harte Kanten oder verhältnismäßig wenige verschiedene Farben haben — die Muster, die LZ77 effizient komprimiert. Fotografie mit ihren Millionen subtil verschiedener Farbwerte ist der schlechteste Fall für PNG.

WebP: Das moderne Web-Format

WebP wurde 2010 von Google eingeführt und basiert auf dem VP8-Video-Codec. Es unterstützt sowohl verlustbehaftete als auch verlustfreie Kompressionsmodi sowie Animationen und Transparenz in beiden Modi. Der verlustbehaftete Modus verwendet einen ähnlichen DCT-basierten Block-Ansatz wie JPEG, aber mit ausgefeilteren Vorhersagetechniken und Entropiekodierung und erreicht typischerweise 25–35 % kleinere Dateien als JPEG bei gleichwertiger visueller Qualität. Der verlustfreie Modus ist für die meisten Inhalte 15–25 % effizienter als PNG.

Die Browser-Unterstützung ist heute praktisch universell — alle großen Browser unterstützen WebP seit 2020. Die verbleibende Lücke sind ältere Software: einige ältere Bildbearbeitungsanwendungen und Betriebssystem-Bildbetrachter unterstützen WebP nicht nativ. Für die Web-Auslieferung ist WebP die unkomplizierte moderne Standardwahl, die in den meisten Fällen sowohl JPEG als auch PNG ersetzt.

AVIF: Die nächste Generation

AVIF (AV1 Image File Format) basiert auf Keyframes des AV1-Video-Codecs, der von der Alliance for Open Media entwickelt und 2018 veröffentlicht wurde. AV1s Kompressionstechniken sind deutlich ausgefeilter als die JPEG oder WebP zugrundeliegenden: größere, variabel große Vorhersageblöcke, ausgefeiltere Intra-Frame-Vorhersage, bessere Behandlung von Filmkorn und Rauschen sowie überlegene Entropiekodierung. Das Ergebnis sind typischerweise 40–50 % kleinere Dateien als JPEG bei gleichwertiger Qualität — oft schlägt es WebP um weitere 20–30 %.

AVIF unterstützt volles HDR, breite Farbräume, Transparenz, Animationen und sowohl 8-Bit- als auch 10-Bit-Farbtiefe. Die Browser-Unterstützung hat schnell aufgeholt: Chrome (85+), Firefox (93+) und Safari (16+) unterstützen alle AVIF. Der Hauptnachteil ist die Kodierungsgeschwindigkeit — AVIF ist deutlich langsamer zu kodieren als JPEG oder WebP, was bei Echtzeit-Bildverarbeitungs-Pipelines wichtig ist, für vorab komprimierte statische Assets aber irrelevant ist.

Dateigrößenvergleich für dasselbe Bild

Um die Unterschiede konkret zu machen, hier ein repräsentativer Vergleich für ein 1920×1080-Foto bei vergleichbarer wahrgenommener visueller Qualität:

• PNG (verlustfrei) — 4,2 MB. Perfekte Reproduktion, keine Artefakte. Geeignet als Quell-Master oder wenn Pixelgenauigkeit erforderlich ist.
• JPEG (Qualität 85) — 380 KB. Minimale sichtbare Artefakte bei Bildschirmgröße. Der Standard für fotografische Web-Auslieferung seit drei Jahrzehnten.
• WebP (verlustbehaftet, gleichwertige Qualität) — 270 KB. Etwa 30 % kleiner als JPEG, visuell vergleichbar. Ein unkompliziertes Upgrade für die meisten Web-Projekte.
• AVIF (gleichwertige Qualität) — 180 KB. Etwa 50 % kleiner als JPEG, visuell vergleichbar oder besser. Die beste heute verfügbare Dateigröße für fotografische Inhalte.

Das sind repräsentative Werte; die tatsächlichen Verhältnisse variieren je nach Bildinhalt. Hochdetaillierte, rauschreiche Fotografie profitiert weniger von neueren Codecs als glatte, rauscharme Bilder.

Wann welches Format verwenden

• Fotos im Web — Verwenden Sie WebP mit einem JPEG-Fallback über das HTML- <picture>-Element. Wenn Ihre Build-Pipeline AVIF-Kodierung unterstützt, liefern Sie AVIF mit WebP- und JPEG-Fallbacks.
• Logos, Icons, UI-Elemente mit Transparenz — WebP (verlustfrei) oder PNG. JPEG kann überhaupt keine Transparenz darstellen.
• Screenshots und Bildschirmaufnahmen — PNG für alles, das exakte Pixelreproduktion erfordert. WebP verlustfrei als kleinere Alternative, wenn exakte Treue nicht kritisch ist.
• Illustrationen mit flachen Farben und scharfen Kanten — PNG oder WebP verlustfrei. JPEG führt selbst bei hohen Qualitätseinstellungen sichtbare Ringing-Artefakte um harte Kanten ein.
• Druck und Archivierung — PNG (verlustfrei) oder TIFF. Verlustbehaftete Formate sind für Quell-Assets, die erneut bearbeitet werden sollen, ungeeignet.
• E-Mail — JPEG oder PNG. E-Mail-Clients haben inkonsistente Unterstützung für WebP und praktisch keine für AVIF. Hier gilt: Kompatibilität vor Optimierung.

Auswirkung auf Core Web Vitals und Seitenleistung

Largest Contentful Paint (LCP) — einer von Googles Core Web Vitals — misst, wie lange es dauert, bis das größte sichtbare Inhaltselement (oft ein Hero-Bild) geladen ist. Die Wahl des Bildformats wirkt sich direkt auf den LCP aus: Ein AVIF-Hero-Bild lädt schneller als das äquivalente JPEG, und ein schnellerer LCP verbessert sowohl die Nutzererfahrung als auch das Suchmaschinen-Ranking.

Der kumulative Effekt ist ebenfalls bedeutsam. Eine Seite mit 20 Produktbildern, die unnötigerweise alle als PNG statt als WebP gespeichert sind, kann 5–10 MB schwerer sein als nötig. Bei mobilen Verbindungen ist das der Unterschied zwischen einer Seite, die in 2 Sekunden lädt, und einer, die 8 Sekunden braucht.

Verschiedene Formate an verschiedene Browser ausliefern

Das HTML-Element <picture> und seine <source>-Kinder ermöglichen es Ihnen, das beste Format für jeden Browser ohne JavaScript auszuliefern:

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

Der Browser wählt das erste unterstützte <source>-Element. Browser mit AVIF-Unterstützung laden die kleinste Datei; Browser ohne fallen auf WebP oder JPEG zurück. Das <img>-Tag am Ende dient als universeller Fallback und ist das einzige Element, das das alt-Attribut erfordert.

Um Ihre vorhandenen Bilder für dieses Multi-Format-Setup in WebP oder AVIF zu konvertieren, verarbeitet der BrowseryTools Bildkonverter Stapelkonvertierungen, ohne etwas auf einen Server hochzuladen — Ihre Quelldateien bleiben auf Ihrem Gerät.