Beste Bildformate für das Web: PNG vs JPG vs WebP vs AVIF (2026)

Veröffentlicht am 28. März 2026 • 12 Min. Lesezeit

1. Warum die Wahl des Bildformats wichtig ist

Bilder machen etwa 50% des Gesamtgewichts einer durchschnittlichen Webseite aus. Laut HTTP-Archive-Daten von Anfang 2026 lädt die mittlere Seite allein 1,8 MB an Bildern. Diese Zahl steigt auf über 4 MB bei bildlastigen E-Commerce- und Portfolio-Websites. Die Wahl des falschen Formats kann das Seitengewicht verdoppeln oder verdreifachen, ohne dass eine sichtbare Qualitätsverbesserung eintritt.

Die Seitengeschwindigkeit wirkt sich direkt auf den Umsatz aus. Google hat dokumentiert, dass eine Erhöhung der Ladezeit um 100 ms Amazon 1% des Umsatzes kostet. Walmart stellte fest, dass jede Verbesserung der Seitenladezeit um 1 Sekunde die Conversions um 2% steigerte. Für mobile Nutzer mit 4G-Verbindungen beträgt der Unterschied zwischen einem 180 KB großen WebP und einem 680 KB großen JPEG etwa 1,5 Sekunden zusätzliche Ladezeit pro Bild.

Über die Leistung hinaus bestimmt die Formatwahl, ob Sie Transparenz, Animation oder progressives Laden verwenden können. Ein PNG-Logo mit Alpha-Transparenz kann nicht durch ein JPEG ersetzt werden, ohne den transparenten Hintergrund zu verlieren. Eine animierte Produktdemo benötigt GIF oder WebP, kein statisches Format. Zu verstehen, was jedes Format gut kann — und wo es Schwächen hat — ermöglicht es Ihnen, für jedes Bild auf Ihrer Website den richtigen Kompromiss zu finden.

Suchmaschinen berücksichtigen die Seitengeschwindigkeit bei Rankings. Googles Core Web Vitals, insbesondere Largest Contentful Paint (LCP), messen direkt, wie schnell Ihr größtes Bild lädt. Die Bereitstellung optimierter Formate ist eine der einfachsten Möglichkeiten, LCP zu verbessern und einen Ranking-Vorteil gegenüber Konkurrenten zu erlangen, die immer noch unoptimierte JPEGs ausliefern.

2. JPEG: Der universelle Standard

JPEG (Joint Photographic Experts Group) ist seit der Standardisierung des Formats im Jahr 1992 das Rückgrat der Web-Bildgebung. Über drei Jahrzehnte später bleibt es das am weitesten verbreitete Bildformat im Internet und macht laut W3Techs-Daten etwa 72% aller im Web bereitgestellten Bilder aus.

Wie JPEG-Kompression funktioniert

JPEG verwendet einen verlustbehafteten Kompressionsalgorithmus, der auf der diskreten Kosinustransformation (DCT) basiert. Der Prozess läuft in drei Phasen ab. Zunächst wird das Bild vom RGB- in den YCbCr-Farbraum konvertiert, wobei Luminanz (Helligkeit) von Chrominanz (Farbe) getrennt wird. Menschliche Augen sind empfindlicher für Helligkeitsänderungen als für Farbänderungen, daher nutzt JPEG dies aus, indem die Chrominanzkanäle heruntergesampelt werden — typischerweise wird die Farbauflösung in beiden Dimensionen halbiert (4:2:0-Subsampling).

Als Nächstes wird das Bild in 8x8-Pixel-Blöcke unterteilt, und jeder Block durchläuft eine DCT, die räumliche Pixeldaten in Frequenzkoeffizienten umwandelt. Hochfrequente Details (scharfe Kanten, feine Texturen) werden durch höhere Koeffizienten dargestellt. Der Quantisierungsschritt teilt dann diese Koeffizienten durch eine qualitätsabhängige Matrix und rundet die Ergebnisse. Hier gehen tatsächlich Daten verloren — höhere Kompression bedeutet aggressiveres Runden, wodurch mehr hochfrequente Details verworfen werden.

Schließlich werden die quantisierten Koeffizienten mittels Huffman-Codierung (oder arithmetischer Codierung in neueren Implementierungen) codiert, um den komprimierten Bitstrom zu erzeugen.

Qualitätseinstellungen: Den optimalen Punkt finden

Die JPEG-Qualität wird auf einer Skala von 0-100 angegeben, aber die Beziehung zwischen Qualitätszahl und Dateigröße ist nicht linear. Der praktische Bereich für die Web-Nutzung liegt bei 60-95:

Vor- und Nachteile

3. PNG: Transparenz und Präzision

PNG (Portable Network Graphics) wurde 1996 als patentfreier Ersatz für GIF entwickelt, nachdem Unisys begann, sein LZW-Patent durchzusetzen. Es wurde schnell zum Standard für Bilder, die Transparenz oder pixelgenaue Reproduktion erfordern — Logos, Icons, Screenshots, UI-Elemente und Grafiken mit Text.

PNG-8 vs PNG-24

PNG gibt es in zwei Hauptvarianten. PNG-8 verwendet eine indizierte Farbpalette von bis zu 256 Farben, ähnlich wie GIF. Jedes Pixel verweist auf einen Paletteneintrag, anstatt vollständige Farbdaten zu speichern, was zu sehr kleinen Dateien für einfache Grafiken führt. Ein einfarbiges Icon kann als PNG-8 nur 2-5 KB groß sein. PNG-8 unterstützt binäre Transparenz (vollständig transparent oder vollständig undurchsichtig) und in einigen Implementierungen palettenbasierte Alpha-Transparenz.

PNG-24 speichert vollständige 24-Bit-RGB-Farbe (16,7 Millionen Farben) plus einen optionalen 8-Bit-Alpha-Kanal für weiche Transparenzverläufe. Dies macht es zum bevorzugten Format für Logos, die auf jeder Hintergrundfarbe sitzen müssen, UI-Mockups und jedes Bild, bei dem Sie partielle Transparenz benötigen (Schlagschatten, Glaseffekte, geglättete Kanten). Der Kompromiss ist die Dateigröße — ein PNG-24 mit Alpha ist typischerweise 5-10x größer als ein entsprechendes JPEG.

Wie PNG-Kompression funktioniert

PNG verwendet DEFLATE-Kompression, denselben Algorithmus wie gzip und zlib. Vor der Kompression wendet PNG einen Vorhersagefilter auf jede Pixelzeile an. Der Filter sagt jeden Pixelwert basierend auf benachbarten Pixeln (links, oben, oben links) voraus und speichert dann nur die Differenz. Für Bilder mit großen Bereichen ähnlicher Farbe — flache UI-Designs, Diagramme, Screenshots — ist dieser Vorhersageschritt äußerst effektiv und reduziert die Daten oft auf nahezu Null, bevor DEFLATE überhaupt läuft.

PNG unterstützt auch Interlacing über den Adam7-Algorithmus, der das Bild in sieben Durchgängen mit zunehmender Auflösung speichert. Dies ermöglicht es Browsern, fast sofort eine niedrig aufgelöste Vorschau anzuzeigen und diese dann progressiv zu verfeinern. Der Nachteil ist, dass interlaced PNGs typischerweise 5-10% größer sind als nicht-interlaced Versionen.

Vor- und Nachteile

4. GIF: Animation und Einfachheit

GIF (Graphics Interchange Format) stammt aus dem Jahr 1987 und war das erste weithin unterstützte Format für Web-Animationen. Trotz seiner schwerwiegenden technischen Einschränkungen bleibt GIF im Jahr 2026 aus einem Grund allgegenwärtig: universelle, reibungslose Animationsunterstützung. Jeder Browser, E-Mail-Client, Messaging-App und Social-Media-Plattform rendert animierte GIFs ohne Plugins oder spezielle Handhabung.

GIF ist auf 256 Farben pro Frame beschränkt, verwendet verlustfreie LZW-Kompression und speichert Animationen als Sequenz vollständiger oder partieller Frames mit Frame-spezifischem Timing. Dies macht es spektakulär ineffizient für fotografische Inhalte. Ein 3-Sekunden-GIF-Clip bei 480p kann leicht 5-10 MB erreichen, während derselbe Clip als WebP-Animation 500 KB-1 MB groß wäre.

Für statische Bilder wurde GIF vollständig von PNG (das besser komprimiert und mehr Farben unterstützt) und WebP abgelöst. Der einzige verbleibende Anwendungsfall für GIF ist Animation in Kontexten, in denen WebP oder Video nicht unterstützt wird — hauptsächlich E-Mail-Kampagnen und Legacy-Messaging-Plattformen. Für die Web-Nutzung sind animierte WebP oder kurze MP4/WebM-Videos in jeder messbaren Hinsicht bessere Optionen: kleinere Dateien, mehr Farben, flüssigere Wiedergabe.

Vor- und Nachteile

5. WebP: Der moderne Standard

WebP, von Google entwickelt und 2010 veröffentlicht, ist im Jahr 2026 zum De-facto-Standard für die Bereitstellung von Web-Bildern geworden. Es unterstützt sowohl verlustbehaftete als auch verlustfreie Kompression, Alpha-Transparenz und Animation — und ersetzt effektiv JPEG, PNG und GIF durch ein einziges Format. Die Browser-Unterstützung übersteigt jetzt weltweit 97% und umfasst Chrome, Firefox, Safari (seit Version 14), Edge und Opera.

Wie WebP kleinere Dateien erreicht

