English
Überschriften, Bilder & Medien

WebP / AVIF

WebP ist ein von Google entwickeltes Bildformat für das Web. Es speichert Fotos und Grafiken mit verlustbehafteter oder verlustfreier Kompression, unterstützt Transparenz und Animation und erzeugt bei vergleichbarer Qualität kleinere Dateien als JPEG und PNG.

Warum ist WebP für SEO relevant?

Google gibt für WebP folgende Vorteile an. Verlustfreie WebP-Dateien sind rund 26 Prozent kleiner als vergleichbare PNG-Bilder, verlustbehaftete 25 bis 34 Prozent kleiner als vergleichbare JPEG-Bilder. web.dev nennt für typische Fälle eine Ersparnis von 25 bis 35 Prozent gegenüber JPEG und PNG. Kleinere Dateien verkürzen die Ladezeit, was vor allem den Largest Contentful Paint (LCP) betrifft, wenn ein Bild das größte sichtbare Element ist.

Für die Indexierung relevant ist, dass Google Search WebP, ebenso BMP, GIF, JPEG, PNG, SVG und AVIF unterstützt, sofern die Bilder im src-Attribut eines img-Elements stehen. AVIF ist ein weiteres modernes Format mit demselben Zweck.

Ältere Browser beherrschen WebP nicht. Hier hilft das picture-Element. Der Browser nimmt die erste Quelle, die er versteht, und fällt sonst auf JPEG oder PNG zurück. Alternativ liefern Server je nach Accept-Header das passende Format aus.

Beispiel

HTML
<picture>
  <source srcset="/bilder/schuh.webp" type="image/webp">
  <img src="/bilder/schuh.jpg" alt="Roter Laufschuh, Seitenansicht" width="800" height="600">
</picture>

Häufige Fehler

  • Dateien lediglich umbenennen. Die Endung .webp ändert das Format nicht.
  • Kein Fallback eingebaut und damit Besucher mit älteren Browsern ausgeschlossen.
  • Das Hero-Bild per loading="lazy" verzögern, obwohl es der LCP-Kandidat ist (Einschätzung).

Häufige Fragen

Ist WebP besser als JPG? Für das Web in der Regel ja, weil die Dateien bei ähnlicher Qualität kleiner sind. Für Druck oder Archivierung bleibt JPEG oder PNG gebräuchlicher.

Quellen

  1. An image format for the Web (WebP) – Google for Developersdevelopers.google.com
  2. Serve images in modern formats (WebP) – web.devweb.dev
  3. Image SEO best practices – Google Search Centraldevelopers.google.com
  4. Image file type and format guide (AVIF, WebP) – MDN Web Docsdeveloper.mozilla.org

Stand: