Szenario: Sie haben eine Website mit 50 Bildern. Keines hat Alt-Text, alle heißen "IMG_1234.jpg", und jedes ist 4 MB groß.
Was passiert
- Google versteht Ihre Bilder nicht (kein Ranking in Google Bilder)
- Website lädt langsam (schlechtes Ranking generell)
- Screenreader können Bilder nicht vorlesen (Accessibility-Problem)
- Sie verschenken massiv SEO-Potential
01
Warum Bilder-SEO oft unterschätzt wird
Die Zahlen
- 36% aller Google-Suchen führen zu Bildersuche
- Bilder in der Google-Bildersuche bringen 10-30% zusätzlichen Traffic
- Optimierte Bilder verbessern Ladezeit um bis zu 50%
- Alt-Texte sind seit 2025 DSGVO/Barrierefreiheitsgesetz Pflicht!
Die gute Nachricht: Die meisten Ihrer Wettbewerber optimieren ihre Bilder NICHT. Hier können Sie sich leicht abheben!
02
Was ist Bilder-SEO?
Bilder-SEO umfasst
- 1Technische Optimierung: Dateigröße, Format, Kompression
- 2Semantische Optimierung: Dateinamen, Alt-Texte, Bildunterschriften
- 3Strukturelle Optimierung: Lazy Loading, Responsive Images, Sitemaps
- 4Kontextuelle Optimierung: Umgebender Text, Relevanz zur Seite
Ziele
- Bessere Rankings in Google Bildersuche
- Schnellere Ladezeiten (besseres Gesamt-Ranking)
- Barrierefreiheit (Accessibility)
- Mehr Traffic über Bildersuche
03
Die 10 Säulen erfolgreicher Bilder-SEO
1. Sprechende Dateinamen (vor dem Upload!)
Das Problem Kameras benennen Bilder automatisch: `IMG_5847.jpg`, `DSC_0123.jpg`
Google sieht: Keine Information über Bildinhalt.
Die Lösung Beschreibende Dateinamen BEVOR Sie hochladen.
Schlecht
- IMG_1234.jpg
- foto.jpg
- bild1.jpg
Gut
- handwerker-streicht-fassade-lueneburg.jpg
- modernes-webdesign-beispiel-restaurant.jpg
- team-webnamic-webdesign-agentur.jpg
Best Practices Dateinamen
Do:
- Beschreibend & konkret
- Keywords einbauen (natürlich!)
- Kleinbuchstaben
- Bindestriche statt Leerzeichen
- Max. 5-7 Wörter
Don't
- Kryptische Kamera-Namen
- Sonderzeichen (ä, ö, ü → ae, oe, ue)
- Leerzeichen
- Zahlen ohne Kontext
- Keyword-Stuffing
Beispiele nach Branche
Handwerk:
- dachdecker-reparatur-schindeln-austauschen.jpg
- elektriker-installation-smart-home.jpg
- maler-vorher-nachher-wohnzimmer.jpg
Restaurant
- schnitzel-wiener-art-restaurant-hamburg.jpg
- terrasse-biergarten-sommer.jpg
- chef-koch-tim-mueller.jpg
Arztpraxis
- wartezimmer-zahnarztpraxis-modern.jpg
- dr-mueller-zahnaerztin-lueneburg.jpg
- behandlungszimmer-prophylaxe.jpg
2. Alt-Texte: Das A und O für SEO & Accessibility
Was sind Alt-Texte? Alternative Text-Beschreibung des Bildes im HTML-Code.
Warum wichtig
- SEO: Google "liest" Alt-Texte, um Bilder zu verstehen
- Accessibility: Screenreader lesen Alt-Texte vor
- Fallback: Wenn Bild nicht lädt, wird Alt-Text angezeigt
- Rechtlich: Ab 2025 Pflicht (Barrierefreiheitsstärkungsgesetz)!
Gute Alt-Texte
- "Malerbetrieb Müller Team vor Firmenfahrzeug"
- "Renoviertes Wohnzimmer nach Malerarbeiten, weiße Wände und Parkettboden"
- "Pizzeria Bella Vista Außenterrasse mit 20 Tischen"
- "Dr. Sarah Schmidt, Zahnärztin in Hamburg, in ihrer Praxis"
Schlechte Alt-Texte
- "Bild1" (Nichtssagend)
- "IMG_4567" (Kamera-Name)
- Leer (außer bei dekorativen Bildern!)
- Keyword-Stuffing
Länge
- Optimal: 10-15 Wörter (ca. 125 Zeichen)
- Max: 250 Zeichen
- Screenreader brauchen lesbare Sätze
Keywords einbauen - aber natürlich: Keyword: "Webdesign Hamburg"
Schlecht (Keyword-Stuffing): "Webdesign Hamburg Webdesigner Hamburg Website Hamburg"
Gut (natürlich): "Modernes Webdesign-Projekt von Webnamic für Restaurant in Hamburg"
Dekorative Bilder: Reine Deko-Elemente (Trennlinien, Hintergrund-Muster): Leerer Alt-Text ist OK für Deko! Screenreader überspringen diese dann.
3. Bildgröße & Kompression: Performance ist SEO
Das Problem Originalbild von Smartphone: 4000×3000 Pixel, 5 MB
Folge
- Seite lädt 10 Sekunden
- Google straft ab
- Nutzer springen ab
Die Lösung Bilder komprimieren & richtige Größe wählen.
Richtige Bildgrößen: | Verwendung | Optimale Größe | Max. Dateigröße | |------------|---------------|-----------------| | Hero-Bild (Fullwidth) | 1920×1080px | 200-400 KB | | Content-Bild | 800×600px | 100-200 KB | | Thumbnail | 300×200px | 30-50 KB | | Logo | 300×100px | 20-50 KB | | Produkt-Foto | 800×800px | 100-150 KB |
Faustregel: Kein Bild über 500 KB (außer Hero-Images)!
Komprimierungs-Tools
Online (kostenlos):
- TinyPNG / TinyJPG (tinypng.com) - Top-Empfehlung
- Squoosh (squoosh.app) - von Google
- Compressor.io
WordPress-Plugins
- Smush (kostenlos)
- ShortPixel (kostenlos + Premium)
- Imagify
- EWWW Image Optimizer
Kompression-Level
- JPG: 70-85% Qualität (guter Mittelweg)
- PNG: Verlustfreie Kompression mit Tools
- WebP: 25-35% kleiner als JPG bei gleicher Qualität
4. Moderne Bildformate: WebP & AVIF
Das Problem mit JPG/PNG
- JPG: Verlustbehaftet, aber verbreitet
- PNG: Verlustfrei, aber groß
- Beide sind alt (90er Jahre!)
Moderne Alternativen
WebP: (Empfohlen)
- 25-35% kleiner als JPG bei gleicher Qualität
- Unterstützt Transparenz (wie PNG)
- Browser-Support: 95%+
- Google-Standard
AVIF
- 50% kleiner als JPG
- Noch bessere Qualität
- Browser-Support: ca. 85% (wachsend)
- Zukunft, aber noch nicht überall
Conversion-Tools
- Squoosh (online)
- WebP Converter (Desktop)
- WordPress-Plugins konvertieren automatisch
Wann JPG/PNG behalten? - Sehr alte Zielgruppe (pre-2015 Browser) - Prints/Downloads (WebP noch nicht Standard in Office-Software)
5. Lazy Loading: Bilder erst bei Bedarf laden
Was ist Lazy Loading? Bilder laden erst, wenn sie im sichtbaren Bereich sind (beim Scrollen).
Warum wichtig
- Initiale Ladezeit massiv schneller
- Spart Datenvolumen
- Google mag's
Ohne Lazy Loading: Seite lädt 50 Bilder sofort = 10 Sekunden Ladezeit
Mit Lazy Loading: Seite lädt 5 sichtbare Bilder = 2 Sekunden, Rest beim Scrollen
WordPress: Seit WordPress 5.5 automatisch aktiv!
Ausnahmen (NICHT lazy loaden)
- Bilder "above the fold" (sofort sichtbar)
- Logo
- Hero-Bild
6. Responsive Images: Richtige Größe für jedes Gerät
Das Problem Desktop lädt 1920px Bild, Smartphone braucht nur 400px = Verschwendung!
Die Lösung Verschiedene Bildgrößen für verschiedene Geräte.
Browser wählt automatisch passende Größe!
WordPress: Macht das automatisch (wenn Theme gut programmiert).
7. Bildunterschriften (Captions): Oft übersehen
Bildunterschriften sind SEO-relevant!
Warum
- Nutzer lesen Bildunterschriften 300% häufiger als Body-Text
- Google wertet sie aus
- Zusätzlicher Ort für Keywords
Best Practices
- Nicht nur wiederholen, was im Alt-Text steht
- Kontext geben
- Keyword einbauen (wenn passend)
- Kurz & prägnant
8. Bilder-Sitemap: Google alle Bilder zeigen
Was ist eine Bilder-Sitemap? XML-Datei, die Google alle Bilder auf Ihrer Website zeigt.
Warum wichtig
- Google findet alle Bilder (auch versteckte)
- Bessere Indexierung in Google Bilder
- Zusätzliche Metadaten möglich
Automatisch erstellen
- WordPress: Yoast SEO oder Rank Math erstellen automatisch
- Andere CMS: Meist Plugin/Extension verfügbar
- Manuell: XML-Sitemap-Generator-Tools
In Google Search Console einreichen
- 1Sitemap erstellen
- 2Google Search Console → Sitemaps
- 3URL der Bilder-Sitemap eingeben
- 4Absenden
9. Strukturierte Daten für Bilder (Schema.org)
Für bestimmte Bild-Typen
- Produkt-Bilder
- Rezept-Fotos
- Artikel-Bilder
- Personen-Fotos
Vorteile
- Rich Snippets in Google
- Bessere Darstellung
- Höhere Klickrate
Tools
- Google Structured Data Markup Helper
- Schema.org Generator
- WordPress: Schema-Plugins
10. Kontext: Umgebender Text ist wichtig
Google bewertet Bilder im Kontext der Seite.
Best Practices: Bilddateiname + Alt-Text + Caption + Umgebender Text sollten zusammenpassen!
Beispiel schlecht
- Seite über "Webdesign"
- Bild: urlaub-strand.jpg
- Alt: "Strand bei Sonnenuntergang"
- Irrelevant → Google ignoriert
Beispiel gut
- Seite über "Webdesign für Restaurants"
- Bild: restaurant-webdesign-tablet.jpg
- Alt: "Restaurant-Website auf Tablet mit Online-Reservierung"
- Umgebender Text über Restaurant-Webdesign
- Relevant → Google wertet auf
04
Häufige Bilder-SEO-Fehler
Fehler 1: Keine Alt-Texte
Das Problem: 50% aller Websites haben fehlende oder schlechte Alt-Texte.
Die Lösung Jedes Bild braucht Alt-Text (außer reine Deko).
Fehler 2: Zu große Bilder
Das Problem: 4 MB Bilder von der Smartphone-Kamera direkt hochgeladen.
Die Lösung IMMER komprimieren vor Upload! Ziel: unter 200 KB
Fehler 3: Stockfoto-Dateinamen
Das Problem: shutterstock_1234567.jpg, AdobeStock_9876543.jpg
Die Lösung Umbenennen vor Upload!
Fehler 4: Keyword-Stuffing in Alt-Texten
Das Problem: "Webdesign Webdesigner Website Webseite Homepage Internetseite Webagentur Webentwicklung"
Die Lösung Natürliche Beschreibung mit max. 1-2 Keywords.
Fehler 5: Bilder im falschen Format
Richtige Wahl
- Fotos: JPG oder WebP
- Logos, Icons, Screenshots: PNG oder SVG
- Animationen: GIF oder MP4 (Video oft kleiner!)
Fehler 6: Hotlinking (Bilder von anderen Websites)
Warum schlecht
- Deren Bandbreite nutzen (kann abgestellt werden)
- Keine Kontrolle (Bild kann verschwinden/geändert werden)
- Kein SEO-Nutzen
Die Lösung Bilder herunterladen, selbst hosten.
05
Bilder-SEO für verschiedene Bild-Typen
Produkt-Bilder (E-Commerce)
Besonderheiten
- Mehrere Ansichten (vorne, hinten, seitlich)
- Zoom-Funktion
- 360°-Ansichten
Alt-Text-Beispiele
- "Nike Air Max 90 Sneaker weiß-rot Vorderansicht"
- "Nike Air Max 90 Sneaker weiß-rot Seitenansicht links"
- "Nike Air Max 90 Sneaker weiß-rot Sohlendetail"
Hero-Images (Startseite)
Besonderheiten
- Großflächig
- Erste visuelle Impression
- Muss schnell laden
Optimierung
- WebP-Format
- ca. 200-400 KB
- Above-the-fold = NICHT lazy loaden
- Kritisches CSS inline
Team-Fotos
Alt-Text-Struktur
- "Max Müller, Geschäftsführer bei Webnamic"
- "Dr. Sarah Schmidt, Zahnärztin in Hamburg"
- "Das Webnamic-Team: 5 Mitarbeiter vor Bürogebäude"
Vorher-Nachher-Bilder
Besonders wichtig für
- Handwerk
- Zahnärzte
- Friseure
- Renovierung
Alt-Text-Beispiele
- "Badezimmer vor Renovierung - alte Fliesen und Sanitär"
- "Badezimmer nach Renovierung - moderne Fliesen und Dusche"
Infografiken
Alt-Text
- Zusammenfassung der Hauptaussagen
- Nicht: "Infografik über..."
- Sondern: Kernaussagen beschreiben
Beispiel: "Infografik zeigt 5 SEO-Faktoren: Content, Backlinks, Performance, Mobile, User Experience - mit Gewichtung"
Zusätzlich: Textliche Zusammenfassung unter Infografik (für Accessibility).
06
Tools für Bilder-SEO
Analyse-Tools
Screaming Frog
- Crawlt Website
- Zeigt alle Bilder
- Fehlende Alt-Texte
- Dateigrößen
- (Kostenlos bis 500 URLs)
Google Search Console
- Zeigt indexierte Bilder
- Fehler bei Bild-Indexierung
PageSpeed Insights
- Zeigt zu große Bilder
- Empfiehlt moderne Formate (WebP)
Optimierungs-Tools
Kompression
- TinyPNG / TinyJPG
- Squoosh
- ImageOptim (Mac)
Format-Konvertierung
- Squoosh (zu WebP/AVIF)
- CloudConvert
- XnConvert
WordPress-Plugins
- Smush
- ShortPixel
- Imagify
- EWWW Image Optimizer
07
Checkliste: Bilder-SEO
Vor dem Upload - Bild komprimiert (unter 200 KB für normale Bilder) - Richtiges Format (JPG/WebP für Fotos, PNG/SVG für Grafiken) - Richtige Größe (nicht 4000px für 800px Anzeige) - Sprechender Dateiname (keyword-enthaltend, beschreibend)
Beim Upload - Alt-Text geschrieben (beschreibend, 10-15 Wörter) - Title-Attribut (optional, für Tooltip) - Caption/Bildunterschrift (wenn sinnvoll)
Nach Upload - Lazy Loading aktiviert - Responsive Images (srcset) wenn möglich - Umgebender Text relevant zum Bild - Bild in Bilder-Sitemap
Regelmäßig prüfen - Alle Bilder haben Alt-Texte (Screaming Frog) - Ladezeiten ok (PageSpeed Insights) - Bilder in Google Bildersuche indexiert (Google Search Console)
08
Fazit: Bilder-SEO lohnt sich!
Die wichtigsten Erkenntnisse:
- 1Alt-Texte sind Pflicht - für SEO, Accessibility, Recht
- 2Kompression spart Ladezeit - PageSpeed = Ranking-Faktor
- 3WebP ist Standard 2025 - 25-35% kleinere Dateien
- 4Dateinamen vor Upload - handwerker-fassade.jpg statt IMG_1234.jpg
- 5Lazy Loading - schnellere initiale Ladezeit
- 6Kontext ist wichtig - Bilder müssen zum Seitenthema passen
- 7Bilder-Sitemap - hilft Google, alle Bilder zu finden
Der Unterschied: Optimierte Bilder-SEO kann Ihnen 10-30% zusätzlichen Traffic bringen - kostenlos!
Zeit-Investition
- Erste Optimierung: 2-4 Stunden
- Laufend: 10 Minuten pro neuem Bild
ROI: Massiv! Mehr Traffic, bessere Rankings, schnellere Website - alles durch bessere Bilder.
Starten Sie heute: Nehmen Sie sich die 10 wichtigsten Bilder Ihrer Website vor und optimieren Sie sie. Sie werden den Unterschied sehen!
Redaktionsstandard
Jeder Webnamic-Ratgeber folgt derselben Logik: klare These, konkrete Diagnose, praktische Schritte und ein nachvollziehbarer nächster Handlungspunkt.
