Image and Media Optimization

Kurzdefinition

Image and Media Optimization sorgt dafuer, dass Bilder schnell laden, zugaenglich beschrieben sind und inhaltlich zur Seite passen. Gute Bild-SEO verbindet Performance, Accessibility, Kontext und visuelle Qualitaet.

Begriffe auf dieser Seite

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

Einfach erklaert

Ein Bild kann eine Seite sofort besser machen: Es zeigt ein Produkt, erklaert 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 Groesse 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 gefuellt 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 erklaerend ist. Gute Bildoptimierung ist breiter: Dateiname, Alt Text, Caption, umgebender Text, Bildqualitaet, Format, responsive Varianten, strukturierte Daten und Ladeverhalten muessen zusammenpassen. Das Ziel ist nicht, ein Bild fuer Suchmaschinen zu dekorieren. Das Ziel ist, dass das Bild fuer 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 groesser als noetig. Es ergaenzt den Text statt ihn zu belasten.

Alt Text

Alt Text beschreibt die relevante Bildinformation fuer 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 kuenstliche Beschreibung.

Responsive Images

Responsive Images liefern je nach Geraet, 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 verlaesslich 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 laedt oder den Inhalt verdraengt, wird es zum Problem. Das wichtigste sichtbare Bild braucht Prioritaet und passende Groesse.

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 Naehe, Title und Beschreibung der Seite sollten dasselbe Thema bestaetigen.

Lazy Loading

Lazy Loading ist sinnvoll fuer nicht sichtbare Bilder weiter unten. Es ist gefaehrlich fuer Bilder, die sofort sichtbar sein muessen. Wenn das wichtigste Bild erst nach Nutzerinteraktion oder zu spaet geladen wird, leiden Nutzererfahrung und Crawlbarkeit.

Entscheidungsregeln

Frage zuerst, ob das Bild einen echten Job hat: erklaeren, beweisen, vergleichen, zeigen oder emotional einordnen. Waehle dann ein passendes Format und eine passende Groesse. Schreibe Alt Text fuer die Bildinformation, nicht fuer das Keyword. Setze Bilder nahe an den relevanten Text. Nutze responsive Varianten fuer unterschiedliche Geraete. Lade Above-the-Fold-Bilder nicht unnoetig spaet. Nutze strukturierte Daten oder og:image, wenn ein repraesentatives Bild fuer 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. Fuer jedes Asset notierst du Zweck, Dateiname, Alt Text, Groesse, Format, Ladeverhalten, mobile Variante und Textkontext. Danach priorisierst du: LCP-relevante Bilder zuerst, dann Bilder mit hohem Erklaerwert, dann generische Dekoration. Teste die Seite auf Mobilgeraeten und langsamer Verbindung. Pruefe, ob die wichtigsten Bilder im HTML auffindbar sind und ob Lazy Loading nicht von Nutzeraktionen abhaengt.

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 moeglichst dieselbe URL genutzt werden, damit Caching und Crawling effizient bleiben. Fuer grosse Bildbibliotheken lohnt sich automatisierte Benennung und ein Review-Prozess fuer Alt Text.

Haeufige Fehler

Haeufige Fehler sind Keyword-Stuffing im Alt Text, fehlender Alt Text bei informativen Bildern, generische Dateinamen, riesige unkomprimierte Bilder, falsches Lazy Loading fuer Hero-Bilder, Bilder ohne Bezug zum Text, wichtige Informationen nur im Bild ohne Textalternative, zu extreme Seitenverhaeltnisse fuer Social- oder Search-Previews und duplizierte Bildvarianten ohne klare Strategie. Ebenso problematisch sind dekorative Stockbilder, die Vertrauen simulieren, aber nichts erklaeren.

Zusaetzlich 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 koennen 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 fuer 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

Review-Notizen

Dieser Eintrag bleibt im Draft-Status. Vor dem Publishing sollten Beispiele, lokale Formulierungen, interne Links und fachliche Nuancen redaktionell geprueft werden.