Bildformate WebP und AVIF: Quelltext mit den technischen Angaben, die Suchmaschinen auswerten

Die Formate im Überblick

Format Typ Stärke Schwäche Einsatz
JPEG verlustbehaftet universell kompatibel, gut für Fotos größer als moderne Formate, keine Transparenz Fallback, ältere Systeme
PNG verlustfrei Transparenz, scharfe Kanten sehr groß bei Fotos Screenshots, Grafiken mit Transparenz
GIF verlustfrei, 256 Farben einfache Animationen groß, wenige Farben veraltet, durch Video ersetzen
WebP verlustbehaftet und verlustfrei deutlich kleiner als JPEG und PNG, Transparenz, Animation minimal ältere Kompatibilität Standard für Fotos und Grafiken
AVIF verlustbehaftet und verlustfrei oft noch kleiner als WebP, gute Qualität bei starker Kompression langsameres Kodieren Fotos, wenn die Umgebung es unterstützt
SVG Vektorformat gestochen scharf in jeder Größe, winzig bei einfachen Formen nicht für Fotos geeignet Logos, Icons, Diagramme
JPEG XL verlustbehaftet und verlustfrei leistungsstark, verlustfreie Umwandlung von JPEG eingeschränkte Browserunterstützung noch nicht für den breiten Einsatz

WebP

WebP wurde von Google entwickelt und 2010 vorgestellt. Es erzeugt bei vergleichbarer Qualität typischerweise 25 bis 35 Prozent kleinere Dateien als JPEG und deutlich kleinere als PNG. Es unterstützt Transparenz und Animation und wird von allen aktuellen Browsern unterstützt, einschließlich Safari seit 2020.

Für die meisten Websites ist WebP heute das sinnvolle Standardformat für Fotos und Rastergrafiken.

AVIF

AVIF basiert auf dem Videocodec AV1 und wird von allen großen Browsern unterstützt. Es erreicht bei vielen Fotos noch kleinere Dateien als WebP, besonders bei starker Kompression, und behält dabei Details und Farbverläufe oft besser bei. Die Kodierung dauert länger, was bei der automatischen Erzeugung großer Bildmengen eine Rolle spielen kann.

In der Praxis nutzen viele Websites AVIF mit WebP- oder JPEG-Fallback, wo die Infrastruktur es unterstützt, und WebP als Standard, wo es einfacher sein soll.

Größenvergleich an einem Beispiel

Ein typisches Foto in 1600 × 1067 Pixeln bei visuell vergleichbarer Qualität:

Format Ungefähre Dateigröße
PNG 2,4 MB
JPEG (Qualität 80) 320 KB
WebP (Qualität 80) 210 KB
AVIF (Qualität 60) 140 KB

Die genauen Werte hängen vom Motiv und den Einstellungen ab. Die Tendenz ist aber bei fast allen Fotos dieselbe.

Mit Fallback ausliefern

Mit dem <picture>-Element erhält jeder Browser das beste Format, das er unterstützt:

<picture>
  <source srcset="bad.avif" type="image/avif">
  <source srcset="bad.webp" type="image/webp">
  <img src="bad.jpg" width="1600" height="1067"
       alt="Saniertes Badezimmer mit bodengleicher Dusche">
</picture>

Der Browser wählt die erste unterstützte Quelle. Alt-Text, Abmessungen und Lazy Loading werden am <img> angegeben.

Alternativ können Server oder CDN anhand des Accept-Headers des Browsers automatisch das passende Format ausliefern, ohne dass das HTML geändert werden muss. Viele Bild-CDNs bieten diese Funktion.

SVG für Logos und Icons

Für Logos, Icons, einfache Illustrationen und Diagramme ist SVG meist die beste Wahl. Vektorgrafiken bleiben in jeder Größe scharf, sind bei einfachen Formen oft nur wenige Kilobyte groß und lassen sich per CSS einfärben. Für SEO gilt: SVG-Dateien können in der Bildersuche erscheinen, wenn sie als <img> eingebunden sind. Inline eingebettete SVGs werden als Teil des HTML verarbeitet.

