Grafiken einbinden: Der Elementtyp img

Das leere Element img bettet ein Bild an der Stelle in das aktuelle Dokument ein, an der das Leeres-Element-Tag notiert ist.

img-Elemente verfügen üblicherweise über die Attribute src, width, height und alt.

Das Attribut src gibt den Ort der Bildquelle über einen URI an.

Die Attribute width und height in Pixel oder Prozent weisen Benutzerprogramme an, die Originalbildgröße zugunsten ihrer Werte (Pixel oder Prozent) zu überschreiben; das Bild wird entsprechend skaliert.

Prozentual angegebene Längen beziehen sich auf den horizontal oder vertikal verfügbaren Raum, der dem Bild zur Verfügung steht, und nicht auf dessen Originalgröße. Steht beispielsweise einem 300 Pixel breiten Bild ein horizontaler Raum von 800 Pixeln zur Verfügung und wird eine Breite von 50 Prozent angeben, wird das Bild nicht auf 150 Pixel Breite skaliert (50 Prozent von 300), sondern auf 400 Pixel (50 Prozent von 800).

Bei Rastergrafiken wie beispielsweise PNG, GIF oder JPEG, also Grafiken, die aus einer matrixförmigen Anordnung von Pixeln bestehen, denen jeweils eine Farbe zugeordnet ist, führt eine Skalierung zu unschönen Effekten, da die Bilder verlustbehaftet einfach nur in die Länge gezogen oder gestaucht werden können.

Es gehört zum guten Stil, die Breite und Höhe eines Bilds stets anzugeben, damit Browser den benötigten Platz reservieren und das Dokument weiter aufbauen können, während die Bilddaten noch geladen werden. Fehlen diese Attribute, führt dies zu unschönen Effekten beim Seitenaufbau; die Seite wird zunächst ohne Bilder angezeigt und muss sich schließlich neu zurechtruckeln, sobald die Bilder geladen sind.

Das Attribut alt gibt alternativen Text für Benutzerprogramme an, die Bilder nicht darstellen können, beispielsweise Screenreader oder Textbrowser, aber auch Suchmaschinen.

Das alt-Attribut muss für jedes img-Element angegeben werden.

Es ist nicht einfach, für jede Grafik stets den richtigen Alternativtext zu finden. Hilfreich ist es, zwischen drei Arten von Grafiken zu unterscheiden:

Bilder, die echten Inhalt aufweisen

Dazu gehören alle Grafiken, die informationstragende Schriftzüge enthalten, in vielen Fällen das Logo des Webauftritts, als Grafiken realisierte Überschriften oder grafische Schaltflächen und Symbole. Der im Bild enthaltene Text muss im Alternativtext wiedergegeben werden; es ist am besten, wenn der im Bild enthaltene Text und der Alternativtext identisch sind oder nur leicht voneinander abweichen.

<img src="img/webkrauts-kopf.gif" width="684" height="202"
  alt="Webkrauts: Webstandards für ein besseres Web!" />

Abb. 5.4: Webkrauts-Schriftzug

Fotos und grafische Darstellungen

Dazu gehören Diagramme und schematische Darstellungen von Zusammenhängen ebenso wie Fotos von der letzten Betriebsfeier. Hier erfüllt das alternative Attribut eher eine beschreibende Funktion.

<img src="/images/weihnachtsfeier/2004/42"
  width="400" height="300"
  alt="Maximilian, Alexander und Marie auf der Tanzfläche" />

Layoutgrafiken

Alle Grafiken, die zur Dekoration oder aus Gründen der Darstellung verwendet werden und keine Information transportieren, sind Layoutgrafiken. Dazu gehören Hintergrundgrafiken, Icons, Trennlinien und das in düsteren Zeiten des Webdesigns beliebte transparente GIF zur Positionierung und Ausrichtung von Inhalten. Bei derartigen Bildern führen Sie das alt-Attribut natürlich auf, lassen es aber leer. Alle nicht visuellen Benutzerprogramme, also auch Suchmaschinen und Screenreader, beachten die Layoutgrafik daraufhin nicht.

<img src="pix.gif" width="2" height="500" alt="" />

Layoutgrafiken haben im Sinne der konsequenten Trennung von Markup und Layout im XHTML-Quelltext eines Dokuments nichts zu suchen und sollten mittels CSS in eine Seite eingebunden werden. Mehr dazu lesen Sie in Kapitel 7.2.

Im Zusammenhang mit dem alt-Attribut kommt es immer wieder zu einem schweren Missverständnis: Viele Webdesigner glauben, mithilfe des alternativen Attributs erzeuge man einen Tooltipp. Dieser Irrglaube resultiert aus der Tatsache, dass veraltete Browser den Inhalt des alternativen Attributs als Tooltipp darstellen – dieses Verhalten ist entsprechend den Empfehlungen zwar nicht falsch, aber sehr unglücklich, wie sich immer wieder zeigt. Tooltipps bei Bildern erreichen Webautoren wie bei jedem Element über das title-Attribut. Ein Tipp: Möchten Sie verhindern, dass das alternative Attribut auch als Tooltipp angezeigt wird, notieren Sie zusätzlich title="".

<img src="/images/weihnachtsfeier/2004/42"
  width="400" height="300" title=""
  alt="Maximilian, Alexander und Marie auf der Tanzfläche" />