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" />