Verwendung von Bildern in HTML

Bilder sind leistungsstarke visuelle Werkzeuge auf Websites. HTML ermöglicht es, sie mit einfacher Syntax einzufügen – doch es ist wichtig, die zugehörigen Attribute zu verstehen.

Das <img>-Tag verwenden

Um Bilder einzufügen, verwenden wir das <img>-Element. Es ist ein selbstschließender Tag, der mindestens die Attribute src und alt enthalten muss.

<img src="https://via.placeholder.com/150" alt="Example image">

Die Rolle des alt-Attributs

Das alt-Attribut (alternativer Text) beschreibt das Bild für den Fall, dass es nicht geladen wird oder wenn ein Screenreader verwendet wird. Gib immer eine sinnvolle und kurze Beschreibung an.

Lokale Bilder einbetten

Du kannst nicht nur externe, sondern auch lokal gespeicherte Bilder verwenden. Wenn du z. B. einen Ordner namens 'images' hast, kannst du darauf so zugreifen:

<img src="images/logo.png" alt="Company logo">

Breite und Höhe definieren

Die Attribute width und height steuern die Bildgröße. Du kannst Pixel oder Prozentangaben verwenden. Es ist wichtig, das Seitenverhältnis beizubehalten.

<img src="photo.jpg" alt="Photo" width="300" height="200">

title-Attribut

Das title-Attribut ist nützlich, um beim Überfahren des Bildes mit der Maus einen Tooltip anzuzeigen.

<img src="image.jpg" alt="Description" title="This is an image">

Bilder mit Stylesheets skalieren

Mit CSS kannst du Bilder ganz einfach skalieren. Um ein Bild an die Breite des übergeordneten Containers anzupassen, kannst du folgende Einstellung verwenden:

<img src="photo.jpg" alt="Resized image" style="width: 100%; height: auto;">

Bildformate (JPG, PNG, GIF, WebP)

Es gibt verschiedene Bildformate für unterschiedliche Zwecke. JPG ist gut für Fotos, PNG unterstützt Transparenz, GIF eignet sich für Animationen und WebP ist ein modernes, komprimiertes und schnelles Format.

Barrierefreiheit und Bilder

Stelle immer sicher, dass Bilder mehr als nur dekorativ sind – sie sollten auch zum Inhalt beitragen. Das alt-Attribut ist entscheidend für die Benutzererfahrung und Barrierefreiheit.