Das img-Tag

Das Tag img erzeugt ein Bild. Der Pfad zum Bild wird im Attribut src angegeben. Benötigt kein schließendes Tag.

Attribute

Attribut	Beschreibung
src	Legt den Pfad zum Bild fest. Erforderliches Attribut.
alt	Alternativer Text, der anstelle des Bildes angezeigt wird, wenn es nicht gefunden wurde (z.B. wenn der Pfad falsch angegeben ist). Erforderliches Attribut. Bei Fehlen bemängelt dies der Validator (ein Programm, das die Korrektheit von HTML oder CSS prüft).
width	Die Breite des Bildes in Pixeln (in diesem Fall werden keine Maßeinheiten angegeben) oder in Prozent vom übergeordneten Element des Bildes.
height	Die Höhe des Bildes in Pixeln (in diesem Fall werden keine Maßeinheiten angegeben) oder in Prozent vom übergeordneten Element des Bildes.

Besonderheiten

Wenn für ein Bild weder Breite noch Höhe angegeben sind - hat das Bild seine tatsächliche Größe. Wenn eine Höhe angegeben ist - erhält das Bild die angegebene Höhe, und die Breite passt sich so an, dass die Proportionen nicht verzerrt werden.

Wenn nur die Breite angegeben ist - passt sich analog die Höhe des Bildes so an, dass die Proportionen erhalten bleiben.

Wenn sowohl Breite als auch Höhe angegeben sind - können die Proportionen des Bildes verzerrt werden (oder auch nicht, je nachdem). Wenn die Breite oder Höhe (oder beide zusammen) größer als die tatsächliche sind - vergrößert sich das Bild, verliert aber an Qualität.

Es wird empfohlen, Breite und Höhe für Bilder in den Attributen anzugeben (und nicht über CSS) - in diesem Fall lädt der Browser die Bilder schneller - er muss nicht die Größe jedes Bildes nach dessen Erhalt berechnen.

Es wird nicht empfohlen, die tatsächlichen Abmessungen eines Bildes ohne Notwendigkeit zu verkleinern. Zum Beispiel, die tatsächliche Bildgröße beträgt 1000 mal 1000 Pixel, aber Sie weisen ihm eine Breite von 100px zu. In diesem Fall erscheint das Bild auf dem Bildschirm mit 100 Pixeln, hat aber die Größe von tausend Pixeln und lädt dementsprechend viel länger.

Beispiel

Fügen wir eine Bild zur Website hinzu und weisen die Attribute height und width nicht zu. Das Bild hat seine tatsächliche Größe:

:

Beispiel

Versuchen wir, dem Bild eine Breite mit dem Attribut width hinzuzufügen, die Höhe sollte sich dabei so anpassen, dass die Bildproportionen erhalten bleiben:

:

Beispiel

Und jetzt fügen wir dem Bild eine Höhe mit dem Attribut height hinzu, die Breite passt sich dabei so an, dass die Bildproportionen erhalten bleiben:

:

Beispiel

Weisen wir dem Bild gleichzeitig sowohl Höhe als auch Breite zu. Die Proportionen des Bildes sollten dabei verzerrt werden (nicht zwingend, aber in diesem Fall sind Höhe und Breite so gewählt, dass die Proportionen verzerrt werden):

:

Beispiel

Lassen Sie uns einen falschen Pfad zum Bild angeben (der Einfachheit halber lassen wir ihn leer). Anstelle des Bildes sehen wir den Inhalt des Attributs alt (es scheint normaler Text zu sein - aber versuchen Sie, ihn zu kopieren - es wird nicht funktionieren, er wird wie ein Bild gezogen):

:

Siehe auch