Tipps zur Benennung von Bilddaten für Websites

Dateinamen sollten zum Keyword und zum Bildmotiv passen

Die Dateinamen der Fotos, die als Ursprungsdatei aus einer Kamera kommen, sind meist nur mit Ziffern und Buchstaben benannt.
Beispielsweise: IMG16398.jpg

Mit diesem für Websitebesucher und Suchmaschinen (und vermutlich auch für Sie) gleichermaßen nichtssagenden Dateinamen kann man sich die Bilddaten zwar erstmal abspeichern, sollte die Benennung aber nicht so lassen.

Es empfiehlt sich stattdessen einen thematisch und zum fokussierten Keyword passenden Dateinamen und eine ebensolche Beschreibung (einen in Webseiten so genannten Alt-Text) zu formulieren.

Ein Beispiel für sinnvolle Dateinamen und Alt-Texte

Folgendes Szenario: Wir als Werbeagentur in Köln Ehrenfeld haben ein Foto ausgewählt, dass in unserer Website auf die Seite „Responsive Webdesign“ soll um das Thema zu veranschaulichen. Diese Seite sitzt von unserer Website-Struktur her hier:
Start/Leistungen/Beratung-und-Konzeption/Responsive-Webdesign

Das Haupt-Keyword dieser Seite ist deshalb „Responsive Webdesign“ – denn das ist ja das Seitenthema.

Das Foto zeigt den großen Monitor eines Desctop-Rechners und davor wird ein SmartPhone gehalten:

Ein sinnvoller Dateiname für dieses Bild wäre zum Beispiel:
responsive-webdesign-beispielmonitore.jpg

Ein zum Bildmotiv passender Alt-Text als Beschreibung wäre:
Beispiel für den Nutzen von Responsive Webdesign: Größenunterschied Desctop-Monitor zu SmartPhone

Den gleichen Alt-Text kann man, wie hier, auch als Bildunterschrift für das anklickbare vergrößerte Bild nutzen.

WICHTIG: Jeden Dateinamen und Alt-Text nur einem einzigen Bild zuordnen. Denn sonst ist der Informationsgeahlt wieder zunichte gemacht.

Mit all dem hat man Suchmaschinen schon gesagt, worum es in dem Bild geht und das man sich die Mühe gemacht hat, den Seitentext mit thematisch passenden erklärenden Fotos zu bebildern.

Und vor Allem hat man auch Website-Besuchern mit eingeschränkter Sehfähigkeit einen guten Dienst erwiesen: Denn Lese-Software, die Sehbehinderten Webseiten vorliest, kann nun aus unserer Benennung und Beschreibung eine sinnvolle Information vorlesen. Sehr wichtig, weil ja nunmal der Sehbehinderte unser Bild nicht oder nur teilweise optisch wahrnehmen kann.

Man muss sich das mit der Lese-Software ungefähr so vorstellen:

Die Lese-Software liest den Text einer Webseite von oben nach unten vor – bzw. in der Reihenfolge der im Quellcode definierten Gliederung – die stimmt im Worst Case leider nicht mit der sichtbaren Reihenfolge überein. (Hier kommt auch wieder die Wichtigkeit einer korrekten semantischen Auszeichnung in der Programmierung ins Spiel – aber dazu an anderer Stelle mal mehr).

Erscheint nun im Text ein Bild, liest die Software, ebenfalls im Worst Case, so etwas vor:

Hier sitzt die Bilddatei IMG16398.jpg

Im besten Falle liest sie aber so etwas und zieht dafür die Texte aus Ihrem Bild-Dateinamen und dem Alt-Text heran:

Hier sitzt die Bilddatei responsive-webdesign-beispielmonitore.jpg
Das Bild zeigt ein Beispiel für den Nutzen von Responsive Webdesign: Größenunterschied Desctop-Monitor zu SmartPhone.

Jetzt kann man sich – bewusst provokant formuliert – vielleicht fragen, was einem blinden Website-Besucher nützt, das zu wissen und wieviele blinde Website-Besucher denn zu Ihrer Zielgruppe zählen.

Nun gut, aber wie sinnvoll ist denn eine Info wie „Hier sitzt die Bilddatei IMG16398.jpg“ ?

Und es geht ja dabei auch gar nicht ausschließlich um Website-Besucher, die blind sind, sondern auch um solche mit nur eingeschränkter Sehfähigkeit. Und denen hilft es enorm, wenn ihnen zu einem für sie vielleicht nur unscharf oder verschwommen erkennbaren Bild zumindest eine inhaltliche Info zum Bild vorgelesen wird, die ihnen das richtige Deuten des  evtl. nur schemenhaft für sie sichtbaren Bildes erleichtert.

Was dem User gut tut, finden auch Suchmaschinen gut

Und weil das alles sehr benutzerfreundlich ist, findet es auch Google toll: Denn Google möchte „einfach gute Ergebnisse“ liefern. Und gute Ergebnisse sind unter Anderem auch deshalb gut, weil sie auf benutzerfreundliche, komfortabel und vielleicht sogar mit Spaß bedienbare Webseiten führen – die zudem auch noch hochwertige umfangreiche, aktuell gehaltene Informationen zum angefragten Suchbegriff enthalten.

So können Sie also mit ganz einfachen kleinen Mitteln zugleich die Usability und die Suchmaschinenoptimierung Ihrer Website verbessern. Und nebenbei bemerkt steigert das Einfügen von redaktionell passenden Bildern – seien es nun Fotos, Info-Grafiken oder Illustrationen – die Attraktivität Ihrer Webseiten-Texte und führt dazu, dass es mehr Spaß macht, sie wirklich zu lesen.