HTML-Kurs / Bilder mit img einfügen: Alternativtext und Abmessungen

Um ein Bild in ein HTML-Dokument einzufügen, setzen Sie seine Datei-URL in das Attribut src des Elements img und beschreiben Sie seinen relevanten Inhalt in alt. Legen Sie width und height auf die tatsächlichen Pixelabmessungen des Bildes fest, damit der Browser Platz reservieren kann, bevor die Datei geladen wird.

Ein Bild mit img einfügen

Das Element img enthält ein Bild und hat keinen schließenden Tag. Verwenden Sie das Beispielbild , das einen See und einen Baum darstellt, um den folgenden Code auszuprobieren. Lösen Sie die Dateiadresse unter Verwendung der Beispiele für relative Pfade in Links: Pfade, Seitenfragmente und E-Mail.

<img src="html-image-sample-lake-tree-1600-v1.webp"
     alt="Ein Baum auf einer kleinen Insel in einem See, mit Bergen im Hintergrund"
     width="1600" height="900">

1. Laden Sie das Beispielsbild herunter und speichern Sie es neben der HTML-Datei, die Sie bearbeiten, zum Beispiel index.html.
2. Fügen Sie den obigen Code in den body-Bereich der HTML-Datei ein und speichern Sie die Datei.
3. Öffnen oder aktualisieren Sie die HTML-Datei in einem Browser. Sie sollten das unten angezeigte Foto des Sees sehen.

src identifiziert die Datei in Bezug auf den Speicherort der HTML-Datei. Der obige Code sucht das Bild im selben Ordner. Wenn Sie es in einem Unterordner images gespeichert haben, ändern Sie das Attribut in src="images/html-image-sample-lake-tree-1600-v1.webp". Der Dateiname und die Erweiterung müssen ebenfalls mit der tatsächlichen Datei übereinstimmen.

Ein Klick auf das Bild hier öffnet die Originaldatei. Ein Bild mit einem Link zu umrahmen ist eine andere Funktion als das Einfügen mit img.

Was soll das alt-Attribut sagen?

alt ist ein alternativer Text. Er liefert den Lesern, die das Bild nicht sehen können oder deren Browser es nicht laden kann, die Information, die das Bild im Kontext vermittelt. Beschreiben Sie diese Rolle kurz, anstatt „Bild“ oder eine Liste von Suchbegriffen zu schreiben. Für eine für alle sichtbare Bildunterschrift vergleichen Sie die Erklärung in Bilder und Bildunterschriften zusammenfassen mit figure und figcaption.

<img src="html-image-sample-lake-tree-1600-v1.webp"
     alt="Ein Baum auf einer kleinen Insel in einem See, mit Bergen im Hintergrund"
     width="1600" height="900">

Wenn ein Bild rein dekorativ ist und eine nahe stehende Information wiederholt, kann ein leeres alt="" angemessen sein. Der leere Wert kennzeichnet es als nicht wesentlich; das Weglassen des Attributs alt vermittelt diese Absicht nicht. Wenn das Bild wesentliche Informationen übermittelt, erklären Sie diese im alternativen Text oder im angrenzenden Text. Der Entscheidungsbaum der W3C WAI zum alternativen Text hilft in zweifelhaften Fällen.

Was machen Breite und Höhe?

Die Beispieldatei hat 1600×900 Pixel. Ihre Werte width="1600" und height="900" helfen dem Browser, das Seitenverhältnis im Voraus zu berechnen. Diese Attribute verringern weder die Dateigröße in Bytes noch die Anzahl der Pixel. Testen Sie die Auswahl der Dateigröße getrennt von den Zuschneideänderungen in Responsive Bilder: srcset, sizes und picture.

Wenn das Bild breiter als der Inhaltsbereich ist, kann CSS seine angezeigte Breite begrenzen, während das Seitenverhältnis beibehalten wird.

img {
  max-width: 100%;
  height: auto;
}

In einer eigenständigen HTML-Datei fügen Sie dieses CSS in ein style-Element im head oder in ein verknüpftes Stylesheet ein. Die Bildabmessungen geben das Verhältnis der Datei an; CSS steuert die aktuelle angezeigte Größe.

Um eine kleinere Datei zu senden, benötigen Sie ein separat verkleinertes Bild. Das Tutorial zu responsiven Bildern erklärt, wie srcset und sizes es dem Browser ermöglichen, aus den Bilddateien auszuwählen.

Wenn das Bild nicht angezeigt wird

• Überprüfen Sie den genauen Dateinamen und die Erweiterung in src.
• Überprüfen Sie den Bildordner im Vergleich zur HTML-Datei.
• Öffnen Sie die URL des Bildes direkt in einem Browser, um zu sehen, ob die Datei verfügbar ist.
• Gehen Sie nicht davon aus, dass kleinere angezeigte Abmessungen eine kleinere heruntergeladene Datei bedeuten.

Der Verweis des img-Elements auf MDN beschreibt die verfügbaren Attribute und ihr Verhalten.