Performance 15. Mai 2026

Bild-Dateigrößen für SEO optimieren:
WebP, AVIF und LCP verbessern 2026

Zu große Bilder sind der häufigste Grund für einen schlechten LCP-Score und langsame Ladezeiten. Dieser Artikel zeigt dir, wie du mit WebP, AVIF und Lazy Loading deine Bild-Dateigrößen drastisch reduzierst — ohne sichtbaren Qualitätsverlust.

Bild-Dateigrößen für SEO optimieren — WebP AVIF LCP verbessern

Warum Bild-Dateigrößen direkt das SEO-Ranking beeinflussen

Google hat mit den Core Web Vitals Ladezeiten zum offiziellen Rankingfaktor gemacht. Das wichtigste Metric dabei ist der Largest Contentful Paint (LCP) — er misst, wie lange es dauert, bis das größte sichtbare Element auf der Seite geladen ist. In den allermeisten Fällen ist dieses Element ein Bild.

Ein LCP unter 2,5 Sekunden gilt als gut. Über 4 Sekunden ist er schlecht — und Google bewertet die Seite entsprechend schlechter im Ranking. Der einfachste Hebel für einen besseren LCP: kleinere, schneller ladende Bilder.

Nutze unseren kostenlosen Image-Size-Checker, um zu sehen, welche Bilder auf deiner Website zu groß sind und den größten Optimierungsbedarf haben.

Die Maßzahlen: Was ist zu groß?

Es gibt keine universelle Grenze, aber folgende Richtwerte haben sich in der Praxis bewährt:

Dateigröße Bewertung Handlungsempfehlung
Unter 30 KB Optimal Kein Handlungsbedarf
30–100 KB Akzeptabel WebP-Konvertierung sinnvoll
100–500 KB Zu groß Sofortige Optimierung empfohlen
Über 500 KB Kritisch Stark beschleunigt LCP-Verschlechterung

Wichtig: Diese Werte gelten für die Rohgröße der heruntergeladenen Datei. Bei Retina-Displays (2x Auflösung) verdoppeln sich die physischen Pixel — was bei normaler Optimierung trotzdem eine deutliche Dateigröße bedeuten kann.

WebP: Das neue Standard-Format für Webbilder

WebP ist ein Bildformat, das Google 2010 entwickelt hat und inzwischen von allen modernen Browsern unterstützt wird. Im Vergleich zu JPEG bietet WebP:

JPEG zu WebP konvertieren: Die wichtigsten Tools

Squoosh.app (kostenlos, browser-basiert): Das einfachste Tool für einzelne Bilder. Ziehe ein Bild rein, wähle WebP als Ausgabe-Format, stelle Qualität auf 75–85% — fertig. Sofortiger Vorher/Nachher-Vergleich mit Dateigrößenanzeige.

cwebp (Google CLI, kostenlos): Ideal für die Batch-Konvertierung vieler Bilder. Installation: apt install webp oder brew install webp:

# Einzelnes Bild konvertieren
cwebp -q 80 input.jpg -o output.webp

# Alle JPEGs im Ordner konvertieren (Bash)
for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done

TinyPNG / TinyJPG (kostenlos bis 500 Bilder/Monat): Konvertiert und komprimiert — auch als WordPress-Plugin verfügbar.

ImageMagick (kostenlos, CLI): Sehr mächtig für Batch-Verarbeitung:

# WebP mit Qualität 80
magick convert input.jpg -quality 80 output.webp

# Gleichzeitig skalieren (z.B. max 1200px Breite)
magick convert input.jpg -resize 1200x -quality 80 output.webp

AVIF: Das noch effizientere Format

AVIF (AV1 Image File Format) ist das neueste Bildformat und komprimiert noch besser als WebP — typischerweise 30–50% kleiner als JPEG bei gleicher Qualität. Die Browser-Unterstützung ist mittlerweile gut (Chrome ab 85, Firefox ab 93, Safari ab 16).

Wann AVIF statt WebP nutzen? Wenn du volle Browser-Kontrolle hast (z.B. modernes Intranet oder App) oder wenn maximale Kompression wichtiger ist als maximale Kompatibilität. Für öffentliche Websites empfehle ich eine kombinierte Lösung mit <picture>:

