Bilder und Abbildungen

Bilder werden – anders als in vielen Textverarbeitungsprogrammen wie z.B. MS Word – nicht in ein HTML-Dokument integriert, sondern lediglich referenziert. Soll also ein Bild in einem HTML-Dokument angezeigt werden, werden zwei separate Dateien benötigt: die HTML_Datei selbst und eine Bilddatei (meist mit der Endung .jpg, .png oder .gif)

Für die Referenzierung von Bildern steht das Element <img> (image) zur Verfügung. Es handelt sich um ein leeres Element, d.h., das Element <img> hat keinen Inhalt, also weder Text noch weitere HTML-Elemente.

Die wichtigsten Informationen über das referenzierte Bild stehen in den Attributen des Elements <img>:

src:

erforderliche Angabe der Adresse (URL), unter der das Bild zu finden ist. Die Adressierung entspricht den Regeln für die Zielangabe für Links:

• Externe Adressierung (die Bilddatei liegt auf einem - fremden - Server): Angabe des Protokolls, der Serveradresse und des relativen Pfades zur Bilddatei, z.B. src="http://www.doersam.de/muffins.jpg".
• Lokale Adressierung (die Bilddatei liegt auf demselben Server wie die HTML-Datei): Angabe des relativen Pfades von der HTML-Datei zur Bilddatei, z.B. src="muffins.jpg".

alt:

erforderlicher Text, der angezeigt wird, wenn das referenzierte Bild auf dem Server nicht gefunden wird:

• Der Inhalt des alt-Attributs wird auch von Lesesoftware für sehbehinderte Benutzer vorgelesen, um die Inhalte des Bildes vorzustellen. Deswegen ist es besonders wichtig, hier einen sinnvollen Text zu hinterlegen, der die Bildinhalte beschreibt
• Nicht alle Browser berücksichtigen allerdings den alternativen Text:
  • Firefox und Internet Explorer zeigen den alternativen Text an.
  • Chrome und Safari zeigen den alternativen Text nicht an.

title:

optionaler Text, der angezeigt wird, wenn der Benutzer mit der Maus über das Bild fährt.

Weitere optionale Attribute von <img> sind width und height. Beide werden mit einer konkreten Pixelzahl benutzt: <img src= "muffins.jpg" width="200" height="50">

Für die Benutzung der beiden Attribute gilt:

• Werden Werte sowohl für die Breite (width) als auch für die Höhe (height) des Bildes gesetzt, so wird es mit exakt diesen Ausmassen dargestellt. Die Originalausmasse des Bildes werden nicht berücksichtigt, es wird ggf. verzerrt dargestellt.
• Wird nur die Breite (width) des Bildes gesetzt, so wird diese bei der Darstellung berücksichtigt. Die Höhe des Bildes wird vom Browser so berechnet, dass das Seitenverhältnis der Bilddatei erhalten bleibt.
• Wird nur die Höhe (height) des Bildes gesetzt, so wird diese bei der Darstellung berücksichtigt. Die Breite des Bildes wird vom Browser so berechnet, dass das Seitenverhältnis der Bilddatei erhalten bleibt.

• Die Benutzung der Attribute width und height mit festen Pixelwerten beschleunigt den Aufbau einer Seite im Browser, da dadurch der Platzbedarf fürs Bild von vornherein bekannt ist.
• Allerdings sind feste Bildgrößen ungeeignet, wenn eine Seite auf unterschiedlichen Ausgabegeräten (PC, Tablet, Smartphone) dargestellt werden soll.
• Die Breiten- und Höhenangaben sollten niemals größer sein als die Originalgröße des Bildes (keine Vergrößerung).
• Um die Ladezeiten der Bilder zu reduzieren, ist es oft besser, die Bilder selbst in einem Bildbearbeitungsprogramm zu verkleinern und dann auf einer HTML-Seite in Originalgröße einzubinden.

Bilder können auch – wie aus technischen und wissenschaftlichen Dokumenten bekannt – als Abbildungen behandelt werden.

Eine Abbildung (engl. figure) zeichnet sich dadurch aus, dass sie eine Bildbeschriftung als Unter- oder Überschrift (engl. figure caption) hat und teilweise auch anders formatiert wird als der restliche Text.

Dafür gibt es in HTML zusätzlich die Elemente <figure> und <figcaption>. Das figure-Element muss dabei ein img- und ein figcaption-Element enthalten. Die Reihenfolge dieser Elemente ist nicht vorgegeben, d.h., die Bildbeschriftung kann als Überschrift (Position oberhalb des Bildes) oder Unterschrift (Position unterhalb des Bildes) betrachtet werden.

Im unteren Beispiel ist der Unterschied zwischen Bildern und Abbildungen dargestellt.

Ein Bild (img-Element) hat keinen Inhalt und referenziert die Bilddatei.

Eine Abbildung (figure-Element) hat als Inhalt ein Bild und eine Über- bzw. Unterschrift.