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.

• 
• 
• 
• 
• 
• 

Beispiel: img-Elemente in HTML

<img src="selfhtml.png" alt="Selfhtml">

Beispiel: img-Elemente in xHTML

<img src="selfhtml.png" alt="Selfhtml" />

In XHTML benötigt das image-Tag den schließenden Schrägstrich (/).

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.

optionale Angaben

Folgende Attribute sind möglich:

• crossorigin:
  • anonymous:
  • use-credentials:
• height: Angabe einer optionalen Höhe
• ismap: Falls Bild Teil einer Server-seitige verweis-sensitive Grafik ist
• referrer:
• sizes: eine kommagetrennte Liste mit einem Medienmerkmal (media condition) und einer Größenangabe
  Beachten 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 Breite
• usemap: zeigt an, dass Bild Teil einer verweissensitiven Grafik ist

obsolete Angaben

Beachten Sie: Diese Angaben sollten nicht mehr verwendet werden.

• align ersetzt durch: CSS - Ausrichtung
• border ersetzt durch: CSS - Rahmen
• hspace ersetzt durch: CSS - Abstand
• longdesc war ein Link zu einer längeren Beschreibung als im alt-Text, kann durch figcaption ersetzt werden.
• vspace ersetzt durch: CSS - Abstand

Hinweis

Alle Angaben von 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

Beachten Sie: Die Nutzer von Screen Readern haben prinzipiell keine Möglichkeit, ein Bild oder eine Grafik zu betrachten. Ein Weg, etwas über den Inhalt der Grafik zu erfahren, ist der Alternativtext, der mithilfe des alt-Attributs jeder Grafik im HTML-Quellcode beigefügt werden sollte. Screen Reader können dann die Grafik zusammen mit dem Alternativtext ansagen. Fehlt das alt-Attribut, dann sagen einige Screen Reader Teile des Dateinamens an. Aus diesem Grund haben das alt-Attribut und Alternativtexte eine sehr wichtige Bedeutung.

Der Alternativtext muss nicht unbedingt eine ausführliche Beschreibung sein. Oft ist die Bedeutung in wenigen Worten hinreichend erklärt. 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.

Empfehlung: Verwenden Sie im Sinne der Barrierefreiheit für informative Grafiken eine kurze aussagekräftige Beschreibung des Bildes.

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, falls die Grafik aus irgendeinem Grund nicht zur Verfügung steht.

Beachten Sie:

• 
• 

Chrome und Safari zeigen den Alternativtext allerdings nicht an.

(optionale) Breiten- und Höhenangaben

Folgende Angaben sind optional:

• width
• height geben die Bildbreite bzw. -höhe an. Wenn Sie als Maßeinheit Pixel angeben wollen, notieren Sie die Maße ohne Einheitenangabe. Außerdem ist noch % als Prozentangabe zulässig.

Beispiel: <img>-Tag mit Pflicht-, bzw. Breiten- und Höhenangaben ansehen …

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

ansehen …

Empfehlung: Sie sollten stets die Breite und Höhe der Grafik im Quelltext mit angeben. Dadurch entnimmt der Web-Browser bereits der HTML-Datei, wie groß die Grafik ist, und muss nicht warten, bis er die entsprechende Header-Information der Grafikdatei ausgelesen hat. So kann er die gesamte Web-Seite bereits am Bildschirm aufbauen und bei noch nicht eingelesenen Grafiken erst mal eine entsprechend große Freifläche anzeigen. Sonst wartet der Browser dagegen mit der Anzeige der Web-Seite, bis er alle nötigen Größenangaben aus eingebundenen Grafikdateien eingelesen hat, oder er muss den Bildschirmaufbau korrigieren, was nicht sehr schön aussieht.
Ebenso bleibt ggf. das Layout bei fehlenden Bildern erhalten.

responsives Design (RWD)

Empfehlung: Mit prozentualen Breitenangaben für Bild und Elternelement können Sie das Seitenlayout automatisch an den Viewport anpassen.

Beispiel: responsive Bilder ansehen …

img {
  width: 100%; 
  height: auto;
}

<img src="ubongo.svg" alt="ubongo">

Die Breite passt sich durch den Wert 100% an die Breite des Elternelements an. Die Höhe wird durch den Wert auto entsprechend dem Seitenverhältnis der Grafik angepasst.

ansehen …

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

Beispiel: Einbinden von Bildateien mit srcset

<img src = "feuerwehr-320.jpg" srcset = "feuerwehr-640.jpg 2x, feuerwehr-960.jpg 3x, feuerwehr-1280.jpg 4x" >

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.

Beachten Sie: Im Safari 7.1 und 8 funktioniert nur die Syntax um Auflösungen umzuschalten (mittels x), aber noch nicht die volle Responsivität mittels der Angaben mit w. (Vergleichen Sie: picture-Element: mehrere Bildquellen mit srcset.)

Weblinks

• TU Chemnitz: Leitfaden für Alternativtexte von Grafiken

siehe auch:

• Grafik
• Referenz:HTML/img
• das neue picture-Element
• hochauflösende Bilder responsiv darstellen
• HTML/Tutorials/Webseiten mit Grafiken gestalten