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.

PROT_23

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, wähle ein Format für Details:

WebP spart 33% gegenüber JPG. AVIF spart 53%. Bei einer Website mit 50 Bildern summiert sich das auf mehrere Megabyte, und direkt sichtbare Core Web Vitals Verbesserungen.

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