Bilder

Bilder sind ein zentraler Bestandteil moderner Websites und Apps. Sie machen Inhalte anschaulicher, helfen bei der Informationsvermittlung und tragen zur Gestaltung einer Seite bei. Plattformen wie Instagram oder Pinterest zeigen, wie sehr visuelle Inhalte die Aufmerksamkeit der Nutzer:innen beeinflussen.

Aber auch klassische Websites, Blogs oder Online-Shops nutzen Bilder, um Texte zu ergänzen, Produkte zu präsentieren oder Emotionen zu erzeugen.

Bilder einfügen

In HTML werden Bilder mit dem <img>-Element eingebunden:

<img src="bilder/mein-bild.jpg" alt="Beschreibung des Bildes" />
Beschreibung des Bildes

Wichtig

ist ein selbstschließendes Element, das keinen eigenen Inhalt hat und kein End-Tag benötigt.

Wichtige Attribute

  • src – Pfad zur Bilddatei (lokal oder auf dem Server).

  • alt – Alternativtext, der angezeigt wird, falls das Bild nicht geladen werden kann. Außerdem ist er wichtig für Barrierefreiheit (Screenreader) und SEO. Muss angegeben werden.

Bilder sind in HTML Inline-Elemente, das heißt: Sie fügen sich in den Textfluss ein und erzeugen keinen Zeilenumbruch. Wenn ein Bild einen eigenen Block darstellen soll, kann man es z.B. in ein <figure>-Element einbetten.

Größe von Bildern

width – Breite des Bildes in Pixeln:

<img src="bilder/mein-bild.jpg" alt="Ein Landschaftsbild" width="150" />
Ein Landschaftsbild

height – Höhe des Bildes in Pixeln:

<img src="bilder/mein-bild.jpg" alt="Ein Landschaftsbild" height="150" />
Ein Landschaftsbild

Wichtig

Es sollte nur eines der beiden Attribute (width oder height) verwendet werden, um das Seitenverhältnis des Bildes beizubehalten. Ansonsten kann das Bild verzerrt dargestellt werden.

figure

<figure> wird verwendet, um ein Bild mit zugehöriger Beschreibung zu gruppieren. Die Beschreibung wird in <figcaption> geschrieben:

<figure>
  <img
    src="bilder/mein-bild.jpg"
    alt="Ein Landschaftsbild"
    alt="Ein Landschaftsbild"
  />
  <figcaption>Iron Man in seinem demolierten Kampfanzug</figcaption>
</figure>
Ein Landschaftsbild
Ein Landschaftsbild

picture

Das <picture>-Element ermöglicht responsive Bilder – also Bilder, die sich automatisch an unterschiedliche Bildschirmgrößen oder Auflösungen anpassen. So wird immer die passende Bildgröße geladen, was Ladezeiten spart und die Darstellung auf Smartphones, Tablets und großen Monitoren optimiert.

Ein typisches Beispiel:

<picture>
  <source srcset="bild-klein.jpg" media="(max-width: 600px)" />
  <source srcset="bild-gross.jpg" media="(min-width: 601px)" />
  <img src="bild-standard.jpg" alt="Beispielbild" />
</picture>
Ein Landschaftsbild

<picture>

  • Container für mehrere Bildoptionen, die abhängig von Bildschirmgröße oder Auflösung ausgewählt werden.

  • Jede -Zeile gibt an, welches Bild unter welchen Bedingungen verwendet werden soll.

media

  • (max-width: 600px) → Wenn der Bildschirm 600 Pixel breit oder kleiner ist, wird diese Option verwendet.

  • (min-width: 601px) → Wenn der Bildschirm größer als 600 Pixel ist, wird diese Option verwendet.

srcset

  • Gibt das Bild an, das verwendet werden soll, wenn die Bedingung im media-Attribut erfüllt ist.

  • Im Beispiel:

    • Kleine Bildschirme: srcset=“bild-klein.jpg“

    • Große Bildschirme: srcset=“bild-gross.jpg“

<img>

  • Fallback-Bild für Browser, die nicht unterstützen.

  • Enthält außerdem das alt-Attribut für Barrierefreiheit.