HTML-Tags: Grafiken einbinden

Mit dem <img>-Tag können unterschiedliche Grafikformate eingebunden werden. Bilder sollten zuvor für das Web optimiert werden (Dateigröße, Maße, Format).

Faustregeln: Fotos als .jpg, Grafiken mit Transparenz als .png, Animationen als .gif, skalierbare Vektorgrafiken als .svg.

<!-- <img> ist ein Standalone-Tag: kein schließendes </img> -->
<img
  src="img/blume.jpg"       <!-- Pflicht: Pfad zur Datei -->
  alt="eine Blume"         <!-- Pflicht: Alternativtext -->
  width="600"              <!-- optional: Breite in Px (nur Ganzzahl!) -->
  height="450"             <!-- optional: Höhe in Px  (nur Ganzzahl!) -->
  title="Hallo Mauszeiger" <!-- optional: Tooltip bei Hover -->
>

<!-- Bild mit Bildunterschrift -->
<figure>
  <img src="img/haus.jpg" alt="Ein Haus">
  <figcaption>Ein Haus mit eher sterilem Garten</figcaption>
</figure>

<!-- Responsive Bilder: Browser wählt passende Größe aus srcset -->
<img
  src="img/berge-600.jpg"
  srcset="img/berge-420.jpg 420w,
          img/berge-600.jpg 600w,
          img/berge-1024.jpg 1024w"
  sizes="(max-width: 720px) 100vw, 70vw"
  loading="lazy"           <!-- erst laden wenn sichtbar -->
  alt="Bergpanorama"
>

Eine Bild- oder Grafikdatei einbinden

Das img Tag ist ein sog. Standalone-Tag, d.h. hier wird das öffnende Tag direkt wieder mit /> geschlossen, es gibt kein schließendes </img>.

Das Attribut src ist zwingend notwendig, um die Quelle der Datei anzugeben.
Mit dem Attribut alt kann Alternativ-Text hinterlegt werden, der angezeigt wird, solange die Grafikdatei noch nicht geladen ist (z.B. langsame Verbindung, deaktiviert weil Screenreader).

Die Attribute width und heigt geben die Darstellungsgröße an.
Wenn nicht angegeben, wird das Bild in Originalgröße angezeigt, falls die Größe nicht per CSS angepasst wird. Achtung: die Werte width und height dürfen nur Ganzzahlen sein, keine Einheit wie z.B. Pixel.

Ein .jpg Bild

eine Blume

Ein .png kann Transparenz enthalten

Wasser

Ein .gif kann auch animiert sein

eine Gitarre spielender Oktopus

Ein .svg wird in verschiedenen Größen ohne Qualitätsverlust dargestellt

Wasser-Molekül als SVG Wasser-Molekül als SVG Wasser-Molekül als SVG

Bild mit Bildunterschrift

Ein Bild mit Bildunterschrift sollte in HTML5 korrekt unter Verwendung von figure und figcaption eingebunden werden.

Ein Haus mit eher sterilem Garten und angeschalteten Lichtern

Bilder responsive: verschiedene Bild-Varianten für unterschiedliche Ausgabegrößen

Man kann für ein und dasselbe Bild zusätzlich zum src-Attribut desweiteren das Attribut srcset verwenden, um alternative Bildgrößen aufzulisten. Aus diesen wählt der Browser des jeweiligen Endgeräts dann anhand des in diesem Zusammenhang ebenfalls verwendeten Attributs sizes das passende aus, z.B. nach Größe und Ausrichtung.

Weiterhin kann man über das Attribut loading mit dem Wert lazy festlegen, dass ein Bild erst bei Bedarf geladen wird, z.B. wenn es erst durch scrollen auf der Seite sichtbar wird. Der Default für loading ist, ein Bild sofort zu laden, Attribut-Wert eager – dieser muss jedoch nicht explizit angegeben werden.

Mehr Info über dieses komplexe Thema bekommt ihr z.B. hier.
Und gut zu wissen: Moderne CMS wie z.B. WordPress erstellen euch das heute schon automatisch, d.h. ihr müsst dort einfach nur ein Bild hochladen.