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-Eigenschaftvertical-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 Attributalt=""
. 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).
Fehlt das crossorigin-Attribut, wird die Grafik ohne CORS heruntergeladen (d.h. ohne die HTTP-KopfzeileOrigin
). - Damit das Dokument uneingeschränkt auf die Grafik zugreifen kann (zum Beispiel im
<canvas>
-Element), muss der Server zusätzlich mit einerAccess-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
undpadding-right
bzw.padding
. ismap
- Serverseitig verweissensitive Grafik. Ist dieses Attribut gesetzt, werden bei jedem Klick die betreffenden Mauskoordinaten an den Server gesendet.
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 Beispielhttp://example.com:88
).- "
origin-when-cross-origin
": Wieorigin
, 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
. sizes
HTML5- 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:- einer CSS-Medienbedingung, zum Beispiel
(max-width: 480px)
. Diese Angabe entfällt für den letzten Eintrag. - 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 dassrcset
-Attribut oder enthält es keine Breitenangaben, wirdsizes
ignoriert. - einer CSS-Medienbedingung, zum Beispiel
src
- URL der Grafik. Dieses Attribut ist zwingend erforderlich.
Browser, diesrcset
unterstützen, behandelnsrc
als Grafik mit einer Pixeldichte von1x
, sofern keine andere Grafik mit dieser Dichte insrcset
aufgeführt ist oder fallssrcset
'w
'-Bezeichner enthält. srcset
HTML5srcset
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:- einer URL,
- 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 imsizes
-Attribut. - eine abstrakte Pixeldichte in Form einer positiven Kommazahl gefolgt von dem Buchstaben
x
.
- der tatsächlichen Breite dieser Quelle (positive Ganzzahl) gefolgt von dem Buchstaben
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.
vspace
Unerwünscht HTML4.01, Veraltet seit HTML5- Breite des Innenabstands über und unter der Grafik. Benutzen Sie stattdessen die CSS-Eigenschaften
padding-top
undpadding-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 odernull
. - 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
nochheight
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
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
Spezifikation | Status | Hinweis |
---|---|---|
Referrer Policy Die Definition von 'referrer attribute' in dieser Spezifikation. |
Anwärter Empfehlung | Attribut referrer hinzugefügt. |
HTML Living Standard Die Definition von '<img>' in dieser Spezifikation. |
Lebender Standard | |
HTML5 Die Definition von '<img>' in dieser Spezifikation. |
Empfehlung | |
HTML 4.01 Specification Die Definition von '<img>' in dieser Spezifikation. |
Empfehlung |
Browserkompatibilität
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.