Image and Media Optimization

Kurzdefinition

Image and Media Optimization sorgt dafür, dass Bilder schnell laden, zugänglich beschrieben sind und inhaltlich zur Seite passen. Gute Bild-SEO verbindet Performance, Accessibility, Kontext und visuelle Qualität.

Begriffe auf dieser Seite

• Image Optimization
• Alt Text
• Responsive Images
• Above the Fold
• Image Filenames
• Lazy Loading

Einfach erklärt

Ein Bild kann eine Seite sofort besser machen: Es zeigt ein Produkt, erklärt einen Schritt, macht ein abstraktes Konzept sichtbar oder schafft Vertrauen. Es kann die Seite aber auch schwer, langsam und unklar machen. Bildoptimierung fragt deshalb nicht nur: Ist die Datei klein? Sondern: Warum ist dieses Bild hier? Was soll man daraus lernen? Kann jemand ohne Bild dieselbe Information verstehen? Wird auf dem Handy die richtige Größe geladen? Und erkennt Google den Zusammenhang zwischen Bild, Text und Seite?

Ordne Bildbefunde in den technischen Audit-Ablauf ein, damit Ladeaufwand, gerenderter Inhalt und Zugänglichkeit gemeinsam betrachtet werden.

Warum das Thema oft falsch verstanden wird

Viele behandeln Image SEO wie ein Alt-Text-Feld. Dann wird jedes Bild mit Keywords gefüllt und der Rest bleibt unoptimiert. Andere schauen nur auf Kompression und vergessen, dass ein perfekt kleines Bild nutzlos ist, wenn es generisch, unscharf oder nicht erklärend ist. Gute Bildoptimierung ist breiter: Dateiname, Alt Text, Caption, umgebender Text, Bildqualität, Format, responsive Varianten, strukturierte Daten und Ladeverhalten müssen zusammenpassen. Das Ziel ist nicht, ein Bild für Suchmaschinen zu dekorieren. Das Ziel ist, dass das Bild für die Seite arbeitet.

Die wichtigsten Konzepte

Image Optimization

Image Optimization umfasst Kompression, passende Formate, sinnvolle Abmessungen, beschreibende Dateinamen und klare Einbettung im Inhalt. Ein gutes Bild ist scharf genug, aber nicht größer als nötig. Es ergänzt den Text statt ihn zu belasten.

Alt Text

Alt Text beschreibt die relevante Bildinformation für Menschen, die das Bild nicht sehen. Er ist kein Keyword-Feld. Guter Alt Text ist knapp, konkret und kontextbezogen. Wenn ein Bild dekorativ ist, kann leerer Alt Text sinnvoller sein als eine künstliche Beschreibung.

Responsive Images

Responsive Images liefern je nach Gerät, Viewport und Pixeldichte passende Varianten. srcset und picture verhindern, dass ein kleines Smartphone ein riesiges Desktop-Bild laden muss. Wichtig bleibt ein fallback src, damit Bild-URLs verlässlich auffindbar sind.

Above the Fold

Bilder im ersten sichtbaren Bereich beeinflussen den ersten Eindruck und oft die Ladeerfahrung. Ein Hero-Bild kann hilfreich sein, aber wenn es langsam lädt oder den Inhalt verdrängt, wird es zum Problem. Das wichtigste sichtbare Bild braucht Priorität und passende Größe.

Image Filenames and Context

Dateinamen geben leichte Hinweise. content-score-dashboard.png ist besser als IMG_0042.png. Noch wichtiger ist der Kontext: Bild, Caption, Text in der Nähe, Title und Beschreibung der Seite sollten dasselbe Thema bestätigen.

Lazy Loading

Lazy Loading ist sinnvoll für nicht sichtbare Bilder weiter unten. Es ist gefährlich für Bilder, die sofort sichtbar sein müssen. Wenn das wichtigste Bild erst nach Nutzerinteraktion oder zu spät geladen wird, leiden Nutzererfahrung und Crawlbarkeit.

Entscheidungsregeln

Frage zuerst, ob das Bild einen echten Job hat: erklären, beweisen, vergleichen, zeigen oder emotional einordnen. Wähle dann ein passendes Format und eine passende Größe. Schreibe Alt Text für die Bildinformation, nicht für das Keyword. Setze Bilder nahe an den relevanten Text. Nutze responsive Varianten für unterschiedliche Geräte. Lade Above-the-Fold-Bilder nicht unnötig spät. Nutze strukturierte Daten oder og:image, wenn ein repräsentatives Bild für die Seite wichtig ist. Und entferne Bilder, die nur Gewicht erzeugen.

Praktischer Audit-Workflow

Starte mit einem Medieninventar der Seite: Hero-Bild, Produktbilder, Diagramme, Screenshots, Icons, Videos und eingebettete Grafiken. Für jedes Asset notierst du Zweck, Dateiname, Alt Text, Größe, Format, Ladeverhalten, mobile Variante und Textkontext. Danach priorisierst du: LCP-relevante Bilder zuerst, dann Bilder mit hohem Erklärwert, dann generische Dekoration. Teste die Seite auf Mobilgeräten und langsamer Verbindung. Prüfe, ob die wichtigsten Bilder im HTML auffindbar sind und ob Lazy Loading nicht von Nutzeraktionen abhängt.

Gutes und schlechtes Beispiel

Ein großes Bild namens image1.jpg und ein mit Keywords gefüllter Alt-Text helfen Lesern nicht. Nutze einen beschreibenden Dateinamen, passende Bildgrößen und einen Alt-Text, der den tatsächlich sichtbaren Inhalt erklärt. Bei einem Site-Audit-Screenshot können das die gezeigten URLs und technischen Befunde sein. Platziere ihn bei der zugehörigen Erklärung und lade das Hauptbild im ersten Viewport nicht verzögert.

Details, die oft fehlen

Ein Detail, das oft fehlt: Die Landingpage ist Teil der Bildoptimierung. Google bewertet ein Bild nicht isoliert, sondern im Kontext der Seite, auf der es eingebettet ist. Titel, Beschreibung, Text neben dem Bild, strukturierte Daten und sichtbarer Inhalt beeinflussen, wie ein Bild verstanden wird. Auch Wiederverwendung braucht Disziplin: Wenn dasselbe Bild auf mehreren Seiten genutzt wird, sollte möglichst dieselbe URL genutzt werden, damit Caching und Crawling effizient bleiben. Für große Bildbibliotheken lohnt sich automatisierte Benennung und ein Review-Prozess für Alt Text.

Häufige Fehler

Häufige Fehler sind Keyword-Stuffing im Alt Text, fehlender Alt Text bei informativen Bildern, generische Dateinamen, riesige unkomprimierte Bilder, falsches Lazy Loading für Hero-Bilder, Bilder ohne Bezug zum Text, wichtige Informationen nur im Bild ohne Textalternative, zu extreme Seitenverhältnisse für Social- oder Search-Previews und duplizierte Bildvarianten ohne klare Strategie. Ebenso problematisch sind dekorative Stockbilder, die Vertrauen simulieren, aber nichts erklären.

Zusätzlich abgedeckte Begriffe

• Image landing page
• srcset
• picture element
• LCP image
• og:image
• primaryImageOfPage
• Captions
• Image sitemap

Interne Verlinkung

Diese Related Terms sind im CMS hinterlegt und können vom Glossar-Layout automatisch als verwandte Themen ausgespielt werden.

• page-speed
• core-web-vitals
• lighthouse
• structured-data
• visual-search-optimization

Mit Crawl Foundry anwenden

Sammle und organisiere Keywords in der Keyword-Datenbank von Crawl Foundry. So bleibt deine Recherche zusammen, bevor du entscheidest, welche Seiten du erstellst oder überarbeitest.

Keyword-Datenbank ansehen

Quellen für den Review

• https://developers.google.com/search/docs/appearance/google-images
• https://developers.google.com/search/docs/crawling-indexing/javascript/lazy-loading
• https://developers.google.com/search/docs/fundamentals/seo-starter-guide