<img> Tag - Bild einfügen

Fügt ein Bild ein:

<img src="franz.jpg" alt="Wellensittich Fanz" height="250" width="350">

Online testen

Verwendung

Mit dem img Tag fügen Sie Bilder in Webseiten ein. Mit dem src Attribut geben Sie die Bilddatei an. Es kann sowohl eine relative, als auch eine absolute URL angegeben werden. Das alt Attribut gibt den alternativen Text an, dieser wird angezeigt, falls das Bild nicht geladen werden kann oder soll. Über die Angaben height und width wird die Größe festgelegt. Fehlen die Angaben, wird die Bildgröße herangezogen.

Bilder können verlinkt werden, indem man diese in ein a Tag einbettet.

Attribute

Attribut Wert Beschreibung
align top
bottom
middle
left
right
Gibt die Ausrichtung an (siehe). Wird in HTML 5 nicht mehr unterstützt.
alt text Der Alternative Text, wird angezeigt, wenn das Bild nicht geladen werden soll oder kann, wird ebenfalls angezeigt, wenn der Benutzer mit der Maus über dem Bild stehen bleibt. Wichtig z.B. für sehbehinderte Personen. Der Text sollte den Inhalt des Textes angeben.
border Pixel Breite des Rahmens um das Bild. Wird in HTML 5 nicht mehr unterstützt.
height Pixel Höhe des Bildes
hspace Pixel Abstand rechts und links vom Bild, z.B. von Text. Wird in HTML 5 nicht mehr unterstützt.
longdesc URL Angabe einer URL mit einer ausführlichen Beschreibung des Bildinhalts.
sizes Angabe der Größen für verschiedene Seitenlayouts
src URL URL zum Bild, welches dargestellt werden soll.
srcset URL

Alternative URLs zum Bild. Muss vom Browser unterstützt werden, z.B. mit Angabe für Bildschirmauflösungen, bzw. DPI-Zahl. Beispiel:

<img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x image-3x.png 3x, image-4x.png 4x">

 

usemap #mapname Angabe einer clientseitigen Sitemap.
vspace Pixel Abstand oben und unten zum Bild. Wird in HTML 5 nicht mehr unterstützt.
width Pixel Breite des Bildes.

Darstellung

Wellensittich Fanz