<img>

Das Element <img> fügt eine Grafik in ein Dokument ein.

Attributes

Dieses Element unterstützt die globalen Attribute.

align Unerwünscht HTML4.01, Veraltet seit HTML5

Ausrichtung der Grafik im Verhältnis zu ihrer Umgebung.
Benutzen Sie stattdessen die CSS-Eigenschaft vertical-align.

alt

Text, der vom Browser alternativ statt der Grafik angezeigt werden kann, zum Beispiel falls sie noch nicht heruntergeladen wurde, bei Übertragungsfehlern oder falls sie in keinem unterstützten Format vorliegt. Der Benutzer kann die Grafikdarstellung auch abgeschaltet haben oder einen Browser benutzen, der keine Grafik darstellen kann.

Der Text sollte das von der Grafik Dargestellte kurz und sinnvoll wiedergeben, so dass der Inhalt, den sie transportieren, ersichtlich wird. Ist dies nicht möglich, sollte das Attribut weggelassen werden.

Reine Dekorationselemente sollten hingegen mit einem leeren Attribut (alt="") eingefügt werden; Alternativtexte wie "Roter Punkt" sind unbedingt zu vermeiden!

Hinweis: Eine aussagekräftige Beschreibung des Bildes ist vor allem für die Barrierefreiheit von elementarer Bedeutung!
Dies gilt auch für das leere Attribut alt="". Browser können die (Ersatz-) Darstellung des img-Elements in diesem Fall ganz überspringen, was merklich der Übersichtlichkeit dient – niemand möchte einen Text vorgelesen bekommen, ständig von nutzlosen Hinweisen wie "Roter Punkt" unterbrochen.

border Unerwünscht HTML4.01, Veraltet seit HTML5

Breite des Rahmens um die Grafik. Benutzen Sie stattdessen die CSS-Eigenschaft border.

crossorigin HTML5

Ist dieses Attribut gesetzt, wird die betreffende Grafik mittels CORS (Cross-Origin Resource Sharing) abgerufen, wahlweise ohne den Benutzer zu authentifizieren oder mit:

"anonymous"

Es wird eine CORS-basierte Anfrage durchgeführt, jedoch wird keine Benutzerauthentifizierung mitgesendet (Cookies, X.509-Zertifikat, HTTP-Authentifizierung).

"use-credentials"

Es wird eine CORS-basierte Anfrage durchgeführt, gegebenenfalls mit Benutzerauthentifizierung (Cookies, X.509-Zertifikat, HTTP-Authentifizierung).

Hat das Attribut einen ungültigen Wert, wird stattdessen die Einstellung anonymous angenommen.
Fehlt das crossorigin-Attribut, wird die Grafik ohne CORS heruntergeladen (d.h. ohne die HTTP-Kopfzeile Origin).

Damit das Dokument uneingeschränkt auf die Grafik zugreifen kann (zum Beispiel im <canvas>-Element), muss der Server zusätzlich mit einer Access-Control-Allow-Credentials-Angabe antworten, die den Ursprung des Dokuments einschließt.

Weitere Informationen sind im Artikel über CORS-Attribute nachzulesen.

height

Tatsächliche Höhe der Grafik in HTML5 CSS-Pixeln, in HTML 4 Bildschirmpixeln oder als prozentualer Wert.

hspace Unerwünscht HTML4.01, Veraltet seit HTML5

Breite des Innenabstands links und rechts der Grafik. Benutzen Sie stattdessen die CSS-Eigenschaften padding-left und padding-right bzw. padding.

ismap

Serverseitig verweissensitive Grafik. Ist dieses Attribut gesetzt, werden bei jedem Klick die betreffenden Mauskoordinaten an den Server gesendet.

Hinweis: Dieses Attribut ist nur bei <img>-Elementen erlaubt, die sich innerhalb eines <a>-Elements mit einem gültigen href-Attribut befinden.

longdesc

