JPG vs PNG vs WebP vs AVIF: Das richtige Bildformat im Jahr 2026 wählen

Wenn Sie Bilder im Web ausliefern, hat das gewählte Format mehr Einfluss auf das Seitengewicht als fast jede andere einzelne Entscheidung. Ein 4 MB großes Hero-Bild gegenüber einem 180 KB großen Hero-Bild ist der Unterschied zwischen einer Seite, die sich sofort anfühlt, und einer, die auf einem Mittelklasse-Android-Telefon über eine wackelige 4G-Verbindung kriecht. Im Jahr 2026 haben wir vier ernstzunehmende Mainstream-Kandidaten: das altehrwürdige JPG, das verlustfreie PNG, das mittlerweile universelle WebP und das zunehmend reife AVIF.

Dieser Leitfaden erklärt, wie jedes Format intern arbeitet, woher die Byte-Einsparungen kommen, welche Kompromisse Sie eingehen, und gibt eine klare Empfehlung, wann Sie welches Format verwenden sollten. Am Ende sollten Sie die Frage "Was ist das beste Bildformat für das Web im Jahr 2026?" ohne Schwafeln beantworten können, und Sie sollten genau wissen, was zu tun ist, wenn ein Designer Ihnen am Freitag um 17 Uhr einen 28 MB großen PNG-Screenshot in die Hand drückt.

Die Akteure

JPG (manchmal auch JPEG geschrieben) wurde 1992 standardisiert und ist immer noch das Format, in dem die meisten Kameras aufnehmen. Es nutzt eine diskrete Kosinus-Transformation (DCT) auf 8x8-Blöcken, quantisiert die Frequenzkoeffizienten und kodiert das Ergebnis mit Huffman-Codes. Es ist von Natur aus verlustbehaftet und hat keinen Alphakanal, ist aber schnell, günstig zu decodieren und wird buchstäblich auf jedem in den letzten dreißig Jahren gebauten Gerät unterstützt.

PNG kam 1996 als patentfreier Ersatz für GIF. Es nutzt DEFLATE (denselben Algorithmus wie zip und gzip) zusätzlich zu optionalen Zeilenfiltern und ist daher vollständig verlustfrei. PNG unterstützt einen echten 8-Bit-Alphakanal, indizierte Paletten und sogar 16-Bit-pro-Kanal-Farbe. Der Preis dafür ist die Dateigröße: Fotografische Inhalte komprimieren mit DEFLATE schlecht.

WebP wurde 2010 von Google veröffentlicht und erreichte um 2020 vollständige browserübergreifende Unterstützung. Verlustbehaftetes WebP nutzt VP8-Intra-Frame-Coding (dieselben Vorhersagemodi wie der VP8-Videocodec) statt einer einfachen DCT. Verlustfreies WebP nutzt VP8L, ein eigenes Format mit Tricks aus Farb-Cache und Predictor-Transformationen. WebP unterstützt Alpha in beiden Modi sowie Animation.

AVIF ist das Standbild-Profil von AV1, dem 2018 fertiggestellten Videocodec, der bis 2024 von praktisch allen ausgeliefert wurde. Es nutzt deutlich größere und intelligentere Vorhersageblöcke, mehr Transformationsoptionen und einen weit besseren Entropiecoder als VP8. AVIF unterstützt bis zu 12-Bit-Farbe, Alpha, HDR und Animation.

Wie die Komprimierung tatsächlich funktioniert

JPG zerlegt das Bild in 8x8-Blöcke, wendet auf jeden Block eine DCT an und teilt die resultierenden Koeffizienten dann durch eine Quantisierungsmatrix. Hohe Frequenzen werden stärker gedrückt als niedrige, weil das menschliche Auge weniger empfindlich für feine Details ist. Niedrigere Qualitätseinstellungen multiplizieren diese Quantisierungsmatrix einfach mit einem größeren Skalar. Deshalb sehen JPG-Artefakte wie blockiges Klingeln um harte Kanten aus: Der Encoder kann es sich buchstäblich nicht leisten, die hochfrequenten Koeffizienten zu behalten, die die Kante beschreiben.

PNG führt überhaupt keine perzeptive Komprimierung durch. Jede Pixelzeile bekommt ein Filter-Präfix von einem Byte (None, Sub, Up, Average oder Paeth), das jedes Pixel aus seinen Nachbarn vorhersagt, und dann komprimiert DEFLATE die Residuen. Wenn Ihr Bild eine Fotografie ist, sind die Residuen weiterhin hochentropisches Rauschen, und Sie sparen sehr wenig. Wenn es ein Screenshot voller wiederholter Vollfarben und scharfer Kanten ist, sind die Einsparungen enorm.

