[Neu (Nov. 2017): „Was ist wichtiger – Alt-Text oder Title-Text?“ und „Was soll man in Alt-Text und Title-Attribut reinschreiben?„] „Wofür ist der Alt-Text?“ – „Wie wichtig ist der Alt-Text bei Bildern?“ -Dieser Artikel beschäftigt sich mit den Grundlagen der Bilder auf Websites. In den vergangenen Tagen habe ich zwei Untersuchung zu einigen Image-Attributen gemacht: „Img-Attribute src, alt und title“ (Schwerpunkt Bildersuche) und „Image Attribute bei google-Universal-Search Bildern“ (Schwerpunkt Universal-Search Bilder). Dabei ging es im Wesentlichen um den Einfluss der Attribute als Ranking-Faktoren. Also SEO-Fragen. Aber natürlich ist die Suchmaschinen-Optimierung nur ein I-Tüpfelchen. Bilder werden ja nicht für Suchmaschinen in die Webseite integriert, sondern für den Benutzer. Daher will ich in diesem Artikel mal die grundsätzlichen Basics zum dem Image-Tag beschreiben.

Source: Pfadangabe / URL des Bildes

Eine HTML-Seite, die der Browser darstellt, wird durch sogenannte „TAGs“ strukturiert. Ein Bild auf einer Website wird durch einen „Image-Tag“ aufgerufen. Der HTML-Code zum Aufruf eines Bildes sieht ungefähr so aus:

<img src="www.domain.de/folder/bild.jpg" />

Entscheidend für den Aufruf des Bildes ist natürlich die Angabe der Bildquelle. Über welche URL kann das Bild aufgerufen werden. Die Angabe kann wie bei allen URL-Angaben absolut oder relativ sein. Ich empfehle grundsätzlich, alles URL-Angaben absolut zu machen. Relative Pfadangaben sind potentielle Fehlerquellen. Das SRC-Attribut ist das einzige, was zwingend erforderlich ist. Logisch. Alle folgenden Attribute sind optional und dienen der Beschreibung des Bild-Inhaltes oder der besseren Darstellung und Positionierung.

Width und Height

Neben der Bildquelle (source, src) sollten auch width und height (Weite und Höhe) gesetzt werden.

<img src="www.domain.de/folder/bild.jpg"
   width="100" height="150" />

Grund: Der Seitenaufbau geht dadurch schneller vonstatten, weil der Browser für die Darstellung nicht erst warten muss, bis das Bild heruntergeladen ist und dadurch diese Werte ermittelt wurden. Stattdessen setzt der Browser ein „Dummy-Container“ mit den angegebenen Werten und baut weiter die Seite auf. Das Bild kann dann erst im Anschluß geladen werden und wird in den Container eingesetzt. Die Width- und Height-Angaben können von der tatsächlichen Bildgröße abweichen. Das Bild wird dann in den Container „reingequetscht“ – man nennt das „Skalieren“. So kann man nicht nur die Bildgröße, sondern auch die Proportionen des Bildes anpassen.

Aus Qualitätsgründen würde ich jedoch dringend davor abraten, Bilder im HTML-Code zu skalieren. Die Engine, die das Bild umrechnet, ist wesentlich schlechter als bei vernünftigen Bildbearbeitungsprogrammen (z.B. Adobe Photoshop oder freeware Gimp). Das führt dazu, dass die Bilder grobe Artefakte zeigen, verschwommen, unsauber und insgesamt unschön aussehen. Daher: Bilder immer mit einem Grafikprogramm auf die richtige Größe skalieren und dann eins zu eins im HTML-Quellcode einfügen.

Der Alt-Text

Als nächstes kann sollte man ein ALT-Attribut definieren:

<img src="www.domain.de/folder/bild.jpg"
   width="100" height="150"
     alt="Ich bin ein Bild" />

Der Alt-Text wird, wie der Name vermuten läßt, alternativ angezeigt. Also nur, wenn das Bild aus welchen Gründen auch immer, nicht zu sehen ist. Das kann verschiedene Gründe haben: Server-Problem, falschen Pfadangabe, Bilder per Browser deaktiviert, oder eben eine „Lesehilfe“ für Benutzer mit Sehschwäche oder Blindheit. Aus Sicht des W3C ist der Alt-Text daher auch eine „Pflicht-Angabe“. Der Browser kann das Bild in aller Regel auch ohne Alt-Text anzeigen, aber es ist dringend anzuraten, den Alt-Text zu setzen.

