Bilder in modernen Formaten bereitstellen

Wenn PageSpeed Insights oder Lighthouse „Bilder in modernen Formaten bereitstellen" verlangt (die genaue Formulierung kann je nach Lighthouse-Version abweichen), wurden Bilder als JPEG, PNG oder GIF gefunden, die in einem modernen Format wie WebP oder AVIF deutlich kleiner wären. Weil Bilder meist der schwerste Teil einer Seite sind, ist der Formatwechsel einer der schnellsten Wege, das Seitengewicht ohne sichtbaren Qualitätsverlust zu senken. Dieser Leitfaden erklärt, was moderne Bildformate sind und wie Sie sie bereitstellen, von der Konvertierung bis zum sicheren Fallback.

Was moderne Bildformate sind

Moderne Formate sind neuere Bild-Codecs, die weit effizienter komprimieren als die Formate, mit denen das Web groß geworden ist. WebP, von allen aktuellen Browsern unterstützt, ist typischerweise 25 bis 35 Prozent kleiner als ein vergleichbares JPEG und deutlich kleiner als ein PNG. AVIF, das neuere der beiden, spart bei gleicher sichtbarer Qualität oft 50 Prozent oder mehr. Beide unterstützen verlustbehaftete und verlustfreie Komprimierung und beide beherrschen Transparenz, können also JPEG und PNG gleichermaßen ersetzen.

Lighthouse schätzt, wie viele Kilobyte jedes Bild in einem modernen Format sparen würde, und meldet die Summe. Die Einsparung summiert sich über eine Galerie oder ein Produktraster, in dem dutzende Bilder je ein Drittel oder die Hälfte ihres Gewichts verlieren.

Wie Lighthouse die Formate bewertet

Lighthouse lädt jedes Bild der Seite und schätzt, wie viele Kilobyte eine Umwandlung in ein modernes Format sparen würde. Betroffen sind vor allem große JPEGs und PNGs, etwa Hero-Bilder, Produktfotos und Hintergründe. Kleine Icons oder bereits stark komprimierte Bilder erscheinen selten, weil die Ersparnis dort gering ist. Die Prüfung nennt jede Datei mit ihrem Sparpotenzial, was die Priorisierung erleichtert: Ein einzelnes großes Hero-Bild wiegt meist schwerer als viele kleine.

Warum es für Ladezeit und Core Web Vitals zählt

Das große Bild oberhalb der Falz ist häufig das Largest-Contentful-Paint-Element, deshalb zeichnet eine kleinere Datei früher und verbessert genau die Kennzahl, die Nutzer am stärksten spüren. Leichtere Bilder senken außerdem das gesamte Seitengewicht, was auf getakteten mobilen Verbindungen und langsameren Netzen zählt. Weil die Core Web Vitals ein Google-Ranking-Signal sind, nützt das Konvertieren der Bilder Nutzererfahrung und Sichtbarkeit zugleich. Das Format ist ein Hebel der Bildoptimierung, er greift zusammen mit der richtigen Bildgröße und dem verzögerten Laden von Bildern außerhalb des Sichtbereichs, und die drei zusammen lösen meist den Großteil der bildbezogenen Warnungen.

Moderne Formate bereitstellen

1. Bilder nach WebP oder AVIF konvertieren

Bestehende Dateien mit einem Kommandozeilen-Werkzeug, einem Build-Plugin oder einem Online-Optimierer konvertieren. Squoosh eignet sich für einzelne Bilder, cwebp und avifenc für ganze Stapel:

# WebP mit Qualität 80
cwebp -q 80 foto.jpg -o foto.webp

# AVIF, stärkere Komprimierung
avifenc --min 20 --max 30 foto.jpg foto.avif

Qualität um 80 ist bei WebP ein guter Startpunkt, das Ergebnis mit dem Original vergleichen und anpassen. AVIF kann niedriger gehen und dabei sauber aussehen, daher die größere Einsparung.

2. Fallback mit dem picture-Element

Nicht jeder Browser bevorzugt dasselbe Format, deshalb den Browser wählen lassen und sauber zurückfallen. Das <picture>-Element liefert AVIF, wo unterstützt, dann WebP, dann das Original als Sicherheitsnetz:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" width="1200" height="800" alt="Berg im Sonnenaufgang">
</picture>

Der Browser liest die Quellen der Reihe nach und lädt das erste Format, das er unterstützt. Das einfache <img> bleibt der Fallback für alles, was keines der beiden versteht.

3. Konvertierung per CDN oder Build automatisieren

