Bild
Bilder einfügen mit img

Mit <img> baust Du JPG-, PNG- oder z.B. GIF-Bilder in ein HTML-Dokument ein. <img> ist ein sogenanntes Standalone-Tag ohne Elementinhalt und ohne End-Tag.

Damit der Browser ein Bild in eine Webseite einbaut, musst Du dem Browser mitteilen, unter welcher Adresse er das Bild findet. Das geschieht mit dem Attribut src, für Source also Quelle.

Dabei musst Du darauf achten, wie Du das Bild verlinkst: relativ oder absolut. Hier vier Beispiele…

Relativ verlinkte Bilder

Das folgende Bild ist relativ verlinkt. Das bedeutet, dass der Browser sich an der URL des HTML-Dokumentes orientiert. Im folgenden Fall muss das Bild im gleichen Verzeichnis liegen, wie das HTML-Dokument.

<img src="vogel.jpg">

Im folgenden Beispiel sucht der Browser das Bild ausgehend vom Verzeichnis des HTML-Dokumentes im Unterverzeichnis images.

<img src="images/hund.jpg">

Im nächsten Beispiel sucht der Browser das Bild ausgehend vom Verzeichnis des HTML-Dokumentes im übergeordneten Verzeichnis images.

<img src="../katze.jpg">

Absolut verlinktes Bild

Und zum Schluss ein Beispiel, bei welchem das Bild absolut verlinkt ist.

<img src="https://phlow.de/bilder/katze.jpg">

Alternativer Text für Bilder

<img src="vogel.jpg" alt="Wunderschöner Papageientaucher">

Höhe und Breite festlegen mit width und height

<img src="vogel.jpg" alt="Wunderschöner Papageientaucher" widht="160" height="90">