HTML Grundlagen
Bilder einfügen mit img

Mit dem HTML-Tag <img> baust Du eine Bilddatei in ein HTML-Dokument ein – z.B. JPG-, GIF-, SVG- oder PNG-Bilder.

<img> ist ein sogenanntes Standalone-Tag ohne Elementinhalt und ohne End-Tag. Du musst es also nicht schließen. Das <img>-Tag benötigt zwei Pflichtangaben: die beiden Attribute src und alt.

Dabei steht src für source, also Quelle. Zwischen die Anführungsstriche gehört der Pfad zur Bilddatei. Liegt die Bilddatei z.B. im gleichen Verzeichnis wie die HTML-Datei, dann genügt src="bild.jpg", um die JPG-Datei katze.jpg in das HTML-Dokument einzubauen.

Auch wenn <img> ohne das Attribut alt funktioniert, solltest Du als Webdesigner es immer mit angeben. alt steht für alternativ und Du kannst eine alternative Textbeschreibung für das Bild eingeben. Das hat gleich drei Vorteile:

1. Wenn das Bild nicht gefunden wird, zeigt der Browser einen alternativen Text an.
2. Suchmaschinen können Bilder noch nicht verstehen und analysieren den alternativen Text. Dort pflegst Du wichtige Suchwörter für die Suchmaschinenoptimierung ein.
3. Spezialisierte Browser bzw. Reader lesen Blinden und Sehbehinderten die alternativen Texte vor.

Ist das Bild nicht wichtig, dann kannst Du das Attribut auch leer lassen: alt="".

<img src="katze.jpg" alt="Schwarze Katze auf Dach">

Angaben für Breite und Höhe

Der Browser weiß erst wie groß ein Bild ist, wenn er es bereits geladen hat. Damit der Inhalt einer Webseite nicht unnötig beim Ladevorgang hin- und herrutscht, hilfst Du dem Browser mit width und height auf die Sprünge.

Während Du mit width die Breite des Bildes in Pixeln angibst, bestimmst Du mit height die Höhe in Pixeln. Der Browser plant dann für das Bild Deinen Vorgaben entsprechend ein Rechteck ein, in welches das Bild gesetzt wird.

<img src="katze.jpg" widht="160" height="90" alt="Schwarze Katze auf Dach">

Attribute für den HTML-Bild-Befehl img

Es gibt die folgenden Attribute: