Die besten Bildformate für das Web 2026

Bilder sind auf den meisten Webseiten nach wie vor das Schwergewicht – in der Regel mehr Bytes als deine Skripte, Schriften und Stylesheets zusammen. Das richtige Format zu wählen ist die Performance-Entscheidung mit dem größten Hebel, die du treffen kannst, und 2026 hat sich die Antwort endlich gefestigt. Die Kurzfassung: greife zuerst zu AVIF, nutze WebP als Alternative und behalte JPEG als universelles Sicherheitsnetz. PNG hat weiterhin seine Aufgabe, aber eine engere, als die meisten annehmen. So solltest du darüber nachdenken.

Der moderne Bild-Stack auf einen Blick

Drei verlustbehaftete Formate dominieren heute fotografische Inhalte im Web, in absteigender Reihenfolge der Kompressionseffizienz:

AVIF– abgeleitet vom Video-Codec AV1, erzeugt es bei gegebener visueller Qualität meist die kleinsten Dateien, oft 30–50 % kleiner als JPEG und spürbar kleiner als WebP. Es unterstützt außerdem einen weiten Farbraum, HDR, Transparenz sowie verlustbehaftete und verlustfreie Modi.
WebP– ein etwas älteres Format von Google, das immer noch ausgezeichnet ist: rund 25–35 % kleiner als JPEG, mit Unterstützung für Transparenz und Animation. Sein größter Vorteil heute ist die Kodiergeschwindigkeit und eine grundsolide Browser-Unterstützung.
JPEG– fast 35 Jahre alt und universell unterstützt. Es ist dein Fallback, nicht deine erste Wahl, aber es wird buchstäblich überall dargestellt.

Die gute Nachricht für 2026 ist, dass dies kein Glücksspiel mehr ist. AVIF wird von den aktuellen Versionen von Chrome, Edge, Firefox und Safari unterstützt, und WebP läuft seit Jahren in allen wichtigen Browsern. Die aktuelle Support-Matrix kannst du in MDNs Referenz zu Bildtypen einsehen, die die Verfügbarkeit jedes Formats pro Browser verfolgt.

AVIF oder WebP – wofür solltest du dich entscheiden?

Wenn du nur ein modernes Format ausliefern kannst, läuft die Entscheidung meist auf einen Kompromiss zwischen Dateigröße und Kodieraufwand hinaus:

Wähle AVIF, wenn es vor allem auf Bytes ankommt – große Hero-Bilder, Fotografie-Portfolios, alles, wo jedes Kilobyte in deine Ladekennzahlen einfließt. Es bewältigt außerdem sanfte Verläufe und Himmel mit weit weniger Banding-Artefakten als JPEG.
Wähle WebP, wenn du eine schnelle, günstige Kodierung im großen Maßstab brauchst oder ein einziges modernes Format mit größtmöglicher Reichweite und vorhersehbarem Verhalten willst. WebP kodiert deutlich schneller als AVIF, was zählt, wenn du Tausende von Bildern konvertierst.

Eigentlich musst du dich aber gar nicht entscheiden. Die richtige Antwort für eine Produktivseite ist, beide anzubieten und den Browser wählen zu lassen – und genau dafür ist das <picture>-Element da. Du kannst gleich jetzt mit beiden experimentieren, mit FileShrinkings AVIF-Kompressor und WebP-Kompressor, die Ausgabegrößen nebeneinander vergleichen und entscheiden, was für deinen Inhalt am besten funktioniert. Alles läuft in deinem Browser, also wird nichts hochgeladen.

Das richtige Format mit <picture> ausliefern

Der sauberste Weg, moderne Formate mit einem Fallback auszuliefern, ist die Inhaltsaushandlung in HTML. Das <picture>-Element erlaubt dir, Kandidatenquellen in Prioritätsreihenfolge aufzulisten; der Browser nutzt die erste, die er versteht, und ignoriert den Rest:

Liste deine AVIF-Quelle zuerst auf, da das effizienteste Format gewinnen sollte, wenn es verfügbar ist.
Liste WebP an zweiter Stelle auf, um jeden Browser abzudecken, dem AVIF fehlt, der aber WebP unterstützt.
Setze ein gewöhnliches JPEG (oder PNG) in den schließenden <img>-Tag als garantierten Fallback – und um deinen alt-Text, die width und die height mitzuführen.

