--- title: slug: Web/HTML/Element/img translation_of: Web/HTML/Element/img ---
{{HTMLRef}}
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 {{htmlattrxref("usemap", "img")}} gesetzt ist, gehört das Element auch zu den interaktiven Inhalten. |
---|---|
Erlaubter Inhalt | Keiner, es ist ein {{Glossary("leeres Element")}}. |
Tag-Verwendung | Muss einen Start-Tag, darf jedoch keinen End-Tag haben. |
Erlaubte Elternelemente | Jedes Element, das gestaltenden Inhalt erlaubt. |
DOM-Schnittstelle | {{domxref("HTMLImageElement")}} |
Dieses Element unterstützt die globalen Attribute.
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.
"anonymous"
"use-credentials"
Hinweis: Dieses Attribut ist nur bei <img>
-Elementen erlaubt, die sich innerhalb eines {{htmlelement("a")}}-Elements mit einem gültigen {{htmlattrxref("href","a")}}-Attribut befinden.
"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."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).Hinweis: In älteren Versionen hieß dieses Attribut referrer
.
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:
(max-width: 480px)
. Diese Angabe entfällt für den letzten Eintrag.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.
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.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:
w
. Dieser Wert steht in Abhängigkeit zu den Einträgen im sizes
-Attribut.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.
Hinweis: usemap
kann nicht benutzt werden, falls sich das <img>
-Element in einem {{htmlelement("a")}}- oder {{HTMLElement("button")}}-Element befindet. Die Verwendung würde mit ismap
kollidieren.
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.
CSS behandelt <img>
als ersetztes Element.
Bei der Verwendung im inline
-Modus zusammen mit {{cssxref("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.
Schlägt die Übertragung oder Darstellung der Grafik fehl, wird die wurde mittels {{htmlattrxref("onerror")}} festgelegte Ereignisbehandlung ausgeführt. Mögliche Ursachen sind unter anderem:
null
.src
angegebene URL ist die gleiche wie die des Dokuments.width
noch height
angegeben sind, in einer Weise, die es unmöglich macht, Abmessungen auszulesen.<img src="mdn-logo-sm.png" alt="MDN">
<a href="https://developer.mozilla.org/"><img src="mdn-logo-sm.png" alt="MDN"></a>
srcset
-AttributDas 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">
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">
Spezifikation | Status | Hinweis |
---|---|---|
{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}} | {{Spec2('Referrer Policy')}} | Attribut referrer hinzugefügt. |
{{SpecName('HTML WHATWG', 'embedded-content.html#the-img-element', '<img>')}} | {{Spec2('HTML WHATWG')}} | |
{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-img-element', '<img>')}} | {{Spec2('HTML5 W3C')}} | |
{{SpecName('HTML4.01', 'struct/objects.html#h-13.2', '<img>')}} | {{Spec2('HTML4.01')}} |
{{CompatibilityTable}}
Eigenschaft | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
<img> | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
srcset |
{{CompatChrome(34.0)}} | {{CompatVersionUnknown}} | {{CompatGeckoDesktop("32.0")}} (behind a pref) | {{CompatNo}} | {{CompatOpera(21)}} | {{CompatSafari(7.1)}} |
referrer |
{{CompatChrome(46.0)}} [1] | {{CompatUnknown}} | {{CompatGeckoDesktop("42.0")}} (behind a pref) | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
Eigenschaft | Android | Android Webview | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|
Basic support | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
srcset |
{{CompatUnknown}} | {{CompatChrome(34.0)}} | {{CompatNo}} | {{CompatNo}} | 21 | iOS 8 | {{CompatChrome(34.0)}} |
referrer |
{{CompatUnknown}} | {{CompatChrome(46.0)}} [1] | {{CompatGeckoMobile("42.0")}} (behind a pref) | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatChrome(46.0)}} [1] |
[1] Zuschaltbar als referrerpolicy
implementiert.