HTML <img>-Tag

Der <img>-Tag wird verwendet, um ein Bild in ein HTML-Dokument einzufügen. Das Bild selbst wird nicht direkt in das Dokument eingefügt; der Browser lädt ein HTML-Bild aus der im <img>-Tag angegebenen Quelle.

Für ein <img>-Element gibt es zwei erforderliche Attribute: src, das die Bildquelle angibt, und alt, das einen alternativen Text für das Bild definiert.

Um HTML-Bilder anklickbar zu machen, sollte der <img>-Tag innerhalb des <a>-Tags platziert werden, das zum Einfügen eines HTML-Bild-Links verwendet wird.

Syntax

Der <img>-Tag ist leer, was bedeutet, dass kein schließendes Tag erforderlich ist. Er enthält nur Attribute. In XHTML muss der <img>-Tag jedoch selbst geschlossen werden (<img />).

Beispiel des HTML `<img>`-Tags:

Ein Beispiel zur Verwendung eines HTML <img>-Tags

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Heading </h1>
    <p>This is Aleq's photo</p>
    <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
  </body>
</html>

Probier es selbst »

Mit CSS lässt sich das ursprüngliche Erscheinungsbild eines Bildes verändern.

Beispiel des `<img>`-Tags mit CSS-Styling:

Wie wird ein HTML <img>-Tag mit den CSS-Eigenschaften vertical-align und padding gestaltet?

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
      border-radius: 50%;
      border: 4px dashed #077cb9;
      width: 300px;
      display: block;
      margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <div>
     <img src="/uploads/media/default/0001/03/e91b0d7a957cadd0c3282d34e423ff0f97799a1d.jpeg" alt="Ararat mountain" width="256" height="256" />
    </div>
  </body>
</html>

Probier es selbst »

Die Attribute src und alt

Das src-Attribut (Quelle) gibt die Bildquelle an. Es ist erforderlich, da es den Pfad zum Bild definiert. Der Wert des src-Attributs kann entweder der Dateiname oder dessen URL sein.

Das alt-Attribut definiert einen alternativen Namen für das Bild. Es ist ebenfalls für den <img>-Tag erforderlich. Sein Wert ist ein beschreibender Text, der im Browser angezeigt wird, bevor das Bild geladen ist oder wenn das Laden fehlschlägt.

Dekorative vs. bedeutungsvolle Bilder

Ob alt Text enthalten soll, hängt vom Zweck des Bildes ab:

Bedeutungsvolle Bilder (ein Produktfoto, ein Diagramm, ein Logo, das Informationen vermittelt) benötigen ein kurzes, beschreibendes alt, das dieselben Informationen wie das Bild kommuniziert. Beschreiben Sie was zu sehen ist, nicht „Bild von".
Dekorative Bilder (Rahmen, Abstandshalter, dekorative Hintergrundelemente, die nichts zum Inhalt beitragen) müssen ein leeres alt="" verwenden. Dies teilt Screenreadern mit, das Bild zu überspringen. Das alt-Attribut darf nicht vollständig weggelassen werden — ein fehlendes alt veranlasst einige Screenreader, stattdessen den Dateinamen vorzulesen.

<!-- Meaningful: describe the content -->
<img src="ararat.jpg" alt="Snow-capped Mount Ararat at sunrise" />

<!-- Decorative: empty alt so assistive tech skips it -->
<img src="divider.png" alt="" />

Tipp

Fügen Sie bei bedeutungsvollen Bildern relevante Schlüsselwörter in den Alternativtext ein, wo sie natürlich passen. Präziser alt-Text verbessert sowohl die Barrierefreiheit als auch das Ranking des Bildes in Suchmaschinen.

Verwendung von "data:image/[type];base64,[base64-string]" für das src-Attribut

Das Format data:image/[type];base64,[base64-string] kann als Wert des src-Attributs eines img-Tags verwendet werden, um ein Bild direkt aus dem HTML-Code anzuzeigen, ohne es aus einer externen Datei laden zu müssen.

Hier ist ein Beispiel, wie dieses Format verwendet wird, um ein Bild in einem img-Tag anzuzeigen:

Verwendung von "data:image/[type];base64,[base64-string]" für das src-Attribut

<img
  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
  alt="Tiny base64-encoded sample image"
  width="5"
  height="5">

In diesem Beispiel gibt image/png den MIME-Typ des Bildes an, und der lange String nach base64, sind die tatsächlichen Bilddaten, die als base64 kodiert sind. Der obige String ist ein vollständiges (wenn auch winziges) 5×5-PNG.

Zu beachten ist, dass die Verwendung von base64-kodierten Bildern die Größe der HTML-Datei erhöhen und das Laden der Seite verlangsamen kann. Generell wird empfohlen, dieses Format für kleine Bilder oder Icons zu verwenden und externe Dateien für größere Bilder zu nutzen.

Beispiel des HTML `<img>`-Tags mit den Attributen src und alt:

Ein Beispiel des img-Tags mit den Attributen src und alt

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <img src="/uploads/media/default/0001/03/01cc5ccf0ce755075e468cc651f27c354e1b032e.jpeg" alt="Paris" width="256" height="256" />
  </body>
</html>

Probier es selbst »

Warum width und height setzen

Setzen Sie stets die Attribute width und height (in Pixeln, ohne Einheiten), die der tatsächlichen Größe des Bildes entsprechen. Dadurch kann der Browser das Seitenverhältnis des Bildes berechnen und den richtigen Platz reservieren, bevor die Datei vollständig heruntergeladen ist. Ohne diese Attribute rendert die Seite zunächst ohne Platz für das Bild und springt dann, wenn das Bild eintrifft — eine schlechte Nutzererfahrung, die den Cumulative Layout Shift (CLS), einen der Core Web Vitals von Google, verschlechtert.

<!-- Browser reserves a 4:3 box immediately, so no layout shift -->
<img src="photo.jpg" alt="Mountain view" width="800" height="600">

Das Bild lässt sich weiterhin mit CSS skalieren. Ein gängiges, sicheres Muster ist, die Attribute width und height für das Seitenverhältnis zu setzen und dann CSS für eine flexible Anpassung zu verwenden:

img {
  height: auto;   /* preserve aspect ratio */
  max-width: 100%; /* never overflow its container */
}

Die Attribute loading und decoding

Das loading-Attribut verzögert das Laden von Bildern (und iframes), bis die Ressource kurz davor ist, angezeigt zu werden. Es ist ein Standardmerkmal, das von allen modernen Browsern unterstützt wird.

Unterstützte Werte für das loading-Attribut:

lazy — verzögert das Laden, bis das Bild einen Schwellenwertabstand zum viewport erreicht. Verwenden Sie es für nicht sichtbare / unterhalb des sichtbaren Bereichs befindliche Bilder.
eager (der Standard) — lädt die Ressource sofort.

<img src="defer.png" loading="lazy" alt="Gallery thumbnail" width="500" height="400">

Warnung

Verwenden Sie kein Lazy Loading für Ihr wichtigstes Bild oberhalb des sichtbaren Bereichs (oft das Largest Contentful Paint- oder LCP-Element). Lazy Loading verzögert dessen Anfrage und lässt die Seite langsamer wirken. Verwenden Sie für dieses Bild loading="eager" oder lassen Sie das Attribut einfach weg.

Das verwandte decoding-Attribut gibt dem Browser einen Hinweis, wie das Bild dekodiert werden soll. decoding="async" ermöglicht dem Browser, das Bild außerhalb des Haupt-Threads zu dekodieren, sodass das Rendern des umgebenden Inhalts nicht blockiert wird:

<img src="photo.jpg" alt="Landscape" width="800" height="600"
     loading="lazy" decoding="async">

Lazy Loading verschiebt das Laden von Ressourcen, bis sie benötigt werden, anstatt alles im Voraus zu laden. Dies verbessert die Performance und reduziert unnötigen Datenverbrauch auf dem Gerät des Nutzers.

Responsive Bilder mit srcset und sizes

Ein einzelnes fixes Bild verschwendet entweder Bandbreite auf kleinen Bildschirmen oder wirkt auf großen verschwommen. Die Attribute srcset und sizes ermöglichen es dem Browser, die beste Datei für die Bildschirmgröße und Pixeldichte des Geräts auszuwählen, während Sie nur ein <img>-Element verwenden.

srcset listet Kandidaten-Bilddateien auf, jede mit einem Breitendeskriptor (die tatsächliche Breite des Bildes in Pixeln, z. B. 480w).
sizes teilt dem Browser mit, wie breit das Bild bei verschiedenen Breakpoints angezeigt wird, sodass er die Auswahl treffen kann, bevor das Layout berechnet wird.

<img
  src="photo-800.jpg"
  srcset="photo-480.jpg 480w,
          photo-800.jpg 800w,
          photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1000px) 50vw,
         800px"
  alt="Coastline at sunset"
  width="800" height="600">

Der Browser liest sizes, berechnet die benötigte Anzahl an CSS-Pixeln für das Bild, multipliziert mit dem Gerätepixelverhältnis und lädt die nächstpassende Datei aus srcset. Das einfache src bleibt als Fallback für Browser, die srcset nicht unterstützen.

Wenn Sie unterschiedliche Bildausschnitte für verschiedene Layouts (Art Direction) benötigen oder moderne Formate mit Fallback anbieten möchten (z. B. AVIF/WebP mit JPEG-Backup), verwenden Sie das Element <picture>.

Unterstützte Bildformate

Bilddateiformate sind standardisierte Methoden zur Organisation und Speicherung digitaler Bilder. Ein Bilddateiformat kann Daten in einem unkomprimierten Format, einem komprimierten Format (das verlustlos oder verlustbehaftet sein kann) oder einem Vektorformat speichern. (Wikipedia)

Jeder User Agent unterstützt unterschiedliche Bildformate. Hier ist die Liste gängiger Bildformate:

Abkürzung	Dateiformat	MIME-Typ	Dateiendung(en)	Browser-Kompatibilität
APNG	Animated Portable Network Graphics	image/apng	.apng	Chrome, Edge, Firefox, Opera, Safari
AVIF	AV1 Image File Format	image/avif	.avif	Chrome 85+, Firefox 93+, Safari 16+, Opera
GIF	Graphics Interchange Format	image/gif	.gif	Chrome, Edge, Firefox, Opera, Safari
ICO	Microsoft Icon	image/x-icon	.ico, .cur	Chrome, Edge, Firefox, Opera, Safari
JPEG	Joint Photographic Expert Group image	image/jpeg	.jpg, .jpeg, .jfif, .pjpeg, .pjp	Chrome, Edge, Firefox, Opera, Safari
PNG	Portable Network Graphics	image/png	.png	Chrome, Edge, Firefox, Opera, Safari
SVG	Scalable Vector Graphics	image/svg+xml	.svg	Chrome, Edge, Firefox, Opera, Safari
WebP	Web Picture format	image/webp	.webp	Chrome, Edge, Firefox, Opera, Safari 14+

JPEG und PNG werden universell unterstützt und bleiben die sichersten Standardformate. WebP und AVIF sind moderne Formate, die bei ähnlicher Qualität deutlich kleinere Dateien erzeugen — AVIF komprimiert in der Regel am besten, WebP hat die breiteste Unterstützung. Da einige ältere Browser AVIF noch nicht unterstützen, sollten Sie diese Formate über das Element <picture> mit einem JPEG- oder PNG-Fallback anbieten, anstatt sie in einem einfachen <img src> zu verwenden.

Fehler beim Laden von Bildern

Beim Laden eines Bildes können Fehler auftreten. Wenn ein onerror-Ereignishandler für das Fehlerereignis gesetzt wurde, wird dieser Ereignishandler aufgerufen. Folgende Situationen können dazu führen:

Das src-Attribut ist leer ("") oder null.
Die src-URL und die URL der aktuell besuchten Seite sind identisch.
Eine Beschädigung des Bildes verhindert dessen Laden.
Die Metadaten des Bildes sind so beschädigt, dass es unmöglich ist, dessen Abmessungen abzurufen, und im <img>-Tag sind keine Abmessungen angegeben.
Das Format wird vom User Agent nicht unterstützt.

Sie können das error-Ereignis mit dem onerror-Attribut abhören und ein Fallback-Bild einsetzen, sodass Nutzer einen Platzhalter statt eines defekten Bildsymbols sehen:

<img
  src="profile.jpg"
  alt="User profile photo"
  width="200" height="200"
  onerror="this.onerror=null; this.src='fallback.png';">

Das Setzen von this.onerror=null zuerst ist wichtig: Es entfernt den Handler, bevor src geändert wird, sodass beim Fehlschlagen des Fallback-Bildes der Handler nicht erneut ausgelöst wird und keine Endlosschleife entsteht.

Attribute

Dies sind die aktuellen Standardattribute des <img>-Elements. Veraltete Attribute werden separat unten aufgeführt.

Attribut	Wert	Beschreibung
alt	text	Definiert den alternativen Text für das Bild. Verwenden Sie `alt=""` für rein dekorative Bilder.
crossorigin	`anonymous` \| `use-credentials`	Legt fest, ob CORS beim Laden des Bildes verwendet wird. Über CORS geladene Bilder können im Element `<canvas>` verwendet werden, ohne dessen Funktionalität einzuschränken.
decoding	`sync` \| `async` \| `auto`	Gibt dem Browser einen Hinweis, wie das Bild dekodiert werden soll. `async` dekodiert außerhalb des Haupt-Threads.
height	pixels	Definiert die Höhe des Bildes. Zusammen mit `width` setzen, um Platz zu reservieren und Layout-Verschiebungen zu vermeiden.
ismap	ismap	Gibt an, dass der Inhalt des Tags eine serverseitige Bildkarte ist.
loading	`eager` \| `lazy`	Steuert, ob das Bild sofort geladen oder bis in die Nähe des viewports verzögert wird.
sizes	Medienbedingungen + Längenangaben	Teilt dem Browser die angezeigte Breite des Bildes pro Breakpoint mit, wird zusammen mit `srcset` verwendet.
src	URL	Definiert die Quelle des Bildes.
srcset	URL + Deskriptoren	Eine kommagetrennte Liste von Kandidatenbildern und deren Breiten- (`w`) oder Dichte- (`x`) Deskriptoren.
usemap	#mapname	Gibt einen Link zum Element `<map>` an, das die Koordinaten für die clientseitige Bildkarte enthält.
width	pixels	Definiert die Breite des Bildes. Zusammen mit `height` setzen, um Platz zu reservieren und Layout-Verschiebungen zu vermeiden.

Der <img>-Tag unterstützt auch die Global Attributes und die Event Attributes.

Veraltete Attribute

Diese Attribute sind in HTML5 veraltet. Verwenden Sie stattdessen die CSS-Alternativen.

Attribut	Werte	Beschreibung	Alternative
align	left right top bottom middle	Definiert die Ausrichtung des Bildes in Bezug auf umgebende Elemente. Zentriert das HTML-Bild in Bezug auf umgebende Elemente.	Die CSS-Eigenschaften float und/oder vertical-align.
border	pixels	Definiert die Breite des Rahmens um das Bild.	Die CSS-Eigenschaft border.
hspace			Stattdessen die CSS-Eigenschaft margin.
name		Gibt dem Element einen Namen.	Das id-Attribut.
vspace	pixels	Definiert Abstände oben und unten am Bild.	Verwenden Sie stattdessen die CSS-Eigenschaft margin.

Übung

Wie wird ein rein dekoratives Bild korrekt ausgezeichnet, damit Screenreader es überspringen?

Ein leeres alt-Attribut vergeben: alt='' .Das alt-Attribut vollständig weglassen.alt auf den Dateinamen des Bildes setzen.Das title-Attribut anstelle von alt verwenden.

Syntax

Beispiel des HTML <img>-Tags:

Beispiel des <img>-Tags mit CSS-Styling:

Die Attribute src und alt

Dekorative vs. bedeutungsvolle Bilder

Verwendung von "data:image/[type];base64,[base64-string]" für das src-Attribut

Beispiel des HTML <img>-Tags mit den Attributen src und alt:

Warum width und height setzen

Die Attribute loading und decoding

Responsive Bilder mit srcset und sizes

Unterstützte Bildformate

Fehler beim Laden von Bildern

Attribute

Veraltete Attribute

Übung

Beispiel des HTML `<img>`-Tags:

Beispiel des `<img>`-Tags mit CSS-Styling:

Beispiel des HTML `<img>`-Tags mit den Attributen src und alt: