Bildoptimierung für SEO: Alt-Tags, WebP und Google Bilder-Suche

Bilder machen oft 50–70% des Datenvolumens einer Website aus. Trotzdem werden sie bei der SEO-Optimierung fast immer vergessen. Kein Alt-Tag, kein beschreibender Dateiname, keine Komprimierung — und dann wundert man sich warum die Seite langsam lädt und Core Web Vitals rot sind.

Erlhofer beschreibt Bildoptimierung als „einen der am häufigsten vernachlässigten Bereiche der Onpage-Optimierung" und widmet dem Thema ein eigenes Unterkapitel (vgl. Erlhofer, SEO, 11. Aufl., Kap. 10.3). Dabei ist es einer der schnellsten SEO-Wins: In 30 Minuten kannst du die Bilder deiner gesamten Website optimieren.

Merksatz: „Ein Bild ohne Alt-Tag ist für Google unsichtbar. Ein unkomprimiertes Bild macht deine Seite für Nutzer unerträglich."

Warum Bilder ein unterschätzter SEO-Faktor sind

Bilder beeinflussen SEO auf drei Ebenen gleichzeitig:

Ladezeit: Unkomprimierte Bilder sind der häufigste Grund für schlechte Core Web Vitals. Ein einziges 5-MB-Headerbild kann den LCP (Largest Contentful Paint) auf über 4 Sekunden treiben — weit über dem Google-Grenzwert von 2,5 Sekunden (→ Core Web Vitals erklärt).

Zusätzlicher Traffic: Google Bilder-Suche generiert laut Google rund 20% aller Suchanfragen. Wenn deine Bilder dort auftauchen, ist das kostenloser Traffic den du sonst nicht bekommen würdest.

Barrierefreiheit: Alt-Tags helfen nicht nur Google — sie helfen blinden und sehbehinderten Nutzern die Screenreader verwenden. Barrierefreiheit ist ein indirekter Rankingfaktor und ab 2025 durch das Barrierefreiheitsstärkungsgesetz (BFSG) für viele Websites Pflicht.

Die 5 Schritte der Bildoptimierung

Schritt 1 — Dateinamen die Keywords enthalten

Vorher: IMG_4823.jpg, DSC00142.png, screenshot-2026-04-06.webp

Nachher: keyword-recherche-workflow-beispiel.webp, core-web-vitals-grenzwerte-tabelle.webp, google-search-console-leistungsbericht.webp

Die Regeln:

• Beschreibend: Was zeigt das Bild?
• Keywords: Enthält das Haupt- oder Nebenkeyword der Seite
• Format: Kleinbuchstaben, Bindestriche statt Leerzeichen oder Unterstriche
• Sprache: Deutsch wenn die Seite deutsch ist (Google versteht den Kontext)

Warum es wichtig ist: Google nutzt den Dateinamen als einen von mehreren Signalen um den Bildinhalt zu verstehen. IMG_4823.jpg sagt nichts. onpage-optimierung-title-tag.webp sagt alles.

Schritt 2 — Alt-Tags die beschreiben und optimieren

Das Alt-Attribut (kurz: Alt-Tag) beschreibt den Bildinhalt in Text. Es wird angezeigt wenn das Bild nicht laden kann, von Screenreadern vorgelesen, und von Google als primäres Signal für den Bildinhalt genutzt.

Vorher: alt="" (leer) oder alt="Bild" oder gar kein Alt-Tag

Nachher: alt="Vergleichstabelle Longtail vs Shorthead Keywords mit Suchvolumen und Conversion Rate"

Die Regeln für gute Alt-Tags:

• Beschreibe was auf dem Bild zu sehen ist (nicht was du dir wünschst)
• Baue das Keyword der Seite natürlich ein (kein Keyword-Stuffing)
• Halte es unter 125 Zeichen
• Dekorative Bilder (Trennlinien, Hintergründe) bekommen alt="" (leer, aber vorhanden)

Beispiele:

| Bild | Schlechter Alt-Tag | Guter Alt-Tag |

|------|-------------------|---------------|

| Screenshot GSC | alt="screenshot" | alt="Google Search Console Leistungsbericht mit Klicks und Impressionen" |

| Produktfoto Stuhl | alt="Stuhl" | alt="Ergonomischer Bürostuhl Modell X in schwarz mit Armlehnen" |

| Team-Foto | alt="Team" | alt="Team von Physiotherapie Girndt in der Praxis Berlin-Mitte" |

| Dekoratives Icon | alt="icon" | alt="" (bewusst leer) |

Schritt 3 — Komprimierung ohne sichtbaren Qualitätsverlust

Die meisten Bilder können um 60–80% komprimiert werden ohne dass der Unterschied mit bloßem Auge sichtbar ist.

Empfohlene Auflösungen:

• Blogbilder/Content: 1200px Breite (reicht für alle Bildschirme)
• Hero-Bilder/Header: 1920px Breite maximal
• Thumbnails/Vorschau: 400–600px Breite
• Höhe: proportional zur Breite

Komprimierungs-Tools (kostenlos):

• Squoosh (squoosh.app): Google-Tool, direkt im Browser
• TinyPNG (tinypng.com): PNG und JPG, Drag & Drop
• ShortPixel (WordPress-Plugin): Automatisch bei Upload
• ImageOptim (Mac): Desktop-App für Batch-Komprimierung

Ziel: Kein Bild auf deiner Website sollte größer als 200 KB sein. Hero-Bilder maximal 300 KB. Wenn du mit WebP arbeitest, erreichst du das fast immer.

Schritt 4 — Das richtige Format wählen

| Format | Am besten für | Vorteile | Nachteile |

|--------|---------------|----------|-----------|

| WebP | Alles (Standard 2026) | 30% kleiner als JPG, Transparenz möglich | Sehr alte Browser (IE11) |

| AVIF | Fotos mit vielen Details | 50% kleiner als JPG | Encoding langsamer, Browser-Support wächst |

| JPG | Fotos (Legacy) | Universell unterstützt | Größer als WebP, keine Transparenz |

| PNG | Screenshots, Grafiken mit Text | Verlustfrei, Transparenz | Sehr groß bei Fotos |

| SVG | Logos, Icons, einfache Grafiken | Skalierbar, winzig klein | Nicht für Fotos geeignet |

Empfehlung 2026: WebP als Standard-Format für alle Fotos und Grafiken. SVG für Logos und Icons. AVIF als progressives Upgrade wenn dein CMS es unterstützt. JPG nur noch als Fallback.

WordPress-Tipp: Ab WordPress 6.1 werden Uploads automatisch als WebP serviert wenn der Browser es unterstützt. Prüfe ob diese Funktion bei dir aktiv ist.

Schritt 5 — Lazy Loading und responsive Bilder

Lazy Loading bedeutet: Bilder werden erst geladen wenn der Nutzer zu ihnen scrollt — nicht alle gleichzeitig beim Seitenaufruf. Das beschleunigt den initialen Seitenaufbau massiv.

Umsetzung: Füge loading="lazy" zum -Tag hinzu. Moderne Browser unterstützen das nativ.

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

Wichtig: Das erste sichtbare Bild (Above the Fold, z.B. Hero-Bild) sollte NICHT lazy-loaded werden — es muss sofort laden. Nur Bilder weiter unten auf der Seite.

Responsive Bilder: Serviere verschiedene Bildgrößen für verschiedene Bildschirme mit dem srcset-Attribut. Die meisten CMS machen das automatisch.

Width und Height angeben: Immer width und height im HTML angeben. Das verhindert Layout-Shifts (CLS) — einer der drei Core Web Vitals.

Bildformate im Vergleich — JPG, PNG, WebP, AVIF

Ein Testbild (Foto, 1200×800px) in verschiedenen Formaten:

| Format | Dateigröße | Qualitätsverlust | Browser-Support |

|--------|-----------|------------------|-----------------|

| JPG (Qualität 80%) | 180 KB | Minimal | 100% |

| PNG | 850 KB | Keiner | 100% |

| WebP (Qualität 80%) | 120 KB | Minimal | 97%+ |

| AVIF (Qualität 80%) | 85 KB | Minimal | 93%+ |

WebP spart 33% gegenüber JPG. AVIF spart 53%. Bei einer Website mit 50 Bildern summiert sich das.

Google Bilder-Suche als Traffic-Quelle

Google Bilder ist die zweitgrößte Suchmaschine der Welt (nach Google Web-Suche). Wenn deine Bilder dort ranken, bekommst du kostenlosen Traffic.

Was Google für Bilder-Rankings berücksichtigt:

• Alt-Tag (wichtigstes Signal)
• Dateiname
• Umgebender Text (Bildunterschrift, Absatz drumherum)
• Seitenkontext (Thema der gesamten Seite)
• Bildgröße und -qualität (keine winzigen Thumbnails)
• Structured Data (Product-Schema mit Bild, Recipe-Schema etc.)

Praxis-Tipp: Eigene Grafiken, Diagramme und Infografiken ranken besser als Stock-Fotos — weil sie einzigartig sind. Wenn du eine Vergleichstabelle als Grafik erstellst, hast du Content den niemand sonst hat.

Die Bildoptimierung-Checkliste

Vor dem Upload (4 Punkte):

• [ ] Dateiname beschreibend und mit Keyword
• [ ] Bild auf maximale Breite skaliert (1200px für Content)
• [ ] Bild komprimiert (Ziel: unter 200 KB)
• [ ] Format: WebP oder AVIF (JPG als Fallback)

Im CMS/HTML (4 Punkte):

• [ ] Alt-Tag beschreibend und mit Keyword
• [ ] Width und Height angegeben
• [ ] Lazy Loading für Below-the-Fold-Bilder
• [ ] Title-Attribut (optional, für Tooltip)

Gesamt-Website (3 Punkte):

• [ ] Hero-Bild/LCP-Bild ist NICHT lazy-loaded
• [ ] Responsive Bilder (srcset) aktiv
• [ ] Kein Bild größer als 300 KB