URL einer längeren Beschreibung des Bildes, die als Ergänzung zum alt-Text dient.

name Unerwünscht HTML4.01, Veraltet seit HTML5

Name des Elements. Benutzen Sie stattdessen das id-Attribut.

referrerpolicy

Definiert, was beim Abruf der Grafik als verweisende URL in der HTTP-Kopfzeile Referer an den Server gesendet werden soll:

• "no-referrer": Es wird nichts gesendet.
• "no-referrer-when-downgrade": Wurde das die Grafik enthaltende Dokument über eine gesicherte Verbindung (HTTPS) abgerufen, wird nur dann keine verweisende URL gesendet, falls die Grafik über eine ungesicherte Verbindung abgerufen wird.
  Dies ist das Standardverhalten des Browsers, falls nichts anderes angegeben wurde.
• "origin": Es wird der Ursprung des Dokuments gesendet, üblicherweise das Protokoll, die Domain und gegebenenfalls der Port (zum Beispiel http://example.com:88).
• "origin-when-cross-origin": Wie origin, jedoch nur, falls die Grafik von einem anderen Server abgerufen wird. Ist der Server der gleiche, wird die vollständige URL des Dokuments, einschließlich Pfad, gesendet.
• "unsafe-url": Es wird immer die vollständige verweisende URL gesendet (jedoch ohne Fragmentbezeichner, Benutzername und Passwort).
  Dies ist unsicher, da zuvor über gesicherte Verbindungen abgerufene Informationen (die URL des Dokuments) auch über nichtgesicherte gesendet werden könnten (als verweisende URL beim Abruf der Grafik).

Hinweis:  In älteren Versionen hieß dieses Attribut referrer.

sizesHTML5

Mit dem sizes-Attribut wird die Anzeigegröße der Grafik in Abhängigkeit von der Größe des Anzeigegeräts festgelegt. Es enthält mehrere, durch Kommata getrennte Einträge, jeweils bestehend aus:

1. einer CSS-Medienbedingung, zum Beispiel (max-width: 480px). Diese Angabe entfällt für den letzten Eintrag.
2. einer CSS-Größenangabe.

Anhand dieser Einträge wählt der Browser eine der in srcset gebenenen Grafikquellen, sofern diese mit Breitenangaben ('w') versehen sind.
Fehlt das srcset-Attribut oder enthält es keine Breitenangaben, wird sizes ignoriert.

src

URL der Grafik. Dieses Attribut ist zwingend erforderlich.
Browser, die srcset unterstützen, behandeln src als Grafik mit einer Pixeldichte von 1x, sofern keine andere Grafik mit dieser Dichte in srcset aufgeführt ist oder falls srcset 'w'-Bezeichner enthält.

srcsetHTML5

srcset erlaubt das Bereitsstellen derselben Grafik in verschiedenen Versionen für niedrig- und hochauflösende Anzeigegeräte. Letztere profitieren von der höheren Bildqualität -bei größerer Datenmenge-, erstere von der geringeren Datenmenge.

srcset enthält mehrere – durch Kommata getrennte – Einträge, jeweils bestehend aus:

1. einer URL,
2. optional, Leerzeichen gefolgt von einem Kennwert:
   • der tatsächlichen Breite dieser Quelle (positive Ganzzahl) gefolgt von dem Buchstaben w. Dieser Wert steht in Abhängigkeit zu den Einträgen im sizes-Attribut.
   • eine abstrakte Pixeldichte in Form einer positiven Kommazahl gefolgt von dem Buchstaben x.

Ist kein Kennwert gegeben, wird für die jeweilige Quelle 1x angenommen.

Breitenangaben und Pixeldichten dürfen nicht gleichzeitig verwendet werden.  Doppelte Kennwerte (zum Beispiel zwei Quellen desselben srcset-Attributs mit dem Kennwert '4x') sind ebenfalls nicht erlaubt.

Die Entscheidung, welche Quelle genutzt wird, obliegt alleine dem Browser. Neben den Eigenschaften der Anzeige können so auch Benutzereinstellungen oder die Internetverbindung berücksichtigt werden.

width

Breite der Grafik in HTML5 CSS-Pixeln, HTML 4 Bildschirmpixeln oder als prozentuale Angabe.

usemap

Verweissensitive Grafik; das usemap-Attribut enthält das URL-Fragment (beginnend mit '#') der zugehörigen Karte.

Hinweis: usemap kann nicht benutzt werden, falls sich das <img>-Element in einem <a>- oder  <button>-Element befindet. Die Verwendung würde mit ismap kollidieren.

vspace Unerwünscht HTML4.01, Veraltet seit HTML5

Breite des Innenabstands über und unter der Grafik. Benutzen Sie stattdessen die CSS-Eigenschaften padding-top und padding-bottom bzw. padding.

Unterstützte Grafikformate

Der HTML-Standard gibt nicht vor, welche Grafikformate unterstützt werden müssen. JPEG und GIF sind in allen grafischen Browsern zu finden, ebenso mittlerweile das etwas jüngere PNG. Die Unterstützung für SVG ist beim Internet Explorer und älteren Android-Versionen nur rudimentär vorhanden, breite Unterstützung gibt es erst durch seit 2015 erschienene Browser (insbesondere des Internet-Explorer-Nachfolgers Edge).

Gecko unterstützt die folgenden Formate:

• JPEG
• GIF, einschließlich animierter
• PNG
• APNG
• SVG
• BMP
• BMP ICO
• PNG ICO

Beeinflussung durch CSS

CSS behandelt <img> als ersetztes Element.

Bei der Verwendung im inline-Modus zusammen mit vertical-align: baseline wird die Unterkante der Grafik an der Grundline des Elternelements ausgerichtet, da die Grafik selbst keine Grundline besitzt.

Ob eine Grafik festgelegte Abmessungen, d.h. Breite und Höhe hat, hängt vom Grafiktyp ab. SVG-Grafiken verfügen zum Beispiel nicht unbedingt darüber, sie erhalten ihre tatsächlichen Abmessungen aus ihrer Verwendung.

Fehlerbehandlung

Schlägt die Übertragung oder Darstellung der Grafik fehl, wird die wurde mittels onerror festgelegte Ereignisbehandlung ausgeführt. Mögliche Ursachen sind unter anderem:

• Das src-Attribute ist leer oder null.
• Die für src angegebene URL ist die gleiche wie die des Dokuments.
• Die Grafikdaten sind unlesbar beschädigt oder auch nur, falls weder width noch height angegeben sind, in einer Weise, die es unmöglich macht, Abmessungen auszulesen.
• Das Grafikformat wird vom Browser nicht unterstützt.

Beispiel 1

<img src="mdn-logo-sm.png" alt="MDN">

Beispiel 2: Anklickbare Grafik als Verweis

<a href="https://developer.mozilla.org/"><img src="mdn-logo-sm.png" alt="MDN"></a>

Beispiel 3: Das srcset-Attribut

Das src-Attribut hat als Vorgabe den Wert 1x bei Browsern, die srcset unterstützen.

 <img src="mdn-logo-sm.png" 
      alt="MDN" 
      srcset="mdn-logo-HD.png 2x">

Beispiel 4: Die Benutzung von srcset und size

Browser, die srcset unterstützen, ignorieren src bei der Benutzung des Bezeichners 'w'. Trifft im Beispiel die Bedingung (min-width: 600px) zu, ist die Grafik 200px breit, andernfalls 50vw (50% der Breite des Anzeigegeräts).

 <img src="clock-demo-thumb-200.png" 
      alt="Clock" 
      srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w"
      sizes="(min-width: 600px) 200px, 50vw">

Spezifikationen

Browserkompatibilität

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!

Siehe auch

• HTML-Elemente <picture>, <object> und <embed>.