Verlustbehaftetes WebP übernimmt die räumliche Intra-Vorhersage von VP8: Jeder 4x4- oder 16x16-Block wird aus bereits decodierten Nachbarpixeln mit einem von zehn Vorhersagemodi vorhergesagt, und nur das Residuum wird transformiert und quantisiert. Bessere Vorhersage bedeutet kleinere Residuen, was weniger Bits bedeutet. Verlustfreies WebP (VP8L) geht noch weiter mit einem eigenen Farb-Cache, Palettentransformationen und einem kontextadaptiven Entropiecoder.

AVIF nutzt im Wesentlichen einen vollständigen modernen Video-Keyframe-Encoder. Blockgrößen reichen von 4x4 bis 128x128, Transformationen umfassen DCT, ADST und Identität in mehreren Größen, und es gibt mehr als 56 Intra-Vorhersagemodi, einschließlich gerichteter Prädiktoren mit feiner Winkelauflösung. Der CABAC-artige arithmetische Coder packt deutlich mehr Information pro Bit als JPGs Huffman-Tabellen. Das Ergebnis sind ungefähr 50 % kleinere Dateien als JPG bei gleicher visueller Qualität, zum Preis deutlich aufwendigerer Kodierung.

Dateigröße auf einen Blick

Same 4000x3000 photo (a daylight landscape, no transparency):
JPG  (q=85)   ->  1,180 KB
JPG  (q=92)   ->  1,940 KB
PNG  (24-bit) -> 12,420 KB
WebP (q=85)   ->    810 KB
WebP (lossless) -> 9,860 KB
AVIF (q=60)   ->    495 KB
AVIF (q=80)   ->    760 KB

Same 1920x1080 UI screenshot (flat colours, sharp text):
JPG  (q=92)   ->    410 KB  (text fringes visibly)
PNG  (8-bit indexed) ->  92 KB
PNG  (24-bit) ->    280 KB
WebP (lossless) ->  74 KB
AVIF (lossless) ->  88 KB

Zwei Erkenntnisse aus diesen Zahlen. Erstens: Bei natürlichen Fotografien ist AVIF rund 40 bis 60 Prozent kleiner als JPG und 30 bis 40 Prozent kleiner als WebP bei gleicher empfundener Qualität. Zweitens: Bei synthetischen Inhalten wie Screenshots und UI-Exporten gewinnt verlustfreies WebP meist eindeutig, mit PNG-8 als knappem Zweiten, wenn die Palette passt.

Browser-Unterstützung im Jahr 2026

JPG und PNG: 100 Prozent. Da gibt es nichts zu diskutieren. Sie funktionieren überall, wo ein Browser existiert, einschließlich zehn Jahre alter Android-Tablets und eingebetteter WebViews, die Sie längst vergessen haben.

WebP: praktisch 100 Prozent des Browser-Traffics. Safari brachte die Unterstützung bereits 2020 in iOS 14 und macOS Big Sur, Chrome und Firefox haben sie noch viel länger, und sogar die meisten In-App-Browser decodieren es heute. Im Jahr 2026 ist es für eine typische Verbraucherseite nicht mehr leichtsinnig, WebP ohne JPG-Fallback auszuliefern.

AVIF: rund 95 bis 97 Prozent der Browser im Jahr 2026. Chrome, Edge, Firefox, Safari (16.4+) und die wichtigsten Android-WebViews decodieren es alle. Die verbleibende Lücke besteht meist aus sehr altem Android, einigen eingebetteten WebViews auf älteren Smart-TVs und einer langen Schwanzverteilung von firmenseitig gesperrten Geräten. Für eine öffentliche Website ist AVIF mit einem WebP- oder JPG-Fallback ein sicherer Standard.

Transparenz, Animation und Farbtiefe

JPG hat überhaupt keinen Alphakanal. Wenn Sie irgendeine Form von Transparenz brauchen, können Sie es nicht verwenden. Das ist der häufigste Grund, warum Designer zu PNG greifen, wenn sie es nicht sollten.

PNG bietet einen echten 8-Bit-Alphakanal und unterstützt bis zu 16 Bit pro Farbkanal, was es für hochpräzise Zwischenstufen in Grafik-Pipelines nützlich macht. Standard-PNG kennt keine Animation; APNG existiert, aber die Unterstützung ist außerhalb von Stickern und Emojis uneinheitlich.

WebP unterstützt Alpha sowohl im verlustbehafteten als auch im verlustfreien Modus und bietet eine solide Animationsunterstützung, die deutlich effizienter ist als animiertes GIF. Die Farbtiefe beträgt 8 Bit pro Kanal, was für nahezu alle Web-Inhalte ausreicht.

AVIF unterstützt Alpha, Animation, 10- und 12-Bit-Farbe, weite Farbräume und HDR-Übertragungsfunktionen. Wenn Sie HDR-Fotografie oder Wide-Gamut-Kunst veröffentlichen, ist AVIF derzeit das einzige Mainstream-Webformat, das die Daten getreu transportieren kann.

Hardware-Decode und Energie

JPG-Decodierung ist auf moderner Hardware so günstig, dass es praktisch keine Rolle spielt; selbst ein Telefon von 2015 decodiert JPGs schneller, als der Bildschirm sie anzeigen kann. PNG-Decodierung ist pro Pixel aufwendiger, weil DEFLATE nicht parallelfreundlich ist, aber PNG-Nutzlasten sind in Screenshot-Anwendungsfällen meist kleiner pro Bild, sodass sich das in der Praxis ausgleicht.

Verlustbehaftete WebP-Decodierung nutzt denselben VP8-Siliziumpfad, den mobile Chips seit über einem Jahrzehnt haben. Decodierung ist schnell und energieeffizient. Verlustfreie WebP-Decodierung läuft auf den meisten Chips nur in Software, bleibt aber gut im Budget.

Bei AVIF wird es interessant. Software-Decodierung ist tatsächlich aufwendiger als JPG oder WebP, gelegentlich um den Faktor drei bis fünf bei einem einzelnen Bild. Die gute Nachricht: Die meisten ab 2022 ausgelieferten Telefone haben einen AV1-Hardware-Decode, durch den der Browser Standbilder leiten kann; auf diesen Geräten ist AVIF tatsächlich genauso schnell wie JPG oder schneller. Auf älteren Laptops ohne AV1-Silizium kann das Decodieren einer Wand von AVIF-Vorschaubildern in CPU-Profilen auftauchen, also setzen Sie es überlegt ein und nutzen Sie responsive Image-Markup, damit immer die kleinste Variante decodiert wird.

Wann was: die Kurzversion

• Verwenden Sie JPG für Fotografien, wenn Sie maximale Kompatibilität brauchen und keine mehreren Varianten pflegen wollen. Qualität 82 bis 88 ist der übliche Sweet Spot.
• Verwenden Sie PNG für Screenshots, UI-Exporte, Logos mit harten Kanten und alles, was schnell verlustfreie Transparenz braucht. Bevorzugen Sie indiziertes 8-Bit-PNG, wenn die Palette passt.
• Verwenden Sie WebP als Standard-Webformat im Jahr 2026. Verlustbehaftetes WebP für Fotos, verlustfreies WebP für UI-Assets und Icons, die früher PNG gewesen wären.
• Verwenden Sie AVIF, wenn Bandbreite und Core Web Vitals am wichtigsten sind, wenn Sie HDR- oder Wide-Gamut-Inhalte ausliefern oder wenn Sie das kleinstmögliche LCP-Bild möchten. Kombinieren Sie es immer mit einem WebP- oder JPG-Fallback über das picture-Element.
• Vermeiden Sie GIF vollständig. Animiertes WebP und AVIF sind kleiner und sehen bei gleichem Byte-Budget besser aus.

Ein praktischer Konvertierungs-Workflow

Die meisten Teams brauchen keine aufwendige Build-Pipeline, um moderne Formate zu nutzen. Der minimal sinnvolle Workflow ist einfach: Behalten Sie das Original aus Kamera oder Designwerkzeug als Source of Truth und erzeugen Sie zur Deploy-Zeit JPG-, WebP- und AVIF-Varianten. Für einmalige Konvertierungen erledigt eine CLI die Aufgabe in Sekunden.

# Convert a single photo to all three modern variants
cwebp -q 85 hero.jpg -o hero.webp
avifenc --min 20 --max 30 -s 6 hero.jpg hero.avif

# Use the picture element so the browser picks the best one it understands
# <picture>
#   <source srcset="hero.avif" type="image/avif">
#   <source srcset="hero.webp" type="image/webp">
#   <img src="hero.jpg" alt="..." width="1600" height="900">
# </picture>

Wenn Sie keine Kommandozeilen-Tools installieren wollen und nur eine Handvoll Bilder haben, bietet Multilities einen browserbasierten Bildkonverter unter /tools/image-convert, der JPG, PNG, WebP und AVIF in jede Richtung umwandelt, ohne Ihre Dateien irgendwohin hochzuladen; alles läuft in Ihrem Tab. Um ein paar zusätzliche Bytes aus einem bestehenden JPG oder PNG herauszuquetschen, ohne das Format zu ändern, kodiert /tools/image-compress mit einer von Ihnen gewählten Qualität neu und zeigt Ihnen die Byte-Zahlen vor und nach der Verarbeitung.

WebP vs PNG: die Frage, die nicht sterben will

Die häufigste Verwirrung im Jahr 2026 ist nach wie vor WebP vs PNG. Die Kurzantwort: Verlustfreies WebP ist für nahezu jeden Web-Anwendungsfall strikt besser als PNG. Es ist kleiner, unterstützt denselben Alphakanal, und jeder Browser, der für Sie zählt, decodiert es. Die einzigen Gründe, heute weiterhin PNG zu verwenden, sind nachgelagerte Tools, die WebP nicht akzeptieren (einige Werbenetzwerke, einige veraltete CMS-Plugins, einige Druck-Workflows), und die Tatsache, dass PNG das De-facto-Austauschformat unter Designern ist.

Wenn Sie ein neues Produkt von Grund auf bauen, stellen Sie Ihre Asset-Pipeline standardmäßig auf verlustfreies WebP für UI und verlustbehaftetes AVIF für Fotos um, und greifen Sie nur auf PNG und JPG zurück, wenn etwas das moderne Format ablehnt.

Häufige Stolperfallen

• Kodieren Sie ein JPG nicht erneut als JPG mit höherer Qualität in der Erwartung, dass die Datei besser aussieht. Die ursprüngliche Quantisierung hat bereits Information verworfen; Sie machen die Datei nur größer.
• Speichern Sie Screenshots nicht als JPG. Das blockige Klingeln um Text ist unverkennbar und nicht behebbar. Verwenden Sie PNG oder verlustfreies WebP.
• Achten Sie auf das Farbprofil. AVIF und moderne WebP-Encoder bewahren ICC-Profile standardmäßig; ältere Tools entfernen sie, und Ihr Bild verschiebt den Farbton auf Wide-Gamut-Displays.
• Testen Sie die Qualitätsskala Ihres AVIF-Encoders. Verschiedene Encoder verwenden unterschiedliche Konventionen: libavif nutzt eine Qualität von 0 bis 100, während avifenc historisch ein Quantisierer-Min/Max von 0 bis 63 verwendete, bei dem niedriger besser ist.
• Wenn Sie ein CDN nutzen, das im laufenden Betrieb neu kodiert, stellen Sie sicher, dass es AVIF tatsächlich über den Accept-Header aushandelt. Viele CDNs setzen standardmäßig nur auf WebP, sofern Sie nicht eine Einstellung umlegen.

Was ist mit JPEG XL?

JPEG XL ist ein wirklich gutes Format, technisch konkurrenzfähig mit AVIF und mit dem einzigartigen Kunststück, bestehende JPGs verlustfrei in eine etwa 20 Prozent kleinere Größe transcodieren zu können. Im Jahr 2026 liefert Safari es aus, Firefox unterstützt es hinter einem Flag, und Chrome aktiviert es immer noch nicht standardmäßig. Bis sich das ändert, behandeln Sie JXL eher als Format zum Beobachten denn zum Ausrollen. AVIF ist heute das moderne Format mit browserübergreifender Unterstützung.

Der 30-Sekunden-Entscheidungsbaum

Ist es eine Fotografie, erzeugen Sie AVIF und WebP und greifen Sie auf JPG zurück. Hat es Transparenz oder scharfe Kanten, erzeugen Sie verlustfreies WebP und greifen Sie auf PNG zurück. Wenn Sie keinen Build-Schritt fahren können, liefern Sie JPG für Fotos und PNG für alles andere und beschäftigen Sie sich mit etwas anderem. Bildformate sind im Jahr 2026 kein Forschungsprojekt mehr; die Antworten sind weitgehend geklärt, und das Tooling ist ausgereift. Wählen Sie das richtige Format, richten Sie einen Fallback ein und verwenden Sie die gesparte Zeit für etwas anderes.