Einfügen von Bildern

1.1 Das <img>-Element

Multimedia spielt eine wichtige Rolle in HTML, um die visuelle Wahrnehmung von Webseiten zu verbessern. Das Einfügen von Bildern ist einer der Schlüsselaspekte von Multimedia in HTML. Häufig wird dafür das Element <img> verwendet. Schauen wir es uns genauer an:

Das <img>-Element dient zum Einfügen von Bildern auf einer Webseite. Es ist ein leeres Element: Es hat keinen schließenden Tag und enthält nur Attribute.

Syntax

    <img src="Bild_URL" alt="Beschreibung" width="Breite" height="Höhe">
  

    
      <img src="images/photo.jpg" alt="Bildbeschreibung" width="500" height="300">
    
  

Schauen wir uns die Attribute des <img>-Elements etwas genauer an

1.2 Attribut src

Der vollständige Name des src-Attributs ist source (Quelle).

Das Attribut src gibt den Pfad zur Bilddatei an, die auf der Seite angezeigt werden soll. Dies kann ein absoluter oder relativer Pfad sein.

Beispiele:

Absolute URL:

    
      <img src="https://example.com/images/photo.jpg">
    
  

Relativer Pfad:

    
      <img src="images/photo.jpg">
    
  

Eine absolute URL enthält die vollständige Adresse zum Bild, einschließlich Protokoll (http oder https), Domain und Pfad. Ein relativer Pfad gibt den Speicherort der Datei relativ zum aktuellen Dokument an, was praktisch für die Arbeit mit lokalen Dateien ist.

1.3 Attribut alt

Vollständiger Name: alternative text (alternativer Text)

Das Attribut alt liefert eine textuelle Beschreibung des Bildes. Dieser Text wird angezeigt, wenn das Bild nicht geladen werden kann, und verbessert die Zugänglichkeit, da Screenreader ihn verwenden, um das Bild für sehbehinderte Benutzer zu beschreiben.

Beispiele:

    
      <img src="images/sunset.jpg" alt="Foto eines schönen Sonnenuntergangs">
    
  

Gut verfasster Alternativtext hilft Benutzern, den Inhalt des Bildes zu verstehen, wenn es nicht verfügbar ist, und trägt zur Verbesserung des SEO (Suchmaschinenoptimierung) der Seite bei.

1.4. Attribut width

Das Attribut width legt die Breite des Bildes in Pixeln fest. Wenn das Attribut height nicht angegeben ist, behält das Bild seine Proportionen bei, wenn die Breite geändert wird.

Beispiele:

    
      <img src="images/photo.jpg" width="500">
    
  

Die Verwendung einer festen Breite kann hilfreich sein, um die Bildgröße zu kontrollieren, aber es ist wichtig, die Responsivität des Designs zu berücksichtigen.

1.5 Attribut height

Das Attribut height legt die Höhe des Bildes in Pixeln fest. Wenn das Attribut width nicht angegeben ist, behält das Bild seine Proportionen bei, wenn die Höhe geändert wird.

Beispiele:

    
      <img src="images/photo.jpg" height="300">
    
  

Ähnlich wie beim Attribut width kann die Verwendung einer festen Höhe hilfreich sein, aber die Responsivität sollte berücksichtigt werden.

Beispiel für die gemeinsame Verwendung von Attributen

    <img data-max-width="800" data-id="e1aacecf-c8a8-43e8-85cb-02ee6fffd33e" src="https://cdn.codegym.cc/images/article/e1aacecf-c8a8-43e8-85cb-02ee6fffd33e/800.jpeg" alt="sunset">
  

    
      <img src="images/sunset.jpg" alt="Foto eines schönen Sonnenuntergangs" width="500" height="300">
    
  

In diesem Beispiel wird das Bild aus der Datei images/sunset.jpg geladen, mit einer Breite von 500 Pixeln und einer Höhe von 300 Pixeln angezeigt. Wenn das Bild nicht geladen werden kann, wird der Text "Foto eines schönen Sonnenuntergangs" angezeigt.