Bild-Title (Universal-Attribut)

Zusätzlich kann man bei einen Bildaufruf das „Universal-Attribut“ Title definieren:

<img src="www.domain.de/folder/bild.jpg"
   width="100" height="150"
     alt="Ich bin ein Bild."
   title="Ich bin ein Bild. [z.b. Copyright bei Autor]" />

Das Title-Attribut erscheint im Browser als „Tooltip“. Wenn man mit dem Cursor auf ein Element mit Title-Attribut rollt, so erscheint nach kurzer Zeit eine Art „Layer mit Erklärungstext“. Und zwar ist genau der Text zu lesen, der im Title-Attribut gesetzt wird. Das Title-Attribut ist also eine zusätzliche Information, und keine alternative.

Der legendäre Internet-Explorer 6 hatte die „Macke“, dass er statt des Title-Textes den Alt-Text als Tooltip angezeigt hat. Auch daher stammt das Gerücht, dass der Alt-Text der „Tooltip“-Text sei.

Viele Webdesigner/Programmierer orientieren sich beim Erstellen des HTML-Codes an den Vorgaben des W3C, die wunderbar auf der „SelfHTML„-Seite beschrieben sind. Auf der Seite der Tag-Attribute wird beim Image-Tag allerdings nicht das Title-Attribut aufgelistet. Daher sind viele der Meinung, dass man das „Title-Attribut bei Bildern“ überhaupt nicht setzen darf. Das ist allerdings nicht richtig. Denn „Title“ ist ein sog. Universal-Attribut, dass in fast allen vielen Tags gesetzt werden darf.

Das Title-Attribut kann als Tooltip für den Benutzer durchaus hilfreich sein – insbesondere dann, wenn ein Bild keine sichtbare Bildunterschrift hat. Ich würde daher empfehlen, es zu setzen. Zumindest eben dann, wenn die Bilder – aus welchen Gründen auch immer – keine Bildunterschrift haben.

longDesc – Bildbeschreibung

LongDesc ist die Abkürzung für „Long-Description“. Dieses Attribut wurde vor geraumer Zeit eingeführt, damit der Alt-Text der Bilder im Bedarfsfall nicht zu lang wird. Diejenigen, die eine ausführliche Bildbeschreibung anbieten wollten, sollten diese auf einer extra-HTML-Seite bereitstellen. Der Wert des longDesc-Attributes ist dann die URL zu dieser Bildbeschreibung.

<img src="www.domain.de/folder/bild.jpg"
   width="100" height="150"
     alt="Ich bin ein Bild."
   title="Ich bin ein Bild. [z.b. Copyright bei Autor]"
longdesc="https://www.tagseoblog.de/bilder-longdesc/bild.html" />

Das longDesc-Attribut wurde im Zusammenhang mit der „Barrierefreiheit für Websites“ eingeführt. Es hat sich allerdings nie durchgesetzt. Das Hauptproblem ist, dass die Browser es einfach nicht darstellen bzw. nutzbar machen. Im Firefox, kann man die Bildbeschreibungs-Html-Seite immerhin in den Eigenschaften des Bildes sehen. Aber die URL muss man per Hand kopieren und in die Adresszeile einfügen, um die Seite öffnen zu können. Nicht gerade komfortabel. Der longdesc kann daher aus meiner Sicht getrost weggelassen werden. Ich habe ihn bei keinem meiner Projekte benutzt. Für die findigen Bilder-Optimierer-SEOs ist er aber vielleicht ein schönes Testobjekt.

Die bisher genannten Attribute „Src“, „Alt“ und „Title“ (und „longDesc“) kann man auch „Content-sensitive“ Attribute nennen. Aus ihnen lassen sich textuelle-Informationen herauslesen. Diese Informationen sind für die Besucher hilfreich und bieten den Suchmaschinen die Möglichkeit, auf den Inhalt der Bilder zu schließen.

Attribute zur Darstellung

