Bilder in HTML-Dokumente einbinden

Mit dem <img> Tag lassen sich Bilder und Fotos und Grafiken in HTML-Dokumente einbinden. In HTML5 gibt es außerdem das <figure> Element, das einen gesonderten Container für Bilder und andere mediale Inhalte darstellt, der mit Hilfe von CSS beliebig formatiert werden kann.

Der <figure> Container

Das <figure> Element ist ein Semantik-Element in HTML5 und dient dazu, zusätzliche Informationen über den Hauptinhalt in einem gesonderten, unabhängigen Bereich (Container) darzustellen. Üblicherweise handelt es sich dabei um bildhafte Zusatzinformationen. Es können aber auch andere mediale Inhalte oder beispielsweise Programmcode dargestellt werden. Mit Hilfe von CSS kann der Inhalt des <figure> Containers und dessen Lage im Hauptdokument formatiert werden.

Sinnvoll ist innerhalb eines <figure> Containers die Definition eines Untertitels zur Beschreibung des Inhalts. Dies wird durch das <figcaption> Element gemacht, das in den <figure> Container geschachtelt wird.

<figure>
  <img src="bild.png" >
  <figcaption>
    Beschreibung
  </figcaption>
</figure>

Einige Aspekte sind beim Einfügen von Bildern unbedingt zu berücksichtigen:

• Dateiformat: Nur *.gif, *.png und *.jpg Dateien werden von allen Browsern akzeptiert. Die meisten Browser stellen auch *.svg Dateien korrekt dar.
• Bild-Größe: Im Sinne von schnellen Ladezeiten sollten die Bilder möglichst klein gehalten werden. Dabei muss natürlich ein Kompromiss zwischen Dateigröße und Darstellungsqualität eingegangen werden. Häufig bringt auch die Anpassung des Dateiformats an das jeweilige Bild große Unterschiede bezüglich der Ladezeiten.
• Urheberrechte: Die Urheberrechte des Erstellers des Bildes aber auch von abgebildeten Objekten oder Personen müssen in jedem Fall berücksichtigt werden!
  Zuwiderhandlungen können sehr teuer werden!!!