<picture>
  <source srcset="bild.avif" type="image/avif">
  <source srcset="bild.webp" type="image/webp">
  <img src="bild.jpg" alt="Beschreibung" loading="lazy" width="800" height="600">
</picture>

Browser, die AVIF verstehen, laden AVIF. Browser mit WebP-Unterstützung laden WebP. Ältere Browser erhalten das JPEG als Fallback. Alle bekommen das bestmögliche Format.

AVIF erstellen mit avifenc

# avif-cli installieren (Node.js)
npm install -g avif

# Konvertierung
avif input.jpg --quality 60 --effort 4

# Oder mit ImageMagick (mit AVIF-Support)
magick convert input.jpg -quality 60 output.avif

AVIF-Kodierung dauert deutlich länger als WebP oder JPEG — plane das bei der Build-Pipeline ein.

Bilder auf die richtige Größe skalieren

Einer der häufigsten Fehler: Ein 3000 × 2000 px Bild wird in einen 800 px breiten Container eingebettet. Der Browser lädt trotzdem das 3-Megapixel-Original und skaliert es dann herunter — verschwendete Bandbreite.

Die Lösung: Bilder auf die tatsächliche Darstellungsgröße skalieren, bevor sie hochgeladen werden. Wenn ein Bild maximal 1200 px breit angezeigt wird, reicht 1200 px Breite (plus 2x für Retina: 2400 px). Nicht mehr.

# Bild auf max 1200px Breite skalieren (proportional)
magick convert original.jpg -resize 1200x -quality 80 optimiert.webp

# Für Retina (2x): max 2400px
magick convert original.jpg -resize 2400x -quality 75 optimiert@2x.webp

Responsive Images mit srcset und sizes

Mit srcset und sizes teilst du dem Browser mit, welche Bildversion für welche Displaybreite optimal ist. Der Browser wählt dann automatisch:

<img
  srcset="bild-400.webp 400w,
          bild-800.webp 800w,
          bild-1200.webp 1200w"
  sizes="(max-width: 640px) 100vw,
         (max-width: 1024px) 50vw,
         33vw"
  src="bild-800.webp"
  alt="Beschreibung"
  loading="lazy"
  width="800"
  height="600">

Hier sagt sizes dem Browser: Auf Mobilgeräten nimmt das Bild 100% der Viewport-Breite ein, auf Tablets 50%, auf großen Displays ein Drittel. Der Browser rechnet daraus, welche Bildgröße er braucht, und lädt die passende srcset-Variante.

Lazy Loading: Bilder erst laden wenn nötig

Bilder, die beim ersten Laden einer Seite nicht sichtbar sind (weil sie unterhalb des sichtbaren Bereichs liegen), sollten erst geladen werden, wenn der Nutzer dorthin scrollt. Das nennt sich Lazy Loading.

<!-- Native Lazy Loading (alle modernen Browser) -->
<img src="bild.webp" alt="..." loading="lazy" width="800" height="600">

Das Attribut loading="lazy" ist heute in allen modernen Browsern nativ unterstützt — kein JavaScript nötig. Wichtig: Das Hero-Bild oben auf der Seite (das vermutlich dein LCP-Element ist) sollte KEIN Lazy Loading haben. Schreibe dort loading="eager" oder lass das Attribut weg.

width und height immer angeben

Selbst bei Lazy Loading: Gib immer width und height an. Ohne diese Angaben weiß der Browser nicht, wie viel Platz er für das Bild reservieren soll — was zu Layout Shifts führt (schlechter CLS-Score).

Das Hero-Bild für LCP optimieren

Das größte sichtbare Bild on-screen beim Laden — meistens ein Headerbild oder ein Banner — ist in der Regel dein LCP-Element. Für dieses Bild gelten besondere Regeln:

<!-- Im <head> der Seite -->
<link rel="preload" as="image" href="/hero-bild.webp" fetchpriority="high">

Mit fetchpriority="high" (auch am <img>-Tag möglich) weist du den Browser an, dieses Bild vor anderen Ressourcen zu laden:

<img src="hero-bild.webp"
     alt="Hero-Bild Beschreibung"
     fetchpriority="high"
     width="1200"
     height="630">

Das kann den LCP um mehrere Zehntelsekunden verbessern — ohne dass du die Dateigröße anfassen musst.

Bilder in CMS-Systemen optimieren

WordPress

WordPress konvertiert seit Version 6.1 Bilder automatisch in WebP, wenn der Server libwebp unterstützt. Prüfen mit: phpinfo() → nach „webp" suchen.

Plugins die helfen:

Shopify

Shopify liefert Bilder automatisch über ein CDN aus und bietet URL-Parameter für Format und Größe:

<!-- Shopify: WebP anfordern + auf 800px skalieren -->
{{ product.featured_image | image_url: width: 800, format: 'webp' | image_tag }}

Nutze diese Parameter konsequent, um Bilder in der richtigen Größe und im richtigen Format auszuliefern — ohne Upload-Optimierung auf der Quelldatei.

Statische Websites (HTML/Jekyll/Hugo)

Build-Pipeline-Tools erledigen die Optimierung beim Deployment:

GIF durch WebP oder Video ersetzen

GIF-Dateien sind extrem ineffizient — ein 5-Sekunden-GIF kann locker 5–20 MB groß sein. Ersetze animierte GIFs durch:

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

Das muted-Attribut ist Pflicht für Autoplay. playsinline verhindert auf iOS, dass das Video in den Vollbild-Modus wechselt.

Content Delivery Network (CDN) für Bilder

Selbst gut optimierte Bilder können langsam laden, wenn der Server weit vom Nutzer entfernt ist. Ein CDN (Content Delivery Network) speichert deine Bilder auf Servern weltweit und liefert sie vom nächstgelegenen Standort aus.

Kostenlose oder günstige CDN-Optionen für Bilder:

Mit Cloudinary kannst du Bildgröße und Format direkt in der URL steuern, ohne die Quelldateien anzufassen — ideal für dynamische Inhalte.

Bilder SEO-freundlich benennen und auszeichnen

Dateigröße ist wichtig — aber für SEO zählen auch Dateiname und Alt-Text. Google liest beides aus, um den Bildinhalt zu verstehen und es in der Google Bildersuche einzuordnen.

Mehr zur On-Page-Optimierung findest du in unserem Artikel Bilder für das Web optimieren: Format, Größe, Lazy Loading und im Leitfaden zu Bildoptimierung für Websites: WebP, AVIF und Lazy Loading 2026.

Schritt-für-Schritt: Bild-Optimierung in der Praxis

  1. Bilder auditieren: Nutze den Image-Size-Checker um zu sehen, welche Bilder auf deiner Seite am größten sind
  2. Größte Bilder priorisieren: Fange mit den Bildern über 200 KB an — dort ist der Impact am größten
  3. Auf korrekte Dimensionen skalieren: Prüfe, wie breit das Bild tatsächlich angezeigt wird (DevTools → Inspect) und skaliere auf diese Breite (×2 für Retina)
  4. In WebP konvertieren: Mit Squoosh, cwebp oder TinyPNG, Qualität 75–85%
  5. LCP-Bild priorisieren: Für das Hauptbild oben auf der Seite fetchpriority="high" + Preload-Link setzen
  6. Lazy Loading für alle anderen Bilder: loading="lazy" zu allen <img>-Tags außerhalb des ersten Viewports hinzufügen
  7. width und height angeben: Verhindert Layout Shifts (CLS)
  8. Ergebnis messen: Google PageSpeed Insights erneut aufrufen und LCP-Verbesserung prüfen

Checkliste: Bilder für SEO optimiert?

Fazit: Bilder sind der schnellste LCP-Hebel

Wenn du nur eine SEO-Maßnahme sofort umsetzen kannst, dann diese: Optimiere deine Bilder. Der Aufwand ist gering, die Tools sind kostenlos, und der Effekt auf LCP, Page Speed und Suchmaschinenranking ist direkter und messbarer als bei fast jeder anderen SEO-Maßnahme.

Starte mit einem Audit: Image-Size-Checker öffnen, deine URL eingeben, und sehen welche Bilder deine Seite bremsen. Dann Schritt für Schritt optimieren — und die Verbesserung in Google PageSpeed Insights messen.

Für das große Ganze: Core Web Vitals verbessern: LCP, CLS und INP Schritt für Schritt zeigt dir, wie Bilder in das Gesamtbild der Performance-Optimierung passen.

Weiterführende Artikel

Passende Tools