Da der Browser nur die eine Quelle herunterlädt, die er wählt, erhältst du so das kleinste Format, das jeder Besucher darstellen kann – ganz ohne JavaScript oder serverseitige Erkennung. Für das vollständige Markup-Muster erklärt der web.dev-Leitfaden zu responsiven Bildern, wie man <picture> auch mit srcset für den Auflösungswechsel kombiniert.

Wann PNG (und SVG) noch wichtig sind

Moderne verlustbehaftete Formate sind für Fotografien gemacht. Für flache Grafiken sind sie das falsche Werkzeug, und PNG verdient sich in ein paar konkreten Fällen noch seinen Platz:

Scharfkantige Grafiken mit wenigen Farben– Logos, Icons, UI-Screenshots und Diagramme. Verlustfreies PNG hält Text und Kanten gestochen scharf, wo verlustbehaftete Kompression sie verschmieren würde.
Pixelgenaue Screenshots, die du exakt reproduzieren willst, Byte für Byte.
Ausgangs-Master, die du später wieder bearbeiten wirst, da PNG verlustfrei ist und keinen Generationsverlust ansammelt.

Allerdings ist SVGfür viele dieser Aufgaben sogar noch besser: Logos und einfache Icons als Vektoren gezeichnet bleiben in jeder Größe rasierklingenscharf und wiegen oft weniger als ein Raster-Äquivalent. Und wenn du doch eine Rastergrafik mit Transparenz im Web brauchst, unterstützen sowohl AVIF als auch WebP ebenfalls einen Alphakanal – ein verlustfreies WebP kann PNG bei der Größe also häufig schlagen. Wenn du ein Asset im falschen Format hast, kann der Bildkonverter es umwandeln, ohne dass etwas neu hochgeladen wird.

Bildgewicht und Core Web Vitals

Die Formatwahl betrifft nicht nur die Bandbreitenkosten – sie wirkt sich direkt auf Googles Core Web Vitals aus, die sowohl die Nutzererfahrung als auch das Suchranking beeinflussen. Die am stärksten mit Bildern verknüpfte Kennzahl ist Largest Contentful Paint (LCP): auf einer typischen Seite ist das größte Element das Hero-Bild, daher bestimmt die Geschwindigkeit, mit der dieses Bild eintrifft, weitgehend deinen LCP-Wert. Der empfohlene Zielwert ist ein LCP unter 2,5 Sekunden für den Großteil deiner Besuche.

Ein paar praktische Hebel, grob nach Wirkung geordnet:

Reduziere die Bytes, indem du AVIF oder WebP statt JPEG auslieferst. Ein kleineres LCP-Bild trifft früher ein – das ist der größte einzelne Gewinn.
Passe Bilder an ihre Anzeigegröße an. Ein 4000-px-Foto in ein 800-px-Feld zu liefern, verschwendet den Großteil des Downloads. Nutze srcset, um passend dimensionierte Varianten auszuliefern.
Setze immer width und height (oder nutze CSS aspect-ratio), damit der Browser Platz reserviert und du Layout-Verschiebungen vermeidest, was deinen CLS-Wert schützt.
Vermeide Lazy-Loading beim LCP-Bild. Lade Bilder unterhalb des Falzes verzögert, aber lass das Hero-Bild sofort laden, damit es nicht verzögert wird.

Das Fazit für 2026

Setze für fotografische Inhalte standardmäßig auf AVIF für die kleinsten Dateien, biete WebP als schnelle, breit unterstützte Alternative an und behalte einen JPEG-Fallback innerhalb eines <picture>-Elements, damit jeder Browser etwas erhält. Reserviere PNG für scharfe Grafiken, Screenshots und verlustfreie Master, und nutze SVG für Logos und Icons, wann immer du kannst. Komprimiere vor dem Veröffentlichen, passe jedes Bild an sein Feld an, und deine Core Web Vitals werden es dir danken.

Willst du das in die Praxis umsetzen? Konvertiere und komprimiere deine Bilder direkt im Browser mit den Tools AVIF und WebP oder wechsle das Format mit dem Bildkonverter– keine Uploads, keine Konten, und deine Dateien verlassen nie dein Gerät.