HTML Grundlagen: Bilder Einfügen Mit Img - Phlow

Mit dem HTML-Tag <img> baust Du eine Bilddatei in ein HTML-Dokument ein – z.B. JPG-, GIF-, SVG- oder PNG-Bilder.

Inhaltsverzeichnis

• Der HTML-Befehl img
• Die Bilddatei richtig verlinken
  • Relativ verlinkte Bilder
  • Absolut verlinktes Bild
• Gib immer das alt-Attribut bei Bildern mit an
• Angaben für Breite und Höhe
• Attribute für den HTML-Bild-Befehl img

Der HTML-Befehl img

Um in HTML-Webseiten Bilder wie z.B. JPG-, PNG- oder z.B. SVG-Bilder einzubauen, benutzt Du das <img>-Tag.

Das <img>-Tag ist ein sogenanntes Standalone-Tag und benötigt im Gegensatz zu z.B. Tags wie <h1> oder <p> kein End-Tag. In seiner einfachsten Form sieht es so aus:

<img src="bild.jpg">

Das <img>-Tag benötigt zwei Pflichtangaben: die beiden Attribute src und alt.

Das src-Attribut gibt die Quelle an, also die Adresse der Bilddatei. Damit der Browser das Bild findet und einbauen kann, muss src eine gültige URL oder ein Pfad sein.

Mehr Informationen zu den verschiedenen Arten von Bilddateien findest Du in unserem Bilder-Special » Bilder – Dateiformate für das Webdesign«.

Die Bilddatei richtig verlinken

Zwischen die Anführungszeichen des src-Attributs gehört der Pfad zur Bilddatei. Liegt die Bilddatei z.B. im gleichen Verzeichnis wie die HTML-Datei, dann genügt src="katze.jpg", um die JPG-Datei katze.jpg in das HTML-Dokument einzubauen. Hier gibt es zwei Möglichkeiten, die Bilddatei zu verlinken: relativ oder absolut.

Relativ verlinkte Bilder

Ein relativ verlinktes Bild bedeutet, dass der Browser die URL des HTML-Dokuments als Ausgangspunkt nutzt. Im folgenden Beispiel muss das Bild im gleichen Verzeichnis liegen wie die HTML-Datei:

<img src="vogel.jpg">

Im folgenden Beispiel sucht der Browser das Bild ausgehend vom Verzeichnis des HTML-Dokumentes im Unterverzeichnis images.

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

Im letzten Beispiel sucht der Browser das Bild im übergeordneten Verzeichnis, indem Du zwei Punkte voranstellst:

<img src="../katze.jpg">

Absolut verlinktes Bild

Ein absolut verlinktes Bild hat immer eine vollständige URL. Der Browser lädt das Bild von dieser Adresse, egal wo sich das HTML-Dokument befindet:

<img src="https://phlow.de/bilder/katze.jpg">

Gib immer das alt-Attribut bei Bildern mit an

Auch wenn <img> ohne das Attribut alt funktioniert, solltest Du als Webdesigner es immer mit angeben. alt steht für »alternativer Text« und ist wichtig für die Barrierefreiheit und Suchmaschinenoptimierung:

1. Wenn das Bild nicht gefunden wird, zeigt der Browser einen alternativen Text an.
2. Suchmaschinen lesen den alt-Text, um den Bildinhalt zu verstehen. Hier kannst Du Schlüsselwörter für die Suchmaschinenoptimierung einfügen.
3. Blinde und sehbehinderte Menschen nutzen Reader, die den alt-Text vorlesen.

Gib einen informativen alt-Text an, z.B. <img src="katze.jpg" alt="Schwarze Katze auf Dach">. Wenn das Bild rein dekorativ ist, lasse alt leer (alt=""), damit der Screenreader es ignoriert.

<img src="katze.jpg" alt="Schwarze Katze auf Dach">

Angaben für Breite und Höhe

Der Browser weiß erst, wie groß ein Bild ist, wenn es geladen ist. Um das Layout beim Laden stabil zu halten, kannst Du width und height für Breite und Höhe angeben:

<img src="katze.jpg" widht="160" height="90" alt="Schwarze Katze auf Dach">

Diese Angaben sind optional und können durch CSS ersetzt werden. HTML-Größenangaben werden in Pixeln gesetzt und reservieren Platz für das Bild im Layout.

Attribute für den HTML-Bild-Befehl img

Es gibt die folgenden Attribute:

Attribute	Erklärung
src	Pfad oder URL der Bilddatei (Pflicht)
alt	Alternativer Text, Beschreibung für Barrierefreiheit und SEO (Pflicht)
width	Breite des Bildes (optional)
height	Höhe des Bildes (optional)
title	Tooltip-Text, erscheint beim Hover (optional)

Übung: Erstelle eine info.html-Webseite und füge ein Bild von Dir ein. Wenn Du noch Zeit hast, schreib eine Kurzbeschreibung über Dich. Gestalte den Text mit Überschriften und Absätzen.

‹ Der Link: Texte und … Überschriften mit … ›