Umstellung in der Praxis

WordPress

Seit Version 5.8 unterstützt WordPress den Upload von WebP, seit 6.5 auch AVIF, sofern der Server es unterstützt. Plugins zur Bildoptimierung wandeln bestehende Bilder automatisch um und liefern sie mit Fallback aus.

Shopsysteme

Shopify liefert Bilder automatisch in modernen Formaten über sein CDN aus. Shopware, WooCommerce und Magento unterstützen WebP je nach Version und Konfiguration, oft über Erweiterungen.

Individuelle Systeme

Bibliotheken und Kommandozeilenwerkzeuge wie cwebp, avifenc, ImageMagick oder libvips erzeugen moderne Formate. In Build-Prozessen lassen sich Bilder automatisch umwandeln.

Bild-CDNs

Dienste wie Cloudflare Images, Bunny Optimizer, imgix oder Cloudinary wandeln Bilder beim Abruf automatisch um, passen die Größe an und liefern das passende Format aus.

Qualität und Kompression

Neben dem Format entscheidet die Qualitätseinstellung. Für Fotos in Websites sind bei WebP Werte zwischen 70 und 85 meist ausreichend, bei AVIF oft etwas niedrigere Werte. Entscheidend ist der Blick auf das Ergebnis, am besten auf einem hochauflösenden Bildschirm. Zu starke Kompression erzeugt Artefakte, die unprofessionell wirken – besonders bei Produktbildern, bei denen Details zählen.

Formate und SEO

  • Core Web Vitals: Kleinere Bilder laden schneller und verbessern den Largest Contentful Paint.
  • Bildersuche: Google indexiert WebP und AVIF genauso wie JPEG und PNG. Das Format hat keinen Einfluss auf das Ranking in der Bildersuche.
  • Dateinamen und Alt-Texte bleiben wichtig, unabhängig vom Format. Mehr im Beitrag Bilder-SEO.
  • URLs bei der Umstellung: Wenn sich die Dateiendung ändert, ändert sich die Bild-URL. Bei Bildern, die in der Bildersuche Besucher bringen, kann eine Weiterleitung oder die Auslieferung über den Accept-Header sinnvoll sein.
Bildformate optimal nutzen
  • Fotos in WebP oder AVIF mit Fallback
  • Logos und Icons als SVG
  • PNG nur, wo verlustfreie Qualität oder Transparenz nötig ist und WebP nicht passt
  • GIF-Animationen durch MP4 oder WebM ersetzen
  • Qualität zwischen 70 und 85 prüfen
  • Größen passend zur Darstellung mit srcset
  • Bestehende Bilder automatisiert umwandeln

Gut zu wissen

Unterstützen alle Browser WebP?

Alle aktuellen Browser unterstützen WebP. Für sehr alte Browser kann ein JPEG-Fallback im <picture>-Element bereitgestellt werden.

Ist AVIF besser als WebP?

Bei vielen Fotos erzeugt AVIF kleinere Dateien bei gleicher oder besserer Qualität. WebP ist schneller zu erzeugen und etwas breiter unterstützt. Beide sind gute Wahl, die Kombination mit Fallback ist ideal.

Muss ich alle alten Bilder umwandeln?

Für die Ladezeit lohnt es sich, besonders bei häufig aufgerufenen Seiten. Mit Plugins, Build-Prozessen oder Bild-CDNs lässt sich das automatisieren.

Mehmet Oruc

Inhaber von SEOKönig · Ihr Personal SEO · Suchmaschinenoptimierung seit 30 Jahren

Informatikstudium, eigene Webkataloge und Suchmaschinen programmiert und verkauft, später Branchenportale, Onlineshops und rund 1.000 Webinstallationen für Kunden umgesetzt. Seit zwei Jahren arbeitet er intensiv mit KI-Systemen. Sein Schwerpunkt: komplexe Websites, die in vielen Städten und Themenfeldern gleichzeitig ranken müssen. Jeder Ratgeber entsteht aus dieser Projektpraxis und wird überarbeitet, sobald sich die Suchsysteme ändern.

Mehr über SEOKönig