Verlustbehaftetes WebP verwendet prädiktive Codierung, die vom VP8-Video-Codec abgeleitet ist. Anstelle von JPEGs festen 8x8-DCT-Blöcken verwendet WebP variable Blockgrößen bis zu 64x64 Pixeln und wendet Intra-Frame-Vorhersage an — jeder Block wird aus seinen Nachbarn vorhergesagt, und nur der Vorhersagefehler wird codiert. Dieser adaptive Ansatz behandelt sowohl weiche Verläufe als auch scharfe Kanten effizienter als JPEGs Einheitslösung.

In der Praxis erzeugt verlustbehaftetes WebP Dateien, die 25-35% kleiner sind als JPEG bei gleichwertiger visueller Qualität. Googles eigene Studie über 1 Million zufällig ausgewählter Web-Bilder ergab eine durchschnittliche Reduzierung um 30%. Für verlustfreie Kompression ist WebP im Durchschnitt 26% kleiner als PNG und verwendet Techniken wie räumliche Vorhersage, Farb-Cache, Rückwärtsreferenzen und Huffman-Codierung.

WebP für Animationen

Animiertes WebP verwendet dieselbe Kompression wie verlustbehaftetes WebP, angewendet pro Frame, mit Inter-Frame-Vorhersage, um nur die Unterschiede zwischen Frames zu codieren. Das Ergebnis sind animierte Bilder, die laut Googles Benchmarks 64% kleiner sind als entsprechende GIFs. Ein 2 MB großes animiertes GIF wird typischerweise in ein 400-700 KB großes animiertes WebP mit besserer Farbtiefe (24-Bit vs. 8-Bit) und optionaler Alpha-Transparenz konvertiert.

Praktische Überlegungen

Die WebP-Codierung ist etwas langsamer als JPEG (etwa 2-5x), was für Echtzeit-Konvertierung wichtig ist, aber für vorverarbeitete Assets irrelevant ist. Die Dekodierungsgeschwindigkeit ist vergleichbar mit JPEG. Die maximale Bildabmessung beträgt 16383x16383 Pixel, was praktisch alle Web-Anwendungsfälle abdeckt, aber für ultrahochauflösende Druck- oder Panoramabilder einschränkend sein kann.

Vor- und Nachteile

6. AVIF: Kompression der nächsten Generation

AVIF (AV1 Image File Format) ist der neueste Anwärter im Bereich der Web-Bildformate. Basierend auf dem AV1-Video-Codec, der von der Alliance for Open Media (zu der Google, Apple, Mozilla, Microsoft, Netflix und Amazon gehören) entwickelt wurde, liefert AVIF die aggressivste heute verfügbare Kompression — etwa 50% kleiner als JPEG und 20% kleiner als WebP bei gleichwertiger visueller Qualität.

Wie AVIF funktioniert

AVIF nutzt die fortschrittlichen Codierungswerkzeuge von AV1: Blockgrößen von 4x4 bis zu 128x128, Intra-Vorhersage mit 56 Richtungsmodi (im Vergleich zu WebPs 10), Chroma-aus-Luma-Vorhersage und eine ausgeklügelte In-Loop-Filterpipeline, die Artefakte reduziert, bevor sie die Ausgabe erreichen. Das Format unterstützt 10-Bit- und 12-Bit-Farbtiefe, HDR (PQ- und HLG-Übertragungsfunktionen) und breite Farbräume (BT.2020), was es zukunftssicher für HDR-Displays macht, die auf Telefonen und Monitoren zum Standard werden.

AVIF unterstützt auch sowohl verlustbehaftete als auch verlustfreie Kompression, Alpha-Transparenz und Animation (obwohl die Unterstützung für animiertes AVIF in Browsern noch inkonsistent ist). Es verwendet das HEIF-Containerformat, denselben Container, der von Apples HEIC-Fotos verwendet wird.

Der Kompromiss bei der Codierungsgeschwindigkeit

Der Hauptnachteil von AVIF ist die Codierungsgeschwindigkeit. Bei Standardeinstellungen ist die AVIF-Codierung 10-100x langsamer als JPEG und 5-20x langsamer als WebP. Die Codierung eines einzelnen 1920x1080-Bildes kann je nach Qualitätseinstellungen und CPU 5-30 Sekunden dauern. Dies macht Echtzeit-Konvertierung für die meisten Anwendungsfälle unpraktisch. Für vorverarbeitete Assets (Build-Time-Konvertierung, CDN-Pipelines) ist die Codierungsgeschwindigkeit jedoch eine einmalige Kosten, die sich in dauerhaft kleineren Dateien auszahlt.

Die Browser-Unterstützung erreichte Anfang 2026 weltweit 93%, wobei Chrome, Firefox, Opera und Samsung Internet volle Unterstützung bieten. Safari fügte AVIF-Unterstützung in Version 16.4 (2023) hinzu. Die verbleibenden Lücken sind hauptsächlich ältere Safari-Versionen und Nischen-Browser.

Vor- und Nachteile