Bilder für das Web optimieren: Format, Größe, Lazy Loading

Auf einer durchschnittlichen Website machen Bilder 50–70 % des gesamten Seiten-Gewichts aus. Ein einziges unkomprimiertes Foto kann 5 MB wiegen — und kostet auf mobilen Verbindungen mehrere Sekunden Ladezeit. Google bestraft das direkt: schlechte Core Web Vitals, niedrigeres Ranking, höhere Absprungrate.

Die gute Nachricht: Bildoptimierung ist einer der wenigen SEO-Faktoren, bei dem du mit vergleichsweise wenig Aufwand sehr viel erreichen kannst.

Warum Bilder dein SEO-Ranking direkt beeinflussen

Google misst seit dem Core Web Vitals-Update (2021) direkt, wie schnell Seiten laden — und benutzt diese Werte als Ranking-Faktor. Das wichtigste Bild-Metrik ist LCP (Largest Contentful Paint): die Zeit bis das größte sichtbare Element geladen ist. Das ist in 80 % der Fälle ein Bild.

Daneben zählen Bilder zur Seitengewicht-Berechnung, die die Gesamtladezeit beeinflusst. Und: Google Images ist eine eigene Suchmaschine. Korrekt ausgezeichnete Bilder ranken dort und bringen zusätzlichen organischen Traffic.

Das richtige Bildformat wählen

Nicht alle Bildformate sind gleich gut. Die Wahl des richtigen Formats kann die Dateigröße um 40–80 % reduzieren — ohne sichtbaren Qualitätsverlust.

WebP: Der neue Standard

WebP ist heute das empfohlene Format für Fotos und Screenshots. Es wird von allen modernen Browsern unterstützt (Chrome, Firefox, Safari seit 2020, Edge) und liefert bei gleicher Qualität 25–35 % kleinere Dateien als JPEG.

Für maximale Kompatibilität kannst du das <picture>-Element verwenden:

<picture>
  <source srcset="bild.webp" type="image/webp">
  <source srcset="bild.jpg" type="image/jpeg">
  <img src="bild.jpg" alt="Beschreibung">
</picture>

SVG für Icons und Logos

Für Logos, Icons und einfache Illustrationen ist SVG (Scalable Vector Graphics) unschlagbar: beliebig skalierbar ohne Qualitätsverlust, oft nur wenige Kilobyte groß und direkt ins HTML einbettbar.

Bildgröße und Auflösung

Ein häufiger Fehler: Bilder werden in voller Kamera-Auflösung (z.B. 6000×4000 Pixel, 8 MB) hochgeladen, obwohl sie auf der Website nur 800px breit dargestellt werden. Das ist reine Ressourcenverschwendung.

Faustregel für Bildbreiten

• Hero-Bilder / Banner: max. 1920px breit, Qualität 80–85 %
• Blog-Header: 1200×630px (passt auch für OG-Bild)
• Produktbilder: 800–1200px, abhängig vom Anzeigebereich
• Thumbnails: 300–400px
• Icons: SVG oder 32–64px PNG

Retina / HiDPI-Displays

Auf Retina-Displays (Apple-Geräte, viele Android-Phones) wird die CSS-Breite verdoppelt für die physischen Pixel. Ein Bild das 400px breit dargestellt wird, braucht 800px für scharfe Darstellung auf Retina-Displays. Du löst das elegant mit dem srcset-Attribut:

<img src="bild-400.jpg"
     srcset="bild-400.jpg 400w, bild-800.jpg 800w, bild-1200.jpg 1200w"
     sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
     alt="Beschreibung">

Der Browser wählt automatisch die passende Größe — ältere Handys bekommen das kleine Bild, High-DPI-Displays das große.

Bilder komprimieren: Tools und Einstellungen

Komprimierung reduziert die Dateigröße, ohne (bei korrekter Einstellung) sichtbare Qualitätseinbußen. Der Sweet Spot liegt bei den meisten Fotos zwischen 75–85 % JPEG-Qualität.

Kostenlose Online-Tools

• Squoosh.app (von Google) — bestes Ergebnis, direkter Vorher-Nachher-Vergleich, unterstützt WebP und AVIF
• TinyPNG / TinyJPG — einfach, schnell, API verfügbar
• Compressor.io — guter visueller Vergleich

Kommandozeile (für Entwickler)

# WebP konvertieren mit cwebp (kostenlos von Google)
cwebp -q 80 bild.jpg -o bild.webp

# JPEG optimieren mit ImageMagick
convert bild.jpg -quality 80 -strip bild-optimiert.jpg

# Batch-Konvertierung aller JPEGs in einem Ordner zu WebP
for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done

WordPress-Plugins

Für WordPress gibt es Plugins die Bilder automatisch beim Upload komprimieren und in WebP konvertieren: Smush, ShortPixel oder Imagify. Die kostenlosen Versionen reichen für die meisten Websites.

