<img>

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

Inhaltskategorien Flie├čender Inhalt, gestaltender Inhalt, eingebetteter Inhalt, f├╝hlbarer Inhalt.
Falls das Attribut usemap gesetzt ist, geh├Ârt das Element auch zu den interaktiven Inhalten.
Erlaubter Inhalt Keiner, es ist ein leeres Element.
Tag-Verwendung Muss einen Start-Tag, darf jedoch keinen End-Tag haben.
Erlaubte Elternelemente Jedes Element, das gestaltenden Inhalt erlaubt.
DOM-Schnittstelle HTMLImageElement

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:

Hinweis: Das XBM-Format wird seit Gecko 1.9.2 nicht mehr unterst├╝tzt.

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">

MDN

Beispiel 2: Anklickbare Grafik als Verweis

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

MDN

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!

Eigenschaft Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
<img> (Ja) (Ja) (Ja) (Ja) (Ja) (Ja)
srcset  34.0 (Ja) 32.0 (32.0) (behind a pref) Nicht unterst├╝tzt 21 7.1
referrer  46.0 [1] ? 42.0 (42.0) (behind a pref) ? ? ?
Eigenschaft Android Android Webview Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic support (Ja) (Ja) (Ja) (Ja) (Ja) (Ja) (Ja)
srcset  ? 34.0 Nicht unterst├╝tzt Nicht unterst├╝tzt 21 iOS 8 34.0
referrer ? 46.0 [1] 42.0 (42.0) (behind a pref) ? ? ? 46.0 [1]

[1] Zuschaltbar als referrerpolicy implementiert.

Siehe auch