Bilder-Formate für SEO: WebP, AVIF und mehr

Das richtige Bilder-Format ist eine der ersten Stellschrauben bei der PageSpeed-Optimierung. Moderne Bilder-Formate wie WebP und AVIF liefern deutlich kleinere Dateien bei vergleichbarer oder besserer Qualität – und weniger Dateigröße bedeutet schnellere Ladezeiten, bessere Core Web Vitals und potenziell bessere Rankings. Dieser Artikel erklärt die wichtigsten Formate, ihre realen Vorteile und wie man sie korrekt einsetzt.

JPEG und PNG: Der Status quo

JPEG (Joint Photographic Experts Group): Das Standardformat für Fotos und natürliche Bilder seit 1992. Verlustbehaftete Kompression – je höher die Kompression, desto kleiner die Datei, desto schlechter die Qualität. Bei moderaten Qualitätsstufen (70–85) gute Balance aus Größe und Qualität.

Schwäche: Kein Transparenz-Support, ineffizient bei grafischen Elementen mit klaren Kanten (Logos, Icons). Progressive JPEG (für inkrementelles Laden) ist eine Verbesserung, aber kein Ersatz für moderne Formate.

PNG (Portable Network Graphics): Verlustfreie Kompression, unterstützt Transparenz (Alpha-Channel). Ideal für Logos, Icons, Screenshots mit klaren Linien. Nachteil: Dateigröße deutlich größer als JPEG für Fotos.

Wann noch sinnvoll: PNG für Grafiken mit Transparenz wenn AVIF/WebP nicht möglich. JPEG als Fallback wenn keine modernen Formate unterstützt werden.

Moderne Bildformate (WebP, AVIF) können die Bildgröße auf einer durchschnittlichen Webseite um 35–60 % reduzieren. Bei einer Seite mit 2 MB Bildern bedeutet das typischerweise 700 KB – 1,2 MB Einsparung, was LCP auf Mobile um 1–2 Sekunden verbessern kann.

WebP: Das bewährte moderne Format

WebP wurde 2010 von Google entwickelt und ist heute der Standard für Web-Bilder. Es kombiniert verlustbehaftete und verlustfreie Kompression und unterstützt Transparenz und Animation.

Vorteile gegenüber JPEG:

• Fotos: 25–35 % kleinere Dateien bei gleicher visueller Qualität
• Grafiken mit Transparenz: 20–30 % kleinere Dateien als PNG

Browser-Unterstützung: Chrome, Firefox, Safari 14+, Edge – nahezu vollständige Abdeckung (>96 % globaler Nutzer). Safari-Support seit 2020.

Praktischer Einsatz:

<!-- picture-Element mit WebP + JPEG-Fallback -->
<picture>
  <source srcset="bild.webp" type="image/webp">
  <img src="bild.jpg" alt="Beschreibung">
</picture>

Oder direkt als src: Wenn Sie sicher sind, dass alle relevanten Nutzer moderne Browser nutzen (Analytics prüfen), können Sie direkt .webp als src verwenden ohne picture-Element.

Konvertierung: Squoosh (browser-basiert), cwebp (CLI), ImageMagick (convert bild.jpg bild.webp), Sharp für Node.js-Projekte.

AVIF: Das neue Spitzenformat

AVIF (AV1 Image File Format) basiert auf dem AV1-Video-Codec und ist das aktuell effizienteste Bildformat für Web-Bilder.

Vorteile gegenüber WebP:

• Fotos: 40–55 % kleinere Dateien als JPEG, 15–25 % kleiner als WebP
• Bessere Kompression bei niedrigen Qualitätsstufen (weniger Blockartefakte)
• Unterstützt HDR und Wide Color Gamut

Nachteile:

• Langsameres Encoding (3–10x langsamer als WebP) – relevant für serverseitige Konvertierung
• Ältere Browser ohne Unterstützung (Safari bis iOS 15, Firefox erst ab Version 93)

Browser-Unterstützung: Chrome ab Version 85, Firefox ab 93, Safari ab 16 (2022). Global ca. 80–85 % der Nutzer.

Praktischer Einsatz mit picture-Element:

<picture>
  <!-- AVIF für moderne Browser -->
  <source srcset="foto.avif" type="image/avif">
  <!-- WebP als Fallback für AVIF-inkompatible Browser -->
  <source srcset="foto.webp" type="image/webp">
  <!-- JPEG als finales Fallback -->
  <img src="foto.jpg" alt="Beschreibung" width="800" height="600">
</picture>

Der Browser wählt das erste unterstützte Format. AVIF → WebP → JPEG, je nach Browser-Fähigkeit.

SVG für Vektorgrafiken

SVG (Scalable Vector Graphics) ist kein Rasterformat sondern ein XML-basiertes Vektorformat. Ideal für:

• Logos
• Icons
• Illustrationen mit klaren Linien und Farben
• Diagramme

Vorteile für SEO:

• Beliebig skalierbar ohne Qualitätsverlust (perfekt für verschiedene Displaydichten)
• Oft sehr kleine Dateigröße für einfache Grafiken
• Kann direkt im HTML eingebettet werden (inline SVG) für maximale Performance
• Text in SVGs wird von Google indexiert

Inline SVG vs. img src:

<!-- Inline SVG: kein extra HTTP-Request, max. Performance -->
<svg width="200" height="100" viewBox="0 0 200 100">
  <path d="..." fill="#FF6004"/>
</svg>

<!-- img src: gecachted, wiederverwendbar -->
<img src="logo.svg" alt="Logo" width="200" height="100">

Für Icons die oft wiederholt werden (Checkmarks, Arrows) ist Inline SVG mit <symbol> und <use> das effizienteste Pattern.

GIF vs. Video vs. WebP-Animation

Animierte GIFs sind SEO-technisch ein Problem: Sie können sehr groß werden (Megabytes für kurze Animationen) und haben kein modernes Pendant in GIF-Qualität.

Alternativen:

Animiertes WebP: Kleinere Dateien als GIF, aber breite Browser-Unterstützung. Gut für kurze, einfache Animationen.

MP4-Video statt GIF:

<video autoplay loop muted playsinline>
  <source src="animation.mp4" type="video/mp4">
</video>

MP4 mit H.264-Encoding ist oft 5–10x kleiner als ein equivalentes GIF. Google erkennt autoplay muted loop Videos als GIF-Ersatz und zählt sie nicht negativ für Performance.

CSS-Animationen: Für einfache Bewegungen (Fade, Slide) ist CSS am effizientesten.

Bildoptimierung im CMS-Kontext

WordPress: Plugins wie ShortPixel, Imagify oder EWWW Image Optimizer konvertieren Bilder automatisch beim Upload zu WebP und AVIF. Sie liefern das beste unterstützte Format per Browser-Detection.

Astro: Eingebaute Image-Optimierung mit <Image> und <Picture> Komponenten. Automatische WebP/AVIF-Konvertierung, automatisches srcset.

---
import { Picture } from 'astro:assets';
import heroImage from '../assets/hero.jpg';
---
<Picture
  src={heroImage}
  formats={['avif', 'webp']}
  alt="Hero Bild"
  width={1200}
  height={600}
/>

Next.js: <Image> Komponente optimiert Bilder serverseitig auf Anfrage, liefert WebP/AVIF je nach Browser-Accept-Header.

Websites die vollständig auf WebP oder AVIF umgestellt haben, zeigen in PageSpeed Insights eine durchschnittliche Verbesserung des Performance-Scores von 8–15 Punkten – und verbessern LCP auf Mobile im Schnitt um 0,8–1,4 Sekunden.

Qualitäts-Einstellungen praktisch

Für WebP und AVIF sind die richtigen Qualitäts-Einstellungen entscheidend:

Tipp: Verwenden Sie Squoosh für einen visuellen Vergleich verschiedener Qualitätsstufen vor der Entscheidung. Was auf dem Monitor gut aussieht ist oft bei 70 % WebP-Qualität schon nicht mehr visuell von JPEG 90 zu unterscheiden.