Lazy Loading: Bilder nur bei Bedarf laden

Standardmäßig lädt der Browser alle Bilder einer Seite sofort — auch jene die sich ganz unten befinden und der Nutzer vielleicht nie zu Gesicht bekommt. Lazy Loading ändert das: Bilder werden erst geladen, wenn sie in den sichtbaren Bereich scrollen.

Native Lazy Loading (HTML-Attribut)

Seit Chrome 76 und Firefox 75 funktioniert Lazy Loading ohne JavaScript — einfach das loading="lazy"-Attribut setzen:

<img src="bild.jpg" alt="Beschreibung" loading="lazy">

Das ist alles. Browserunterstützung liegt heute bei über 95 %. Für ältere Browser fällt das Attribut einfach weg und die Bilder werden normal geladen.

Was NICHT lazy-loaden

Das LCP-Bild — also das größte Bild im sichtbaren Bereich beim ersten Laden — sollte nicht lazy-geloaden werden. Es sollte so schnell wie möglich laden. Verwende stattdessen loading="eager" (Standard) oder noch besser:

<!-- LCP-Bild: sofort laden und vorausladen -->
<link rel="preload" as="image" href="hero-bild.webp">
<img src="hero-bild.webp" alt="Hero Bild" loading="eager" fetchpriority="high">

<!-- Alle anderen Bilder: lazy laden -->
<img src="weiteres-bild.webp" alt="Weiteres Bild" loading="lazy">

Alt-Texte: Bilder für Google beschreiben

Der Alt-Text (alternatives Textattribut) eines Bildes hat zwei Aufgaben: Er wird angezeigt wenn das Bild nicht geladen werden kann, und er hilft Google zu verstehen worum es auf dem Bild geht. Beides ist SEO-relevant.

Alt-Text richtig schreiben

• Beschreibe was zu sehen ist — kein Keyword-Stuffing
• Nutze das Haupt-Keyword wo es natürlich passt
• Halte es kurz — 5–15 Wörter sind ideal
• Keine redundanten Einleitungen — nicht "Bild von..." oder "Foto zeigt..."
• Dekorative Bilder: leeres alt="" — Screenreader-Nutzer und Google überspringen sie dann

<!-- Schlecht -->
<img src="arzt.jpg" alt="Bild">
<img src="arzt.jpg" alt="Zahnarzt SEO Zahnarzt Berlin Zahnarzt Praxis">

<!-- Gut -->
<img src="arzt.jpg" alt="Freundlicher Zahnarzt in moderner Praxis in Berlin-Mitte">

<!-- Dekorativ -->
<img src="trennlinie.png" alt="">

Dateinamen: unterschätzt aber wichtig

Auch der Dateiname gibt Google einen Hinweis. DSC_4729.jpg sagt nichts — zahnarzt-berlin-mitte-praxis.webp schon.

Responsive Bilder: perfekt auf jedem Gerät

Responsive Design bedeutet auch responsive Bilder. Eine Technik die sich lohnt: Art Direction — verschiedene Bildausschnitte für verschiedene Bildschirmgrößen.

<picture>
  <!-- Mobil: quadratisch, Gesicht im Fokus -->
  <source media="(max-width: 600px)"
          srcset="portrait-square.webp" type="image/webp">
  <!-- Desktop: breites Panorama -->
  <source media="(min-width: 601px)"
          srcset="landscape-wide.webp" type="image/webp">
  <img src="landscape-wide.jpg" alt="Team in unserem Büro">
</picture>

width und height immer setzen

Setze immer explizite width- und height-Attribute auf img-Tags. Das verhindert Cumulative Layout Shift (CLS) — das lästige Springen der Seite wenn Bilder laden. Ein guter CLS-Wert (unter 0,1) ist ein offizieller Google-Ranking-Faktor.

<img src="bild.webp" alt="Beschreibung" width="800" height="600" loading="lazy">

Bildoptimierungs-Checkliste

Wie viel Unterschied macht das wirklich?

Um das zu verdeutlichen: Eine typische Website lädt 15–20 Bilder pro Seite. Wenn jedes Bild statt 500 KB nur 100 KB wiegt (dank WebP + Komprimierung), spart das 6–8 MB pro Seitenaufruf. Auf einer 3G-Verbindung ist das der Unterschied zwischen 8 Sekunden und 1,5 Sekunden Ladezeit.

Kombiniert mit gutem LCP und niedrigem CLS und einer allgemein schnellen Website ist Bildoptimierung einer der direktesten Hebel für bessere Google-Rankings — besonders auf mobilen Geräten.

Willst du wissen ob deine Website Bildprobleme hat? Teste sie kostenlos mit unserer SEO-Analyse auf Shift07.