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?

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

Schlecht: Ein 3 MB grosses Hero-Bild namens image1.jpg, Alt Text SEO SEO Tool SEO Content, lazy-loaded im ersten Viewport. Das ist langsam, unhilfreich und wirkt spammy. Besser: contextter-content-score-dashboard.webp, passende responsive Varianten, Alt Text Contextter dashboard showing a content score and optimization checks, nahe am Abschnitt ueber Content Scoring. Das Bild erklaert etwas, laedt passend und passt zum Seitenthema.

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

Contextter-Perspektive

Contextter kann Image and Media Optimization schon im Content-Brief vorbereiten: Welche Abschnitte brauchen ein Bild? Welche Screenshots oder Diagramme wuerden eine Aussage beweisen? Welche Alt-Texte und Captions sind fachlich sinnvoll? So wird Media SEO Teil der Inhaltsqualitaet statt ein spaeter Kompressions-Task.

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.