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

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."

// 01 / 05Warum 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.

// 02 / 05Die 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:

Schlechte vs. gute Alt-Tags im Vergleich 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

Bildformate: Einsatzzweck, Vorteile, Nachteile 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.

htmllazy loading<img src="/bilder/keyword-recherche-workflow.webp"
alt="Keyword-Recherche-Workflow im Beispiel"
width="1200" height="800"
loading="lazy">

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.

// 03 / 05Bildformate im Vergleich, JPG, PNG, WebP, AVIF

Ein Testbild (Foto, 1200×800px) in verschiedenen Formaten, wähle ein Format für Details:

WebP AVIF JPG PNG

Dateigröße (1200×800): ~120 KB
Qualitätsverlust: Minimal (lossy)
Browser-Support: 97%+
Transparenz: Ja (Alpha-Kanal)
Empfehlung 2026: Standard für alles
Einsparung vs. JPG: ~33% kleiner

Dateigröße (1200×800): ~85 KB
Qualitätsverlust: Minimal (lossy)
Browser-Support: 93%+
Transparenz: Ja
Empfehlung 2026: Progressives Upgrade
Einsparung vs. JPG: ~53% kleiner

Dateigröße (1200×800): ~180 KB
Qualitätsverlust: Minimal (lossy)
Browser-Support: 100%
Transparenz: Nein
Empfehlung 2026: Nur als Fallback
Einsparung vs. JPG: Referenzformat

Dateigröße (1200×800): ~850 KB
Qualitätsverlust: Keiner (lossless)
Browser-Support: 100%
Transparenz: Ja (Alpha-Kanal)
Empfehlung 2026: Screenshots & Text-Grafiken
Einsparung vs. JPG: −372% (größer!)

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.

// 04 / 05Google 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.

// 05 / 05Die 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

Häufige Fragen zur Bildoptimierung

Quellen & Vertiefung

• Erlhofer, S. (2024): Suchmaschinen-Optimierung, 11. Auflage, Rheinwerk Verlag. Kap. 10.3 (Bildoptimierung)
• Google Search Central: Image SEO Best Practices. developers.google.com/search
• Web.dev: Optimize Images. web.dev/fast
• Google. Core Web Vitals und LCP. Google Search Central, 2025. developers.google.com/search

// micro-journal

Welches Bild auf deiner Seite ist noch ohne Alt-Tag?

Ein Satz reicht. Das Journal bleibt lokal in deinem Browser — kein Konto, kein Server.

notierenMG

Max Götte

SEO Strategist · Founder · while.chat

SEO-Berater aus Bochum. Spezialisiert auf technisches SEO, Local SEO und Generative Engine Optimization für KMU im DACH-Raum. Von Audit über Content-Strategie bis Local SEO, evidenzbasiert, ohne Hype-Versprechen.

projekt anfragen → WhatsApp mehr Artikel