HTML/Multimedia und Grafiken/Grafiken
Mit dem img-Element (img = image = Bild) können Sie Grafikdateien in Ihre HTML-Dokumente einbinden. img ist ein sogenanntes Standalone-Tag ohne Elementinhalt und ohne End-Tag.
Inhaltsverzeichnis
Attribute
Pflichtangaben
Folgende Angaben sind immer nötig:
-
src(engl. source für Quelle) für die Referenz der Bilddatei. Diese kann wie in HTML üblich relativ oder absolut angegeben werden.Beachten Sie: Die Grafik ist nicht Bestandteil des HTML-Dokuments, sondern wird in HTML an der Stelle referenziert, an der sie angezeigt werden soll. -
alt(engl. alternative) gibt den Alternativtext an, der angezeigt wird, wenn das Bild nicht geladen werden kann oder soll. Screen Reader lesen den Text vor.
optionale Angaben
Folgende Attribute sind möglich:
crossorigin:anonymous:use-credentials:
height: Angabe einer optionalen Höheismap: Falls Bild Teil einer Server-seitige verweis-sensitive Grafik istreferrer:sizes: eine kommagetrennte Liste mit einem Medienmerkmal (media condition) und einer GrößenangabeBeachten Sie: Der letzte Wert darf kein Medienmerkmal haben.srcset: eine kommagetrennte Liste mehrerer- URLs , ergänzt durch die optionale Angabe der
-
Breite: positive Zahl gefolgt von einem w. (Defaultwert ist unendlich) -
Pixeldichte: positive Zahl gefolgt von einem x. (Defaultwert ist 1x)
title: Zeigt einen Tooltip, wenn mit der Maus über das Bild gefahren wird.width: Angabe einer optionalen Breiteusemap: zeigt an, dass Bild Teil einer verweissensitiven Grafik ist
obsolete Angaben
-
alignersetzt durch: CSS - Ausrichtung borderersetzt durch: CSS - Rahmen-
hspaceersetzt durch: CSS - Abstand -
longdescwar ein Link zu einer längeren Beschreibung als im alt-Text, kann durch figcaption ersetzt werden. -
vspaceersetzt durch: CSS - Abstand
Hinweis
src und alt sind Pflicht.Angaben von width und height sind für die Darstellung des Bildes empfehlenswert, aber optional.
Alle anderen Angaben sollten im CSS formatiert werden.
Zugänglichkeit durch alternative Erklärungen
Der Alternativtext muss nicht unbedingt eine ausführliche Beschreibung sein. Oft ist die Bedeutung in wenigen Worten hinreichend erklärt.[1] Gelegentlich kann es jedoch notwendig sein, eine längere Erläuterung beizufügen, etwa bei Fotos oder Karikaturen. Hier eignet sich die Einbindung der Grafik in ein figure-Element mit einer figcaption-Bildunterschrift besser als der Alternativtext. Dennoch darf auch hier nicht auf ein alt-Attribut verzichtet werden.
Das alt-Attribut ist eine Pflichtangabe.
Häufig sieht man, dass für den Alternativtext der Dateiname oder der Titel des Bildes/der Grafik verwendet wird. Der Dateiname ist allerdings in den meisten Fällen ohne jede Aussagekraft, was in geringerem Umfang auch für den Titel der Grafik gilt.
Wenn Sie Bilder als Links verwenden, sollte der Alternativtext nicht das Bild beschreiben, sondern eine Information über das Linkziel vermitteln.
Damit erleichtern Sie nicht nur Menschen, die auf Screen Reader angewiesen sind, den Zugang zu Ihren Inhalten, sondern auch den Suchmaschinen. Aus demselben Grund setzen Sie für Grafiken, die keinen Inhalt vermitteln (Dekorations- oder Schmuckgrafiken) neben role="presentation" ein leeres alt-Attribut (alt=""). So ignorieren Screen Reader und Suchmaschinen die Grafik, da sie offenbar für das Verständnis der Seite nicht wichtig ist. Idealerweise werden Schmuckgrafiken nicht in das HTML eingebettet, sondern mittels CSS als Hintergrundbilder definiert (Trennung von Inhalt und Präsentation).
Grafische Browser sollten den Alternativtext auch dann anzeigen, wenn die Grafik aus irgendeinem Grund nicht zur Verfügung steht.
(optionale) Breiten- und Höhenangaben
Folgende Angaben sind optional:
widthheightgeben die Bildbreite bzw. -höhe an.
Wenn Sie als Maßeinheit Pixel angeben wollen, notieren Sie die Maße ohne Einheitenangabe. Während bei HTML4 noch Prozentangaben zulässig waren, ist diese Einheit im HTML5-Standard als Breiten- bzw. Höhenangabe für Bilder gestrichen worden: Es sind nur noch Angaben in Pixeln (das heißt ohne Einheit) erlaubt.
<figure>
<img src="Hund.gif" alt="Hund mit Halsband und gefletschten Zähnen.">
<figcaption>Das Bild enthält die Quellenangabe src="..." und einen alt-Text.</figcaption>
</figure>
<figure>
<img src="Hund.gif" width="104" height="90" alt="Hund">
<figcaption>Das Bild enthält neben den Pflichtangaben noch feste Breiten und Höhen,
so dass es auf 50% seiner Größe skaliert wird.
</figcaption>
</figure>
Ebenso bleibt ggf. das Layout bei fehlenden Bildern erhalten.
responsives Design (RWD)
img {
width: 100%;
height: auto;
}
<img src="ubongo.svg" alt="ubongo">
100% an die Breite des Elternelements an. Die Höhe wird durch den Wert auto entsprechend dem Seitenverhältnis der Grafik angepasst.mehrere Bildquellen mit srcset
Über media queries können Sie Formate für unterschiedliche Bildschirmgrößen definieren. Mit dem Attribut srcset können Sie Bilder in verschiedenen Größen referenzieren, die dann entsprechend geladen werden.
Details: caniuse.com
In diesem Beispiel werden im srcset mehrere URL angeboten. Browser ohne srcset-Support zeigen das mit src referenzierte Bild an, für Retina-Displays werden alternative hochauflösende Bilder zur Verfügung gestellt.
x), aber noch nicht die volle Responsivität mittels der Angaben mit w. (Vergleichen Sie: picture-Element: mehrere Bildquellen mit srcset.)
Quellen
- ↑ Jan Hellbusch: Alternative Texte - Die nicht triviale Kunst der Bildbeschreibungen auf den Grund gehen
Weblinks
- TU Chemnitz: Leitfaden für Alternativtexte von Grafiken
siehe auch:
- Grafik
- Referenz: img
- das neue picture-Element
- hochauflösende Bilder responsiv darstellen
- HTML/Tutorials/Webseiten mit Grafiken gestalten
/).