Tag <img>

Tag <img>

Definition

Status: Aktueller Standard

Das Tag <img> steht für image (Bild).

Das <img>-Tag dient zum Einbetten von Grafiken. Es ist ein Empty Element (oder Self-Closing), was bedeutet, dass es keinen schließenden Tag hat. Zwei Attribute müssen beim <img>-Tag immer angegeben werden: src und alt. Die Attribute width und height sollte man angeben. Dann weiß der Browser wie viel Platz er bereithalten muss. Das vermeidet Layoutsprünge während dem Ladevorgang. Ob ein Bild dann vom Browser dargestellt wird hängt davon ab welche Formate dieser unterstützt. Gängige Formate (jpg, png. gif, webp, svg, aviv) werden von allen Browser erkannt und angezeigt.

Syntax

<img src="Zieldokument" alt="Kurzbeschreibung" [attribute]>

Attribute bzw. Unterelemente

Global

Globale Attribute

src

Pfad zum anzuzeigenden Bild

alt

Kurze Bildbeschreibung (falls Ladefehler bzw. Barrierefreiheit)

width

Breite (Browser kann den Platz reservieren)

height

Höhe (Browser kann den Platz reservieren)

loading

Lademodus (eager/lazy). lazy = "Erst laden wenn im sichtbaren Bereich"

srcset

Alternative Größen je Bildschirmgröße

sizes

Definiert Layout-Bedingungen (kombiniert mit "srcset")

decoding

Dekodierorder (auto/sync/async)

Beispiele

= Tag

= Attribut

= Wert

Text

= Kommentar bzw. wichtig!

Beispiel <img> - Bild einbinden, asynchron dekodieren, zuletzt laden

Der Code:

<img src="demoimg2.jpg" 
     alt="Farbenfrohes, abstraktes Desktop-Wallpaper" 
     width="450" 
     height="253" 
     loading="lazy"
     decoding="async">

Ergebnis:

Ergebnis: <img>-Demo 1
Bild einbinden, asynchron dekodieren, zuletzt laden

Beispiel <img> - Hier ist der Pfad absichtlich falsch. "alt" greift...

Der Code:

<img src="demoimg3.jpg" 
     alt="Farbenfrohes, abstraktes Desktop-Wallpaper" 
     width="450" 
     height="253" 
     loading="lazy"
     decoding="async">

Ergebnis:

Ergebnis: <img>-Demo 2
Hier ist der Pfad absichtlich falsch. "alt" greift...