Von Hand zu konvertieren skaliert nicht. Ein Bild-CDN kann den Browser über Content-Negotiation erkennen und automatisch AVIF, WebP oder das Original aus einer einzigen Quelldatei ausliefern, oft zusammen mit der Größenanpassung in derselben Anfrage. Ein Build-Plugin erreicht dasselbe für eine statische Pipeline. Automatisierung bedeutet außerdem, dass neue Uploads optimiert sind, ohne dass jemand daran denken muss. Achten Sie dabei auf korrektes Caching pro Format, über den Vary-Header oder eine formatbewusste CDN-Konfiguration, damit kein Client versehentlich das Format eines anderen aus dem Cache erhält.

4. Format mit Größe und Komprimierung kombinieren

Das Format allein ist nicht die ganze Geschichte. Eine moderne Datei, die immer noch viermal größer ist als ihre Anzeigegröße, verschenkt den Großteil des Vorteils, deshalb Konvertieren und richtige Größe zusammen angehen. Sinnvolle verlustbehaftete Komprimierung anwenden und verlustfrei nur dort, wo jedes Pixel exakt sein muss, etwa bei Logos. Das <picture>-Element kann beides zugleich tragen, jedes Format in mehreren Breiten, sodass der Browser die kleinste darstellbare Datei wählt:

<picture>
  <source type="image/avif"
          srcset="hero-800.avif 800w, hero-1200.avif 1200w"
          sizes="(max-width: 800px) 100vw, 1200px">
  <source type="image/webp"
          srcset="hero-800.webp 800w, hero-1200.webp 1200w"
          sizes="(max-width: 800px) 100vw, 1200px">
  <img src="hero-1200.jpg" width="1200" height="800" alt="Berg im Sonnenaufgang">
</picture>

5. Animierte GIFs durch Video oder animiertes WebP ersetzen

Animierte GIFs gehören zu den schwersten Assets im Web, oft mehrere Megabyte für wenige Sekunden Bewegung. Sie in ein kurzes, stummes <video> mit MP4- und WebM-Quelle oder in animiertes WebP oder AVIF umwandeln. Die Einsparung ist dramatisch, häufig 80 Prozent oder mehr, und Lighthouse meldet dafür auch die verwandte Empfehlung, für animierte Inhalte Videoformate zu nutzen.

6. In WordPress ohne Code

Die meisten WordPress-Bildoptimierungs-Plugins konvertieren beim Upload nach WebP oder AVIF und liefern das moderne Format automatisch mit Fallback aus, ohne das Theme anzufassen. Konvertierung aktivieren, bestehende Medien neu erzeugen, damit ältere Uploads abgedeckt sind, und den Fallback für den seltenen Browser prüfen, der ihn braucht.

Die richtige Qualität wählen

Der Formatwechsel entfaltet seine Wirkung erst mit der passenden Qualitätsstufe. Verlustbehaftete Komprimierung verwirft Bildinformationen, die das Auge kaum wahrnimmt, und ist für Fotos die richtige Wahl. Verlustfreie Komprimierung bewahrt jedes Pixel und ist Grafiken, Logos und Screenshots mit scharfen Kanten vorbehalten. Ein guter Startwert ist Qualität 75 bis 82 für WebP und ein etwas niedrigerer Bereich für AVIF, das bei gleicher wahrgenommener Qualität weiter heruntergehen kann. Wichtig ist der direkte Vergleich mit dem Original bei realer Anzeigegröße, nicht bei starkem Zoom. Zu starke Komprimierung erzeugt sichtbare Artefakte an Kanten und in Farbverläufen, zu schwache verschenkt die Einsparung. Zwei oder drei Testbilder verschiedener Motive geben schnell ein Gefühl für den richtigen Wert.

WebP oder AVIF: was verwenden

Es ist nicht nötig, sich auf nur eines festzulegen. AVIF bietet die beste Komprimierung und wird von allen aktuellen großen Browsern unterstützt, kodiert aber langsamer, und ein kleiner Anteil älterer Clients kennt es noch nicht. WebP ist heute universell unterstützt und kodiert schnell. AVIF zuerst mit einer WebP-Quelle und einem JPEG- oder PNG-Fallback, wie im <picture>-Beispiel oben, gibt jedem Besucher die kleinste Datei, die sein Browser lesen kann. Das Format zum Inhalt passen: Fotos komprimieren am besten in AVIF, flache Grafiken, Icons und Screenshots mit einfarbigen Flächen oft gut in verlustfreiem WebP oder einem kleinen PNG. Bei sehr großen Katalogen die langsamere AVIF-Kodierung gegen Speicher und Build-Zeit abwägen und ein Bild-CDN nutzen, damit die Konvertierung einmalig bei Bedarf geschieht.

Format ist nur ein Teil der Bildoptimierung

Ein modernes Format wirkt am stärksten im Zusammenspiel mit zwei weiteren Maßnahmen. Das richtige Dimensionieren stellt sicher, dass ein Bild nicht viel größer ausgeliefert wird, als es angezeigt wird, denn eine kleine AVIF-Datei in vierfacher Anzeigegröße verschenkt den Vorteil. Das verzögerte Laden von Bildern außerhalb des sichtbaren Bereichs gibt Bandbreite für das frei, was der Besucher sofort sieht, wobei das LCP-Bild bewusst nicht verzögert wird. Erst wenn Format, Größe und Ladezeitpunkt zusammenpassen, verschwinden die bildbezogenen Warnungen dauerhaft aus dem Bericht. In der Praxis lohnt es sich, alle drei in einem Durchgang anzugehen, weil dieselben Werkzeuge, ein Bild-CDN oder ein Optimierungs-Plugin, meist alle drei zugleich erledigen.

Häufige Fehler bei der Umstellung

Einige Fehler treten immer wieder auf. Das Original wird durch die moderne Datei ersetzt, ohne einen Fallback zu hinterlegen, sodass ältere Clients ein kaputtes Bild sehen. Die neue Datei wird zwar konvertiert, aber weiterhin in voller Auflösung ausgeliefert, obwohl sie klein angezeigt wird, wodurch der größte Teil des Vorteils verpufft. Transparente PNGs werden verlustbehaftet zu JPEG konvertiert und verlieren die Transparenz, statt als WebP oder AVIF erhalten zu bleiben. Und das LCP-Bild wird zwar modern ausgeliefert, aber gleichzeitig per Lazy Loading verzögert, was den Ladevorteil wieder aufhebt. Format, Größe und Ladezeitpunkt gehören zusammen betrachtet. Ein weiterer Fehler ist, nur die Startseite zu prüfen und die formatlastigen Vorlagen wie Kategorie- und Produktseiten zu übersehen, auf denen die meisten Bilder liegen.

Den Fix prüfen

PageSpeed Insights erneut ausführen und bestätigen, dass die Einsparungen für moderne Formate aus dem Bericht verschwunden sind. Im Netzwerk-Panel der DevTools prüfen, dass Bilder mit dem erwarteten Typ ausgeliefert werden, etwa image/avif oder image/webp. In mehr als einem Browser testen, damit der Fallback-Pfad funktioniert. Meldet die Prüfung danach weiter Bilder, drei Dinge prüfen: Das CDN oder Plugin cacht womöglich das alte Format und braucht eine Cache-Leerung, die Quellbilder wurden nicht neu erzeugt, oder ein PNG mit Transparenz braucht AVIF oder verlustfreies WebP statt einer JPEG-Konvertierung.

Häufige Fragen

Was sind moderne Bildformate?

Moderne Bild-Codecs, vor allem WebP und AVIF, die weit effizienter komprimieren als JPEG, PNG oder GIF. Sie erzeugen bei gleicher sichtbarer Qualität deutlich kleinere Dateien und unterstützen verlustbehaftete und verlustfreie Komprimierung.

Ist AVIF besser als WebP?

AVIF komprimiert meist stärker und spart oft 50 Prozent oder mehr, WebP spart rund 25 bis 35 Prozent gegenüber JPEG. WebP kodiert schneller und hat leicht breitere Altunterstützung. AVIF zuerst mit WebP-Fallback gibt jedem Besucher die kleinste Datei, die sein Browser unterstützt.

Wie konvertiere ich Bilder nach WebP oder AVIF?

Mit einem Werkzeug wie Squoosh für einzelne Bilder oder cwebp und avifenc für Stapel. Auf einer Live-Seite kann ein Bild-CDN oder Optimierungs-Plugin automatisch konvertieren und das richtige Format ausliefern.

Funktionieren moderne Formate in jedem Browser?

WebP funktioniert in jedem aktuellen Browser, AVIF in allen aktuellen großen Browsern. Mit dem <picture>-Element und einem JPEG- oder PNG-Fallback erhält jeder Client, dem ein Format fehlt, trotzdem ein funktionierendes Bild.

Verbessert das Bereitstellen moderner Formate die Core Web Vitals und das Ranking?

Ja. Kleinere Bilder zeichnen schneller, was den Largest Contentful Paint verbessert und das Seitengewicht senkt. Da die Core Web Vitals ein Ranking-Signal sind, nützt die Verbesserung Nutzern und Sichtbarkeit zugleich.

Wie stelle ich moderne Formate in WordPress bereit?

Ein Bildoptimierungs-Plugin nutzen, das beim Upload nach WebP oder AVIF konvertiert und es mit automatischem Fallback ausliefert. Bestehende Medien neu erzeugen, damit ältere Bilder ebenfalls konvertiert werden, und den Fallback in einem Browser prüfen, dem das Format fehlt.

Wie viel spart der Wechsel zu WebP oder AVIF?

WebP spart rund 25 bis 35 Prozent gegenüber JPEG, AVIF oft 50 Prozent oder mehr bei gleicher sichtbarer Qualität. Über eine ganze Galerie oder einen Produktkatalog summiert sich das zu einem erheblichen Teil des Seitengewichts.