HTML Bilder

HTML Bilder (engl.: HTML Images): Bilder sind ein integraler Bestandteil des modernen Webdesigns. Sie verbessern die visuelle Attraktivität und bieten wichtige visuelle Informationen. In HTML werden Bilder mit dem <img>-Tag eingefügt. In diesem Artikel erfahren Sie alles, was Sie über die Verwendung von Bildern in HTML wissen müssen – von der grundlegenden Syntax über verschiedene Attribute bis hin zu Best Practices und häufig gestellten Fragen.

1. Das img-Tag

Das <img>-Tag ist das HTML-Element, das für die Einbettung von Bildern in Webseiten verwendet wird. Es ist ein leeres Tag, das keinen schließenden Tag benötigt und durch das src-Attribut auf das Bild verweist.

1.1 Grundlegende Syntax

<img src="bild.jpg" alt="Beschreibung des Bildes">

• src (source): Enthält den Pfad oder die URL des Bildes.
• alt (alternative text): Beschreibt den Inhalt des Bildes für den Fall, dass das Bild nicht geladen werden kann oder für Benutzer mit Sehbehinderungen.

Beispiel:

<img src="https://example.com/logo.png" alt="Firmenlogo">

2. Attribute des img-Tags

Neben src und alt gibt es mehrere wichtige Attribute, die Sie bei der Verwendung des <img>-Tags berücksichtigen sollten:

2.1. width und height

Mit den Attributen width und height können Sie die Größe eines Bildes direkt in HTML festlegen.

<img src="bild.jpg" alt="Beschreibung" width="300" height="200">

Hinweis: Diese Attribute setzen die Bildgröße fest. Es ist jedoch oft besser, CSS zu verwenden, um Bilder zu skalieren, da dies flexibler ist und sich besser an unterschiedliche Bildschirmgrößen anpasst.

2.2. title

Das title-Attribut fügt ein Tooltip hinzu, das angezeigt wird, wenn Benutzer mit der Maus über das Bild fahren.

<img src="bild.jpg" alt="Beschreibung" title="Dieses Bild zeigt unser Logo.">

2.3. loading

Das loading-Attribut steuert das Ladeverhalten von Bildern. Es gibt zwei Hauptoptionen:

• lazy: Das Bild wird erst geladen, wenn es im sichtbaren Bereich des Benutzers erscheint (Lazy Loading). Dies verbessert die Ladezeit der Seite.
• eager: Das Bild wird sofort geladen.

<img src="bild.jpg" alt="Beschreibung" loading="lazy">

3. Pfade und Bildquellen

3.1. Relative Pfade

Relative Pfade verweisen auf Bilder innerhalb derselben Webseite oder des Verzeichnisses.

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

3.2. Absolute Pfade

Absolute Pfade geben den vollständigen URL-Pfad des Bildes an.

<img src="https://example.com/images/logo.png" alt="Logo">

4. Bilder mit CSS stylen

Mit CSS können Sie Bilder ansprechend gestalten und sie in responsive Designs integrieren.

4.1. Bildgröße mit CSS festlegen

Anstatt die Größe direkt im HTML zu definieren, ist es oft besser, CSS für mehr Kontrolle zu verwenden.

img {
    width: 100%; /* Bild passt sich der Breite des Elternelements an */
    height: auto; /* Höhe wird proportional zur Breite skaliert */
}

4.2. Bilder zentrieren

Um ein Bild horizontal zu zentrieren, können Sie Flexbox oder das Textausrichtungsmodell verwenden.

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

5. Responsive Bilder

In responsiven Webdesigns müssen Bilder so gestaltet werden, dass sie sich an verschiedene Bildschirmgrößen anpassen. Dies erreichen Sie mit CSS oder durch die Verwendung von srcset.

5.1. Responsive Bilder mit srcset

Das srcset-Attribut ermöglicht es, verschiedene Bildgrößen für verschiedene Bildschirmgrößen oder Auflösungen bereitzustellen.

<img src="bild-klein.jpg" alt="Bild" 
     srcset="bild-klein.jpg 300w, bild-mittel.jpg 768w, bild-gross.jpg 1200w" 
     sizes="(max-width: 600px) 300px, (max-width: 1200px) 768px, 1200px">

Hier wird das am besten geeignete Bild basierend auf der Bildschirmgröße des Benutzers ausgewählt.

6. Alternative Texte und Barrierefreiheit

Der alt-Text ist entscheidend für die Barrierefreiheit. Screenreader lesen den alt-Text vor, wenn das Bild für sehbehinderte Benutzer nicht sichtbar ist. Achten Sie darauf, dass der alt-Text beschreibend und sinnvoll ist.

• Beispiel für einen guten alt-Text: "Bild des Eiffelturms bei Sonnenuntergang"
• Beispiel für einen schlechten alt-Text: "Bild123.jpg"

Häufig gestellte Fragen