Um das Bild sauber in die Website zu integrieren, gibt es eine Reihe von Darstellungsattributen, die aus der Urzeit des Internets stammen. So kann man zum Beispiel einen Rahmen definieren (border=“4″). Der Wert („4“) gibt dabei die Pixelbreite des Rahmens an. Ich will aber hier jetzt gar nicht weiter auf diese „Uralt-Attribute“ eingehen, weil man die Darstellung heutzutage natürlich über CSS („Cascading Style Sheet“) löst. Hierbei definiert man in einem Style-Attribut die Erscheinung des Bildes:

<img src="www.domain.de/folder/bild.jpg"
   width="100" height="150"
     alt="Ich bin ein Bild."
   title="Ich bin ein Bild. [z.b. Copyright bei Autor]"
   style="border:#111 4px solid; float:left; margin:0 12px 0 0" />

In diesem Beispiel wird dem Bild ein Rahmen gegeben, und zwar 4 Pixel breit, Farbe dunkelgrau( #111), Rahmenlinie durchgezogen (solid). Das Bild passt sich links in den Text ein (float: left) und hält einen Textabstand zum Text (0-oben, 12 pixel nach rechts, 0 px unten und 0 px links). Mehr über CSS-Formatierung hier.

Naja, und natürlich sollte man auf einer sauber gebauten Seite die CSS-Angaben übergeordnet in einer separaten CSS-Datei ablegen. Darin werden dann Klassen-Elemente definiert, die im HTML-Code als Klassen-Selektor aufgerufen werden. In unserem Beispiel sieht das dann so aus:

<img src="www.domain.de/folder/bild.jpg"
   width="100" height="150"
     alt="Ich bin ein Bild."
   title="Ich bin ein Bild. [z.b. Copyright bei Autor]"
   class="bild-Style" />

Die Klasse Bild-Style kann dann von jedem Bild auf der Website aufgerufen werden.Tja, und genau so, wie hier beschrieben, setze ich meine Bilder ein: width und height, alt, title und class. Wer es nicht glaubt, kann gerne den Quelltext öffnen und sich die Sache ansehen.

Fazit: ALT-Text und/oder Title-Text?

Also: longDescription kann man vernachlässigen. Die Darstellungsattribute sind individuell. Der Dateiname sollte natürlich schon mit dem, was auf dem Bild zu sehen ist zu tun haben. Alt-Text und/oder Title-text? Und was schreibt man wie umfangreich rein?

Wie oben beschrieben, sollte der Alt-Text unbedingt gesetzt werden. Was man genau hineinschreibt, überlegt man am Besten, wenn man sich vorstellt, dass an der Stelle, an der das Bild eigentlich erscheinen soll, nur ein text steht. Was macht dann Sinn? Welche Begriffe würden das Bild am treffendsten ersetzen. Ich nehme zumeist eine sehr kurze Beschreibung. Natürlich kann kein Text der Welt die Wirkung eines Bild auch nur annähernd ersetzen. Daher nehme ich meist die Stichwörter, die mich zum Einsatz eines Bildes motiviert haben. Oft genug ist das nicht genau das, was auf dem Bild konkret zu sehen ist, sondern das, was mit dem Bild visualisiert werden sollte.

Auch den Einsatz des Title-Attributes habe ich oben beschrieben: Als Tooltip zeigt er im Grunde die Informationen, die eine Bildunterschrift haben sollte. Das ist zunächst der „Titel des Bildes“. Hinzu kommen können Angaben über Aufnahmeort oder -zeit, den Autoren, über Copyright oder ähnliches. Daher ist der Title bei mir oft länger als der Title-Text – oder er ist eben identisch. In einem identischen Alt- und Title-Text sehe ich überhaupt kein Problem, weil es zwei völlig verschiedene Sachen sind: der eine ist wichtig, wenn das Bild nicht zu sehen ist, der andere ergänzt das Bild.

Sogut zu den Grundlagen zu Bildern auf Websites – zumindest was den HTML-Teil betrifft. Falls ich etwas vergessen habe, würde ich mich über einen enstprechenden Kommentar freuen.

Weiterführende Weblinks und Artikel

• Bilder optimieren für google Bildersuche
• Google images Ranking Faktoren – Img-Attribute src, alt und title
• Image Attribute bei google-Universal-Search Bildern