Für die meisten Websites im Jahr 2026 lautet die Antwort mehrschichtig: Servieren Sie AVIF für die größten Einsparungen (oft etwa 50 % kleiner als JPEG bei ähnlicher Qualität), fallen Sie auf WebP zurück für nahezu universelle Unterstützung und behalten Sie JPEG für die ältesten Clients. AVIF gewinnt bei Dateigröße, WebP bei Kompatibilität, JPEG bei Allgegenwart.
Wenn Sie sich den Kopf zerbrochen haben, für welches Next-Gen-Bildformat Sie sich entscheiden sollen, hier der befreiende Teil: Sie müssen sich nicht für nur eines entscheiden. Der moderne Ansatz serviert alle drei und lässt jeden Browser die kleinste Version nehmen, die er dekodieren kann. Dieser Leitfaden gibt Ihnen die Entscheidungsregel, die realen Größen- und Kompromisse bei der Unterstützung und wie jedes Format die Core Web Vitals beeinflusst, damit Sie aufhören können zu raten und ausliefern.
WebP vs AVIF vs JPEG: Die Kurzantwort#
Die drei Formate liegen auf einem klaren Spektrum von neuer und kleiner versus älter und sicherer:
- JPEG (1992) ist die universelle Basis. Jeder Browser, jedes Betriebssystem und jedes Gerät öffnet es. Es ist auch am wenigsten effizient, sodass identische Qualität die meisten Bytes kostet.
- WebP (Google, 2010) ist typischerweise 25% bis 35% kleiner als JPEG bei vergleichbarer Qualität und wird mittlerweile von praktisch jedem gängigen Browser unterstützt. Dies ist Ihr sicherer Standard.
- AVIF (2019, basierend auf dem AV1-Videocodec) ist das effizienteste der drei, häufig etwa 50% kleiner als JPEG und deutlich kleiner als WebP, mit Unterstützung in allen aktuellen Hauptbrowsern.
Die Entscheidung in einem Satz: Verwenden Sie AVIF als primäres Format mit WebP als Fallback und behalten Sie JPEG nur bei, wenn Sie sehr alte Clients unterstützen müssen. Servieren Sie sie zusammen mit dem HTML-<picture>-Element, damit der Browser das beste ihm bekannte auswählt.
Wie die drei Formate im Vergleich abschneiden#
Die Abwägungen lassen sich auf vier Punkte reduzieren: Dateigröße, Browserunterstützung, Funktionen und Kodierungskosten. Hier der direkte Vergleich.
| Format | Typische Größe vs. JPEG | Browserunterstützung | Transparenz | Am besten geeignet für |
|---|---|---|---|---|
| JPEG | Basislinie (100%) | Universell, jeder Browser | Nein | Fotos, Fallback, E-Mail |
| WebP | ~25-35 % kleiner | Alle aktuellen Browser | Ja (verlustbehaftet + verlustfrei) | Sicherer universeller Standard |
| AVIF | ~50 % kleiner | Alle gängigen Hauptbrowser | Ja, plus HDR/großer Farbraum | Hero-Bilder, maximale Einsparung |
Einige Details zur Tabelle:
- Die Größenangaben sind Näherungswerte und hängen vom Bild ab. Bei fotografischen Inhalten mit weichen Verläufen (Himmel, Haut) liegt AVIF am weitesten vorn. Einfache Grafiken mit flächigen Farben bringen geringere Einsparungen, und hier kann ein gut optimiertes PNG oder SVG immer noch die bessere Wahl sein.
- Kodierungsgeschwindigkeit: AVIF ist langsamer zu kodieren als WebP oder JPEG, was für Build-Pipelines mit Tausenden von Bildern relevant ist, aber bei einem einmaligen Upload keine Rolle spielt.
- Transparenz: Sowohl WebP als auch AVIF unterstützen Alphatransparenz und können daher PNG für fotografische Bilder mit transparentem Hintergrund ersetzen, oft zu einem Bruchteil der Größe.
Ein praktischer Hinweis zur Qualität: Jagen Sie nicht der absolut kleinsten Datei hinterher. Bei sehr aggressiven AVIF-Einstellungen können in feinen Details unscharfe, „aquarellartige“ Artefakte auftreten. Zielen Sie auf die kleinste Datei ab, die in voller Größe noch sauber aussieht, nicht auf die absolut kleinste Datei.
Warum die Dateigröße über Core Web Vitals entscheidet#
Dieser Teil verbindet die Formatwahl mit Rankings und Umsatz. Bilder sind in der Regel das schwerste Element auf einer Seite, und das größte Bild ist sehr oft das Largest Contentful Paint (LCP)-Element, also das Hero-Bild oder Beitragsbild, das bestimmt, wann Google Ihre Seite als "geladen" betrachtet.
LCP ist einer von Googles Core Web Vitals, und ein langsames LCP schadet sowohl der Benutzererfahrung als auch der Suchleistung. Die Rechnung ist einfach: Wenn Ihr Hero-Bild ein 400 KB JPEG ist und die AVIF-Version 200 KB, haben Sie die Bytes halbiert, die der Browser herunterladen muss, bevor LCP ausgelöst wird. Bei einer mobilen Verbindung kann das den Unterschied zwischen einer "guten" und einer "verbesserungswürdigen" Bewertung ausmachen.
Zwei weitere größenbedingte Vorteile, die erwähnenswert sind:
- Bandbreite und Kosten: Kleinere Bilder bedeuten weniger Datenübertragung, was CDN-Kosten senkt und Nutzern mit begrenzten oder langsamen Verbindungen hilft.
- Crawl-Effizienz: Leichtere Seiten werden für alle schneller gerendert, einschließlich des Rendering-Schritts, den Suchmaschinen durchführen.
Die Kernaussage ist, dass "bestes Bildformat für das Web" eigentlich eine Core Web Vitals-Frage ist. Kleinere, korrekt ausgelieferte Bilder gehören zu den effektivsten Maßnahmen zur Seitenoptimierung.
Wie Sie alle drei Formate mit einem einzigen Tag ausliefern#
Sie wählen nicht ein einzelnes Format für Ihre gesamte Website. Sie stellen die modernen Formate und einen Fallback bereit, und der Browser wählt das erste aus, das er dekodieren kann. Das <picture>-Element erledigt dies nativ.
Schritt 1: Komprimieren Sie Ihr Quellbild in alle drei Formate#
Beginnen Sie mit Ihrem hochwertigsten Original (das rohe JPEG oder PNG direkt von der Kamera oder dem Designtool). Exportieren Sie ein AVIF, ein WebP und ein optimiertes JPEG desselben Bildes mit denselben Abmessungen. Ein kostenloser Bildkompressor erledigt dies in einem Durchgang und läuft vollständig in Ihrem Browser, sodass das Originalfoto nie auf einen Server hochgeladen wird.
Schritt 2: Binden Sie sie in ein picture-Element ein#
Listen Sie die Formate von klein nach groß auf. Der Browser liest von oben nach unten und stoppt beim ersten unterstützten type, daher kommt AVIF zuerst, WebP als zweites, und das einfache <img>-JPEG ist der universelle Fallback.
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Beschreibender Alternativtext" width="1200" height="630">
</picture>
Behalten Sie die Attribute width und height auf dem <img>. Sie ermöglichen es dem Browser, Platz zu reservieren, bevor das Bild geladen wird, was Layoutverschiebungen (CLS, eine weitere Core Web Vital) verhindert.
Schritt 3: Entfernen Sie Metadaten und passen Sie die Größe vor der Komprimierung an#
Zwei einfache Erfolge, bevor Sie überhaupt ein Format wählen. Erstens: Größe an die tatsächlichen Anzeigemaße anpassen. Ein 4000px-Foto in einen 1200px-Slot zu laden, verschwendet Bytes, die kein Codec zurückgewinnen kann. Verwenden Sie daher einen Bildgrößenanpasser, um die echte Layoutgröße zu erreichen. Zweitens: Entfernen Sie EXIF-Metadaten (Kameramodell, GPS-Koordinaten, Zeitstempel), die Gewicht hinzufügen und private Standortdaten preisgeben können. Gute Kompressoren entfernen sie automatisch.
Schritt 4: Lassen Sie das Tool automatisch das kleinste auswählen#
Anstatt drei Exporte nach Augenmaß zu vergleichen, komprimieren Sie in alle drei Formate und vergleichen Sie die Ausgabegrößen direkt. Der kostenlose Bildkompressor zeigt die resultierende Byte-Größe für jedes Format aus einem einzigen Upload an, sodass Sie das kleinste auswählen können, das noch gut aussieht, ohne manuelles Ausprobieren.
Verlustbehaftet vs. verlustfrei und die Wahl der Qualitätsstufe#
Alle drei Formate werden für Fotos normalerweise im verlustbehafteten Modus verwendet, d.h. sie verwerfen Details, die das Auge kaum wahrnimmt, im Austausch für deutlich kleinere Dateien. WebP und AVIF unterstützen auch den verlustfreien Modus, der jedes Pixel behält, aber größere Dateien erzeugt. Dieser eignet sich für Screenshots, Diagramme oder Bilder mit klarem Text und flächigen Farben.
Die Qualitätseinstellung ist der Bereich, in dem die meisten Einsparungen (und die meisten Fehler) passieren:
- JPEG-Qualität 75-85 ist der optimale Bereich für Fotos. Unter ~70 zeigen sich blockartige Artefakte an Kanten.
- WebP-Qualität 75-80 entspricht in etwa JPEG 85 bei kleinerer Dateigröße, da WebP bei gleicher wahrgenommener Qualität effizienter komprimiert.
- AVIF-Qualität 50-65 sieht oft so sauber aus wie eine viel höhere JPEG-Einstellung. Die Qualitätsskala von AVIF ist nicht direkt mit der von JPEG vergleichbar, also nehmen Sie nicht an, dass "Qualität 80" in allen Formaten dasselbe bedeutet.
Die zuverlässige Methode ist nicht, einer Zahl zu vertrauen, sondern die Ausgabe zu vergleichen. Kodieren Sie das Bild, betrachten Sie es in voller Anzeigegröße und reduzieren Sie die Qualität schrittweise, bis Sie das erste Artefakt sehen, dann gehen Sie eine Stufe zurück. Das ergibt die kleinste akzeptable Datei für dieses spezifische Bild, was immer besser ist als eine pauschale Qualitätseinstellung für alles.
Eine subtile Falle: Die erneute Komprimierung eines bereits verlustbehafteten Bildes (ein JPEG als verlustbehaftetes WebP speichern) verstärkt die Verluste. Exportieren Sie Ihre modernen Formate immer aus der hochwertigsten Originaldatei, die Sie haben, nicht aus einer bereits komprimierten Kopie.
Responsive Bilder: Die richtige Größe ausliefern, nicht nur das richtige Format#
Das Format ist die eine Hälfte der Page-Speed-Gleichung. Die andere Hälfte sind die Abmessungen. Ein Smartphone mit einem 400px breiten Bildschirm hat nichts von einem 1600px Bild, und das große Bild zu übertragen verschwendet Bytes, unabhängig vom Format.
Die Attribute srcset und sizes ermöglichen es Ihnen, mehrere Größen desselben Bildes anzubieten, und der Browser wählt basierend auf dem Bildschirm und der Auflösung des Geräts aus. Sie können dies mit <picture> kombinieren, sodass jedes Format auch in mehreren Breiten verfügbar ist.
<picture>
<source
type="image/avif"
srcset="hero-400.avif 400w, hero-800.avif 800w, hero-1200.avif 1200w"
sizes="(max-width: 600px) 400px, 1200px">
<img src="hero-800.jpg" alt="Beschreibender Alternativtext" width="1200" height="630">
</picture>
Dies kombiniert den Formatvorteil (AVIF gegenüber JPEG) mit dem Größenvorteil (ein 400px Bild für Smartphones), und die beiden Einsparungen addieren sich. Für eine Content-Website, auf der derselbe Artikel auf Smartphones und Desktops läuft, ist diese Kombination oft die größte einzelne Verbesserung der mobilen LCP.
Wenn das manuelle Schreiben dieses Markups zu aufwendig ist, generieren die meisten modernen Frameworks und CMS-Plattformen AVIF- und WebP-Varianten sowie das responsive Markup automatisch beim Hochladen. Das Prinzip ist in beiden Fällen dasselbe: kleinstes Format, das der Browser unterstützt, in der kleinsten Größe, die das Layout benötigt.
Wann Sie AVIF oder WebP NICHT verwenden sollten#
Diese Formate sind für Fotos und komplexe Rastergrafiken gedacht. Für zwei häufige Fälle sind sie das falsche Werkzeug:
- Logos, Icons und Strichzeichnungen: Verwenden Sie SVG. Es ist ein Vektorformat, bleibt bei jeder Größe gestochen scharf und ist meist winzig. Wenn Sie nur ein Rasterlogo haben, behandelt unser Leitfaden und Tool zum Konvertieren von SVG zu PNG den Rundgang.
- Animationen: Kurze Schleifen sind als stummgeschaltetes, automatisch abspielendes Video (MP4 oder WebM) weitaus besser geeignet als ein schweres animiertes GIF oder sogar animiertes WebP.
Es gibt auch den Randfall einiger sehr alter oder Nischen-Clients, die weder AVIF noch WebP dekodieren. Genau dafür ist der JPEG-Fallback in Ihrem <picture>-Element gedacht, also verlieren Sie nichts, wenn Sie ihn einfügen.
Die 2026-Entscheidungsregel, zusammengefasst#
Alles zusammengenommen ist der Workflow kurz:
- Standardmäßig AVIF, Ausweichen auf WebP, JPEG als Sicherheitsnetz behalten. Servieren Sie alle drei mit
<picture>und lassen Sie den Browser wählen. - AVIF für Hero- und große Fotos, wo seine etwa 50% Einsparung gegenüber JPEG am meisten für LCP bringt.
- WebP, wenn Sie nur ein modernes Format ausliefern, da seine Unterstützung praktisch universell ist und es JPEG immer noch deutlich übertrifft.
- SVG für Logos und Symbole, niemals ein Rasterformat.
- Zuerst skalieren, Metadaten entfernen, dann komprimieren, und lassen Sie das Tool melden, welches Format am kleinsten wurde.
Die Formatwahl ist nur ein Hebel. Für das vollständige Bild zur Reduzierung des Seitengewichts ohne Qualitätseinbußen sehen Sie unsere Anleitung zur Verwendung eines kostenlosen Bildkompressors zur Steigerung der Seitengeschwindigkeit.
Häufig gestellte Fragen#
Ist AVIF besser als WebP? In Bezug auf die Dateigröße meistens ja. AVIF erzeugt bei ähnlicher Qualität in der Regel kleinere Dateien als WebP, oft deutlich sichtbar bei fotografischen Bildern, und bietet HDR- und erweiterte Farbraumunterstützung. WebP kodiert schneller und wird etwas länger universell unterstützt, weshalb die übliche Strategie AVIF als primäres Format mit WebP als Fallback ist.
Wie viel kleiner ist AVIF als JPEG? Bei typischen Fotos ist AVIF oft etwa 50% kleiner als JPEG bei vergleichbarer visueller Qualität, wobei die genaue Ersparnis vom Bild abhängt. Fotos mit weichen Farbverläufen profitieren am meisten, während flächige Grafiken weniger sparen, hier sind SVG oder PNG ohnehin die bessere Wahl.
Sollte ich einfach WebP für alles verwenden? WebP ist eine starke, sichere Standardwahl, da die Browserunterstützung praktisch vollständig ist und es JPEG in der Größe übertrifft. Aber AVIF als primäres Format mit WebP als Fallback liefert noch kleinere Dateien ohne Kompatibilitätsnachteile, da der Browser AVIF nur lädt, wenn er es dekodieren kann.
Schaden diese Formate der Suchmaschinenoptimierung? Das Gegenteil ist der Fall. Kleinere Bilder beschleunigen den Largest Contentful Paint, eine Core Web Vital, die sowohl die Benutzererfahrung als auch die Suchergebnisse beeinflusst. Achten Sie nur auf beschreibende Alt-Texte und korrekte Breiten- und Höhenangaben, um Layout-Verschiebungen zu vermeiden.
Wie konvertiere ich ein JPEG kostenlos in WebP oder AVIF? Laden Sie Ihr Bild in einen kostenlosen browserbasierten Bildkompressor hoch, der WebP und AVIF ausgibt, ohne die Datei an einen Server zu senden. Komprimieren Sie in alle drei Formate gleichzeitig und behalten Sie das kleinste, das in voller Größe noch sauber aussieht.
Was ist das kleinste Bilddateiformat für das Web? Bei Fotos ist AVIF in der Regel das kleinste der gängigen Rasterformate, vor WebP und deutlich vor JPEG. Bei Logos, Symbolen und Strichzeichnungen ist SVG noch kleiner, da es vektorbasiert ist und ohne Pixel hinzuzufügen skaliert.
