Man kann mit dem img-Element Bilddateien in ein HTML-Dokument einbetten. Der Browser zeigt das Bild dann an. Man sollte bei den Bilddateien auf die Dateigrösse achten. Eine grosse Bilddatei benötigt eine längere Ladezeit und belastet das Datenvolumen bei einem Abruf der Webseite über das Mobilnetz.

Beispiel

Links ist der Code zu sehen, rechts das passende Rendering.

Das img-Element (Abkürzung für image) wird für die Anzeige von Bildern eingesetzt. Das Element benötigt zwei Attribute: src und alt. Mit dem src wird die Bilddatei referenziert. Dies ist notwendig, damit der Browser weiss, welches Bild angezeigt werden soll. Das alt definiert einen Text, der angezeigt wird, falls die Bilddatei nicht vorhanden ist. Die Bilddatei muss, wie das HTML-Dokument für den Browser verfügbar sein. Dies bedeutet, man muss die Bilddateien ebenfalls uploaden. Man kann auch ein Bild über einen Link einbinden. Dies wird auch Hotlink genannt. Das img-Element unterstützt folgende Bildformate:

• GIF
• JPEG
• PNG
• SVG
• AVIF
• WEbP

Das Beispiel zeigt, wie man ein Bild aus dem Ordner images referenziert. Das zweite Element verwendet als Quelle einen Link zu einer (externen) Webseite (Hotlink).

• Das img-Element hat keinen Closing-Tag!
• Häufiger Tippfehler: src (steht für source) nicht scr!