<img>: Das Bild-Einbettungselement
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
Das <img>
-Element des HTML eingebettet ein Bild in das Dokument.
Probieren Sie es aus
Das obige Beispiel zeigt die Verwendung des <img>
-Elements:
- Das
src
-Attribut ist erforderlich und enthält den Pfad zum Bild, das Sie einbetten möchten. - Das
alt
-Attribut hält einen textuellen Ersatz für das Bild, der obligatorisch und ungemein nützlich für die Barrierefreiheit ist — Bildschirmlesegeräte lesen den Attributwert ihren Benutzern vor, damit sie wissen, was das Bild bedeutet. Alternativtext wird auch auf der Seite angezeigt, wenn das Bild aus irgendeinem Grund nicht geladen werden kann: zum Beispiel bei Netzwerkfehlern, Inhaltsblockierung oder Link-Verlust.
Es gibt viele andere Attribute, um verschiedene Zwecke zu erzielen:
- Steuerung von Referrer/CORS für Sicherheit und Datenschutz: siehe
crossorigin
undreferrerpolicy
. - Sowohl
width
als auchheight
verwenden, um die intrinsische Größe des Bildes festzulegen, wodurch es Platz einnimmt, bevor es geladen wird, um Inhalts-Layout-Verschiebungen zu mindern. - Reaktionsfähige Bildhinweise mit
sizes
undsrcset
(siehe auch das<picture>
-Element und unser Reaktionsfähige Bilder-Tutorial).
Unterstützte Bildformate
Der HTML-Standard gibt nicht an, welche Bildformate unterstützt werden sollen, sodass User Agents möglicherweise unterschiedliche Formate unterstützen.
Hinweis: Der Leitfaden zu Bilddateitypen und -formaten bietet umfassende Informationen über Bildformate und deren Unterstützung durch Webbrowser. Dieser Abschnitt ist lediglich eine Zusammenfassung!
Die Bilddateiformate, die am häufigsten im Web verwendet werden, sind:
- APNG (Animated Portable Network Graphics) — Gute Wahl für verlustfreie Animationssequenzen (GIF ist weniger performant)
- AVIF (AV1 Image File Format) — Gute Wahl sowohl für Bilder als auch für animierte Bilder aufgrund der hohen Leistung.
- GIF (Graphics Interchange Format) — Gute Wahl für einfache Bilder und Animationen.
- JPEG (Joint Photographic Expert Group image) — Gute Wahl für verlustbehaftete Kompression von Standbildern (derzeit das beliebteste).
- PNG (Portable Network Graphics) — Gute Wahl für verlustfreie Kompression von Standbildern (leicht bessere Qualität als JPEG).
- SVG (Scalable Vector Graphics) — Vektorbildformat. Verwenden Sie es für Bilder, die in verschiedenen Größen genau gezeichnet werden müssen.
- WebP (Web Picture format) — Hervorragende Wahl für sowohl Bilder als auch animierte Bilder
Formate wie WebP und AVIF werden empfohlen, da sie viel besser abschneiden als PNG, JPEG, GIF für sowohl statische als auch animierte Bilder.
SVG bleibt das empfohlene Format für Bilder, die in verschiedenen Größen genau dargestellt werden müssen.
Bildladefehler
Wenn ein Fehler beim Laden oder Rendern eines Bildes auftritt und ein onerror
-Ereignishandler für das error
-Ereignis gesetzt wurde, wird dieser Ereignishandler aufgerufen. Dies kann in mehreren Situationen passieren, unter anderem:
- Das
src
-Attribut ist leer (""
) odernull
. - Die
src
-URL ist dieselbe wie die URL der Seite, die der Benutzer gerade betrachtet. - Das Bild ist in irgendeiner Weise beschädigt, sodass es nicht geladen werden kann.
- Die Metadaten des Bildes sind auf eine solche Weise beschädigt, dass es unmöglich ist, seine Dimensionen abzurufen, und es wurden keine Dimensionen in den Attributen des
<img>
-Elements spezifiziert. - Das Bild ist in einem Format, das von dem User Agent nicht unterstützt wird.
Attribute
Dieses Element enthält die globalen Attribute.
alt
-
Definiert Text, der das Bild auf der Seite ersetzen kann.
Hinweis: Browser zeigen nicht immer Bilder an. Es gibt eine Reihe von Situationen, in denen ein Browser Bilder nicht anzeigt, wie zum Beispiel:
- Nicht-visuelle Browser (wie diejenigen, die von Menschen mit Sehbehinderungen verwendet werden)
- Der Benutzer entscheidet sich dafür, keine Bilder anzuzeigen (um Bandbreite zu sparen, aus Datenschutzgründen)
- Das Bild ist ungültig oder ein nicht unterstützter Typ.
In diesen Fällen kann der Browser das Bild durch den Text im
alt
-Attribut des Elements ersetzen. Aus diesen und anderen Gründen sollten Sie, wann immer möglich, einen nützlichen Wert füralt
angeben.Wenn Sie dieses Attribut auf eine leere Zeichenfolge (
alt=""
) setzen, bedeutet das, dass dieses Bild kein wesentlicher Bestandteil des Inhalts ist (es ist Dekoration oder ein Tracking-Pixel) und dass nicht-visuelle Browser es vom Rendering ausschließen können. Visuelle Browser werden auch das gebrochene Bildsymbol ausblenden, wenn dasalt
-Attribut leer ist und das Bild nicht angezeigt werden konnte.Dieses Attribut wird auch verwendet, wenn das Bild in Text kopiert und eingefügt oder ein verlinktes Bild als Lesezeichen gespeichert wird.
attributionsrc
Experimentell-
Gibt an, dass Sie möchten, dass der Browser einen
Attribution-Reporting-Eligible
Header zusammen mit der Bildanfrage sendet.Auf der Serverseite wird dies verwendet, um das Senden eines
Attribution-Reporting-Register-Source
oderAttribution-Reporting-Register-Trigger
Headers in der Antwort auszulösen, um eine bildbasierte Attributionsquelle oder einen Attributionstrigger zu registrieren. Welcher Antwortheader zurückgesandt werden sollte, hängt von dem Wert desAttribution-Reporting-Eligible
Headers ab, der die Registrierung ausgelöst hat.Das entsprechende Quell- oder Triggerevent wird ausgelöst, sobald der Browser die Antwort einschließlich der Bilddatei erhält.
Hinweis: Siehe die Attribution Reporting API für weitere Details.
Es gibt zwei Varianten dieses Attributs, die Sie festlegen können:
- Boolesch, d.h. nur der
attributionsrc
Name. Dies spezifiziert, dass Sie möchten, dass derAttribution-Reporting-Eligible
Header zu demselben Server gesendet wird, auf den dassrc
-Attribut verweist. Dies ist in Ordnung, wenn Sie die Attributionsquelle oder -triggeregistrierung auf demselben Server handhaben. Wenn ein Attributionstrigger registriert wird, ist diese Eigenschaft optional, und ein boolescher Wert wird verwendet, wenn er weggelassen wird. - Wert, der eine oder mehrere URLs enthält, zum Beispiel:
html<img src="image-file.png" alt="My image file description" attributionsrc="https://a.example/register-source https://b.example/register-source" />
Dies ist nützlich in Fällen, wenn die angeforderte Ressource nicht auf einem Server liegt, den Sie kontrollieren, oder Sie möchten die Registrierung der Attributionsquelle auf einem anderen Server handhaben. In diesem Fall können Sie eine oder mehrere URLs als Wert von
attributionsrc
angeben. Wenn die Ressourcenanfrage erfolgt, wird derAttribution-Reporting-Eligible
Header zusätzlich zum Ursprungsserver an die imattributionSrc
angegebenen URL(s) gesendet. Diese URLs können dann mit einemAttribution-Reporting-Register-Source
oderAttribution-Reporting-Register-Trigger
Header angemessen reagieren, um die Registrierung abzuschließen.Hinweis: Das Angeben mehrerer URLs bedeutet, dass mehrere Attributionsquellen auf demselben Merkmal registriert werden können. Sie könnten beispielsweise verschiedene Kampagnen haben, deren Erfolg Sie messen möchten, indem Sie unterschiedliche Berichte über unterschiedliche Daten generieren.
- Boolesch, d.h. nur der
crossorigin
-
Gibt an, ob das Abrufen des Bildes mithilfe einer CORS-Anfrage erfolgen muss. Bilddaten aus einem CORS-aktivierten Bild, das aus einer CORS-Anfrage zurückgegeben wird, können im
<canvas>
-Element ohne die Markierung "tainted" wiederverwendet werden.Wenn das
crossorigin
-Attribut nicht angegeben wird, wird eine Nicht-CORS-Anfrage gesendet (ohne denOrigin
Anfrageheader), und der Browser markiert das Bild als tainted und schränkt den Zugriff auf seine Bilddaten ein, was seine Verwendung in<canvas>
-Elementen verhindert.Wenn das
crossorigin
-Attribut angegeben wird, wird eine CORS-Anfrage gesendet (mit demOrigin
Anfrageheader); wenn der Server jedoch nicht optiert, den plattformübergreifenden Zugriff auf die Bilddaten durch die Ursprungsseite zuzulassen (indem er keinenAccess-Control-Allow-Origin
Antwortheader sendet oder die Ursprungsseite nicht in einen Antwortheader einbezieht, den er sendet), blockiert der Browser das Laden des Bildes und protokolliert einen CORS-Fehler in der Entwicklertools-Konsole.Zulässige Werte:
anonymous
-
Eine CORS-Anfrage wird gesendet, bei der Anmeldeinformationen weggelassen werden (d.h. keine Cookies, X.509 Zertifikate oder
Authorization
Anfrageheader). use-credentials
-
Die CORS-Anfrage wird mit allen enthaltenen Anmeldeinformationen gesendet (d.h. Cookies, X.509 Zertifikate und der
Authorization
Anfrageheader). Wenn der Server nicht optiert, Anmeldeinformationen mit der Ursprungsseite zu teilen (durch Senden desAccess-Control-Allow-Credentials: true
Antwortheaders), markiert der Browser das Bild als tainted und schränkt den Zugriff auf seine Bilddaten ein.
Wenn das Attribut einen ungültigen Wert hat, behandeln es Browser so, als ob der Wert
anonymous
verwendet wurde. Weitere Informationen finden Sie unter CORS Einstellungen Attribute. decoding
-
Dieses Attribut gibt dem Browser einen Hinweis darauf, ob er die Bilddekodierung zusammen mit dem Rendern anderer DOM-Inhalte in einem einzigen Präsentationsschritt durchführen sollte, der "korrekter" aussieht (
sync
), oder zuerst die anderen DOM-Inhalte rendern und dann das Bild dekodieren und später präsentieren sollte (async
). In der Praxis bedeutetasync
, dass der nächste Anstrich nicht wartet, bis das Bild dekodiert wird.Es ist oft schwierig, irgendeinen merklichen Effekt beim Verwenden von
decoding
auf statischen<img>
-Elementen zu erkennen. Sie werden wahrscheinlich zunächst als leere Bilder gerendert, während die Bilddateien (entweder aus dem Netz oder aus dem Cache) abgerufen und dann unabhängig gehandhabt werden, sodass die "Synchronisation" von Inhaltsaktualisierungen weniger sichtbar ist. Allerdings kann das Blockieren des Renderns während der Dekodierung, auch wenn es oft recht klein ist, gemessen werden — selbst wenn es mit dem menschlichen Auge schwer zu beobachten ist. Siehe Was macht das Bilddekodierungsattribut tatsächlich? für eine detailliertere Analyse (tunetheweb.com, 2023).Verwenden von unterschiedlichen
decoding
-Typen kann zu spürbareren Unterschieden führen, wenn<img>
-Elemente dynamisch über JavaScript in das DOM eingefügt werden — sieheHTMLImageElement.decoding
für weitere Details.Zulässige Werte:
sync
-
Das Bild synchron zusammen mit dem Rendern anderer DOM-Inhalte dekodieren und alles zusammen präsentieren.
async
-
Das Bild asynchron dekodieren, nach dem Rendern und der Präsentation der anderen DOM-Inhalte.
auto
-
Keine Präferenz für den Dekodiermodus; der Browser entscheidet, was für den Benutzer am besten ist. Dies ist der Standardwert.
elementtiming
-
Markiert das Bild zur Beobachtung durch die
PerformanceElementTiming
-API. Der angegebene Wert wird zu einem Bezeichner für das beobachtete Bildelement. Siehe auch die Attributseiteelementtiming
. fetchpriority
-
Bietet einen Hinweis auf die relative Priorität, die beim Abrufen des Bildes verwendet werden soll.
Zulässige Werte:
high
-
Das Bild mit hoher Priorität im Vergleich zu anderen Bildern abrufen.
low
-
Das Bild mit niedriger Priorität im Vergleich zu anderen Bildern abrufen.
auto
-
Keine Präferenz für die Abrufpriorität setzen. Dies ist der Standardwert. Er wird verwendet, wenn kein Wert oder ein ungültiger Wert festgelegt ist.
Weitere Informationen finden Sie unter
HTMLImageElement.fetchPriority
. height
-
Die intrinsische Höhe des Bildes in Pixel. Muss eine ganze Zahl ohne Einheit sein.
Hinweis: Die Angabe von
height
undwidth
ermöglicht es dem Browser, das Seitenverhältnis des Bildes vor dem Laden zu berechnen. Dieses Seitenverhältnis wird verwendet, um den zum Anzeigen des Bildes benötigten Platz zu reservieren, wodurch oder sogar ein Layout-Versatz vermieden wird, wenn das Bild heruntergeladen und auf den Bildschirm gemalt wird. Das Reduzieren von Layout-Versatz ist ein wichtiger Bestandteil einer guten Benutzererfahrung und Webleistung. ismap
-
Dieses boolesche Attribut gibt an, dass das Bild Teil einer serverseitigen Karte ist. Wenn dies der Fall ist, werden die Koordinaten, an denen der Benutzer auf das Bild geklickt hat, an den Server gesendet.
loading
-
Gibt an, wie der Browser das Bild laden soll:
eager
-
Lädt das Bild sofort, unabhängig davon, ob sich das Bild derzeit im sichtbaren Anzeigebereich befindet (dies ist der Standardwert).
lazy
-
Verweigert das Laden des Bildes, bis es eine berechnete Entfernung vom Anzeigebereich erreicht hat, wie sie vom Browser definiert wird. Die Absicht besteht darin, das Netz und den Speicherbandbreitenbedarf für die Handhabung des Bildes zu vermeiden, bis es relativ sicher ist, dass es benötigt wird. Dies verbessert in den meisten typischen Anwendungsfällen im Allgemeinen die Leistung des Inhalts.
Hinweis: Das Laden wird nur verzögert, wenn JavaScript aktiviert ist. Dies ist eine Anti-Tracking-Maßnahme, da, wenn ein User-Agent das Lazy Loading unterstützt, wenn Skripting deaktiviert ist, es immer noch möglich wäre, die ungefähre Scroll-Position eines Benutzers während einer Sitzung zu verfolgen, indem man strategisch Bilder im Markup einer Seite platziert, damit ein Server verfolgen kann, wie viele Bilder angefordert werden und wann.
Hinweis: Bilder mit
loading
, das auflazy
gesetzt ist, werden niemals geladen, wenn sie nicht mit einem sichtbaren Teil eines Elements überschnitten sind, selbst wenn das Laden sie ändern würde, da nicht geladene Bilder einewidth
undheight
von0
haben. Die Angabe vonwidth
undheight
auf Lazy-Loading-Bildern behebt dieses Problem und ist eine bewährte Methode, die von der Spezifikation empfohlen wird. Dies hilft auch, Layout-Verschiebungen zu verhindern. referrerpolicy
-
Ein String, der angibt, welche Referrer verwendet werden sollen, wenn die Ressource abgerufen wird:
no-referrer
: DerReferer
Header wird nicht gesendet.no-referrer-when-downgrade
: DerReferer
Header wird nicht an Ursprungs ohne TLS (HTTPS) gesendet.origin
: Der gesendete Referrer wird auf den Ursprung der verweisenden Seite beschränkt: ihr Schema, Host und Port.origin-when-cross-origin
: Der Referrer, der an andere Ursprünge gesendet wird, wird auf das Schema, den Host und den Port beschränkt. Bei Navigationen auf demselben Ursprung wird weiterhin der Pfad enthalten sein.same-origin
: Ein Referrer wird für die gleiche Origin gesendet, aber plattformübergreifende Anfragen enthalten keine Referrer-Informationen.strict-origin
: Sendet nur den Ursprung des Dokuments als Referrer, wenn das Protokollsicherheitsniveau gleich bleibt (HTTPS→HTTPS), sendet ihn jedoch nicht an ein weniger sicheres Ziel (HTTPS→HTTP).strict-origin-when-cross-origin
(Standard): Senden Sie eine vollständige URL, wenn Sie eine Anfrage zum selben Ursprung durchführen, senden Sie nur den Ursprung, wenn das Protokollsicherheitsniveau gleich bleibt (HTTPS→HTTPS), und senden Sie keinen Header an ein weniger sicheres Ziel (HTTPS→HTTP).unsafe-url
: Der Referrer wird den Ursprung und den Pfad (aber nicht das Fragment, das Passwort oder den Benutzernamen) enthalten. Dieser Wert ist unsicher, da er Ursprünge und Pfade von TLS-geschützten Ressourcen an unsichere Ursprünge leakt.
sizes
-
Eine oder mehrere durch Kommas getrennte Strings, die einen Satz von Quellen-Größen angeben. Jede Quellen-Größe besteht aus:
- Eine Media-Bedingung. Dies muss für den letzten Eintrag in der Liste ausgelassen werden.
- Ein Quellen-Größenwert.
Media-Bedingungen beschreiben Eigenschaften des Ansichtsfensters, nicht des Bildes. Beispielsweise würde
(max-height: 500px) 1000px
vorschlagen, eine Quelle mit 1000px Breite zu verwenden, wenn das Anzeigefenster nicht höher als 500px ist. Da ein Quellen-Größen-Deskriptor verwendet wird, um die Breite festzulegen, die für das Bild während des Layouts der Seite verwendet werden soll, basiert die Media-Bedingung typischerweise (aber nicht unbedingt) auf den width Informationen.Quellen-Größenwerte geben die beabsichtigte Darstellungsgröße des Bildes an. User Agents verwenden die aktuelle Quellen-Größe, um eine der von dem
srcset
-Attribut bereitgestellten Quellen auszuwählen, wenn diese Quellen mit Breitenbeschreibungen (w
) beschrieben werden. Die ausgewählte Quellen-Größe beeinflusst die intrinsische Größe des Bildes (die Anzeigengröße des Bildes, wenn keine CSS Formatierung angewendet wird). Wenn dassrcset
-Attribut nicht vorhanden ist oder keine Werte mit einer Breitenbeschreibung enthält, hat dassizes
-Attribut keine Auswirkungen.Ein Quellen-Größenwert kann jede nicht negative Länge sein. Es dürfen keine CSS-Funktionen verwendet werden, außer den Mathematikfunktionen. Einheiten werden in derselben Weise interpretiert wie Media-Abfragen, wobei alle relativen Längeneinheiten sich relativ zur Dokumentwurzel statt zum
<img>
-Element beziehen, sodass einem
-Wert sich relativ zur Stammfontgröße bezieht, anstatt zur Schriftgröße des Bildes. Prozentwerte sind nicht erlaubt.Zusätzlich können Sie den Wert
auto
verwenden, um die gesamte Liste von Größen oder den ersten Eintrag in der Liste zu ersetzen. Es ist nur gültig, wenn es mitloading="lazy"
kombiniert wird, und löst sich in die konkrete Größe des Bildes auf. src
-
Die Bild-URL. Pflichtfeld für das
<img>
-Element. In Browsern, diesrcset
unterstützen, wirdsrc
wie ein Kandidatenbild mit einem Pixeldichtedeskriptor1x
behandelt, es sei denn, ein Bild mit diesem Pixeldichtedeskriptor ist bereits insrcset
definiert, odersrcset
enthältw
Deskriptoren. srcset
-
Eine oder mehrere durch Kommas getrennte Strings, die mögliche Bildquellen für den User Agent angeben. Jede Zeichenfolge besteht aus:
-
Einer URL zu einem Bild
-
Optionalerweise gefolgt von einem Leerzeichen und einem der folgenden:
- Einer Breitenbeschreibungen (ein positiver Integer, direkt gefolgt von
w
). Der Breitenbeschreibungen wird durch die Quellen-Größe geteilt, die imsizes
-Attribut angegeben ist, um die effektive Pixeldichte zu berechnen. - Einem Pixeldichtedeskriptor (eine positive Gleitkommazahl, direkt gefolgt von
x
).
- Einer Breitenbeschreibungen (ein positiver Integer, direkt gefolgt von
Wenn kein Deskriptor angegeben ist, wird der Quelle der Standarddeskriptor von
1x
zugewiesen.Es ist falsch, Breitenbeschreibungen und Pixeldichtedeskriptoren im selben
srcset
-Attribut zu mischen. Doppelte Deskriptoren (zum Beispiel zwei Quellen im selbensrcset
, die beide mit2x
beschrieben sind) sind ebenfalls ungültig.Wenn das
srcset
-Attribut Breitenbeschreibungen verwendet, muss auch dassizes
-Attribut vorhanden sein, ansonsten wird dassrcset
selbst ignoriert.Der User Agent wählt nach eigenem Ermessen eine der verfügbaren Quellen aus. Dies bietet ihnen erheblichen Spielraum, um ihre Auswahl basierend auf Dingen wie Benutzerpräferenzen oder Bandbreiten-Bedingungen anzupassen. Siehe unser Reaktionsfähige Bilder-Tutorial für ein Beispiel.
-
width
-
Die intrinsische Breite des Bildes in Pixel. Muss eine ganze Zahl ohne Einheit sein.
usemap
-
Die partielle URL (beginnend mit
#
) einer Bildkarte, die mit dem Element verbunden ist.
Veraltete Attribute
align
Veraltet-
Richtet das Bild am umgebenden Kontext aus. Verwenden Sie stattdessen die
float
und/odervertical-align
CSS-Eigenschaften anstelle dieses Attributs. Zulässige Werte: border
Veraltet-
Die Breite eines Rahmens um das Bild. Verwenden Sie stattdessen die
border
CSS-Eigenschaft. hspace
Veraltet-
Die Anzahl von Pixeln des Weißraums links und rechts vom Bild. Verwenden Sie stattdessen die
margin
CSS-Eigenschaft. longdesc
Veraltet-
Ein Link zu einer detaillierteren Beschreibung des Bildes. Mögliche Werte sind eine URL oder eine Element-
id
.Hinweis: Dieses Attribut wird in der neuesten W3C Version, HTML 5.2, erwähnt, wurde jedoch aus dem WHATWG's HTML-Living-Standard entfernt. Es hat eine ungewisse Zukunft; Autoren sollten eine WAI-ARIA Alternative verwenden, wie
aria-describedby
oderaria-details
. name
Veraltet-
Ein Name für das Element. Verwenden Sie stattdessen das
id
-Attribut. vspace
Veraltet-
Die Anzahl von Pixeln des Weißraums oberhalb und unterhalb des Bildes. Verwenden Sie stattdessen die
margin
CSS-Eigenschaft.
Styling mit CSS
<img>
ist ein ersetztes Element; es hat standardmäßig einen display
-Wert von inline
, aber seine Standarddimensionen werden durch die intrinsischen Werte des eingebetteten Bildes definiert, als wäre es inline-block
. Sie können Eigenschaften wie border
/border-radius
, padding
/margin
, width
, height
usw. auf ein Bild anwenden.
<img>
hat keine Grundlinie, sodass, wenn Bilder in einem Inline-Formatierungskontext mit vertical-align: baseline
verwendet werden, der Boden des Bildes auf der Textgrundlinie platziert wird.
Sie können die Eigenschaft object-position
verwenden, um das Bild innerhalb des Box des Elements zu positionieren und die Eigenschaft object-fit
, um die Größe des Bildes innerhalb der Box anzupassen (zum Beispiel, ob das Bild in die Box passen oder diese füllen sollte, auch wenn dafür ein Zuschnitt erforderlich ist).
Abhängig von seinem Typ kann ein Bild eine intrinsische Breite und Höhe haben. Für einige Bildtypen sind jedoch intrinsische Dimensionen nicht notwendig. SVG-Bilder zum Beispiel haben keine intrinsischen Dimensionen, wenn ihr Stamm-<svg>
-Element keine width
oder height
hat, die darauf gesetzt sind.
Barrierefreiheit
Bedeutungsvolle alternative Beschreibungen schreiben
Der Wert des alt
-Attributs sollte eine klare und prägnante Textalternative für den Inhalt des Bildes bieten. Er sollte nicht das Vorhandensein des Bildes selbst oder den Dateinamen des Bildes beschreiben. Wenn das alt
-Attribut absichtlich weggelassen wurde, weil das Bild keine textuelle Entsprechung hat, ziehen Sie alternative Methoden in Betracht, das zu präsentieren, was das Bild zu kommunizieren versucht.
Nicht tun
<img alt="image" src="penguin.jpg" />
Tun
<img alt="A Penguin on a beach." src="penguin.jpg" />
Ein wichtiger Barrierefreiheitstest besteht darin, den Inhalt des alt
-Attributs zusammen mit vorangehendem Textinhalt zu lesen, um zu sehen, ob er dieselbe Bedeutung wie das Bild vermittelt. Wenn das Bild zum Beispiel durch den Satz "Auf meinen Reisen habe ich ein süßes kleines Tier gesehen:" vorangegangen wäre, könnte das Nicht tun-Beispiel von einem Bildschirmlesegerät als "Auf meinen Reisen habe ich ein süßes kleines Tier gesehen: Bild" gelesen werden, was keinen Sinn ergibt. Das Tun-Beispiel könnte als "Auf meinen Reisen habe ich ein süßes kleines Tier gesehen: Ein Pinguin am Strand." gelesen werden, was sinnvoll ist.
Für Bilder, die eine Aktion auslösen sollen, z.B. Bilder, die innerhalb eines <a>
- oder <button>
-Elements verschachtelt sind, sollten Sie in Erwägung ziehen, die ausgelöste Aktion im alt
-Attributwert zu beschreiben. Zum Beispiel könnten Sie alt="nächste Seite"
anstelle von alt="Pfeil rechts"
schreiben. Sie könnten auch eine optionale zusätzliche Beschreibung innerhalb eines title
-Attributs hinzufügen; diese kann von Bildschirmlesegeräten vorgelesen werden, wenn der Benutzer es anfordert.
Wenn ein alt
-Attribut bei einem Bild nicht vorhanden ist, können einige Bildschirmlesegeräte stattdessen den Dateinamen des Bildes anzeigen. Dies kann eine verwirrende Erfahrung sein, wenn der Dateiname nicht repräsentativ für den Inhalt des Bildes ist.
Identifizieren von SVG als Bild
Aufgrund eines VoiceOver-Bugs kündigt VoiceOver SVG-Bilder nicht korrekt als Bilder an. Fügen Sie role="img"
zu allen <img>
-Elementen mit SVG-Quelldateien hinzu, um sicherzustellen, dass unterstützende Technologien das SVG korrekt als Bildinhalt ankündigen.
<img src="mdn.svg" alt="MDN" role="img" />
Das title-Attribut
Das title
-Attribut ist kein akzeptabler Ersatz für das alt
-Attribut. Vermeiden Sie es zudem, den Wert des alt
-Attributs in einem title
-Attribut zu duplizieren, das auf demselben Bild angegeben ist. Dies kann dazu führen, dass einige Bildschirmlesegeräte denselben Text zweimal vorlesen, was eine verwirrende Erfahrung schafft.
Das title
-Attribut sollte auch nicht als zusätzliche Beschriftungsinformation verwendet werden, um die alt
-Beschreibung eines Bildes zu begleiten. Wenn ein Bild eine Beschriftung benötigt, verwenden Sie die figure
und figcaption
-Elemente.
Der Wert des title
-Attributs wird dem Benutzer normalerweise als Tooltip angezeigt, der kurz nach dem Anhalten des Cursors über dem Bild erscheint. Während dies dem Benutzer zusätzliche Informationen bieten kann, sollten Sie nicht davon ausgehen, dass der Benutzer sie jemals sehen wird: der Benutzer könnte nur eine Tastatur oder einen Touchscreen haben. Wenn Sie Informationen haben, die für den Benutzer besonders wichtig oder wertvoll sind, präsentieren Sie sie inline mit einer der oben genannten Methoden anstelle der Verwendung von title
.
Beispiele
Alternativer Text
Das folgende Beispiel bettet ein Bild in die Seite ein und enthält alternativen Text für Barrierefreiheit.
<img src="favicon144.png" alt="MDN" />
Bildlink
Dieses Beispiel baut auf dem vorherigen auf und zeigt, wie das Bild in einen Link umgewandelt werden kann. Um dies zu tun, verschachteln Sie das <img>
-Tag innerhalb des <a>
. Sie sollten den Alternativtext so gestalten, dass er die Ressource beschreibt, auf die der Link verweist, als ob Sie stattdessen einen Textlink verwenden würden.
<a href="https://developer.mozilla.org">
<img src="favicon144.png" alt="Visit the MDN site" />
</a>
Verwendung des srcset-Attributs
In diesem Beispiel fügen wir ein srcset
-Attribut mit einem Verweis auf eine hochauflösende Version des Logos ein; diese wird anstelle des src
-Bilds auf hochauflösenden Geräten geladen. Das im src
-Attribut angegebene Bild wird als 1x
-Kandidat in User Agents, die srcset
unterstützen, gezählt.
<img src="favicon72.png" alt="MDN" srcset="favicon144.png 2x" />
Verwendung der srcset- und sizes-Attribute
Das src
-Attribut wird in User Agents, die srcset
unterstützen, ignoriert, wenn w
-Deskriptoren enthalten sind. Wenn die (max-width: 600px)
Media-Bedingung zutrifft, wird das 200 Pixel breite Bild geladen (es ist dasjenige, das am nächsten zu 200px
passt), andernfalls wird das andere Bild geladen.
<img
src="clock-demo-200px.png"
alt="The time is 12:45."
srcset="clock-demo-200px.png 200w, clock-demo-400px.png 400w"
sizes="(max-width: 600px) 200px, 50vw" />
Hinweis: Um das Resizing in Aktion zu sehen, view the example on a separate page, damit Sie tatsächlich den Inhaltsbereich ändern können.
Sicherheits- und Datenschutzbedenken
Obwohl <img>
-Elemente harmlose Verwendungen haben, können sie unerwünschte Folgen für die Sicherheit und den Datenschutz des Benutzers haben. Siehe Referer-Header: Datenschutz- und Sicherheitsbedenken für weitere Informationen und Maßnahmen zur Minderung.
Technische Zusammenfassung
Inhaltskategorien |
Flussinhalt,
Phrasierungsinhalt,
eingebetteter Inhalt,
fühlbarer Inhalt. Wenn das Element ein usemap -Attribut hat, ist es auch Teil der Kategorie interaktiver Inhalt.
|
---|---|
Erlaubter Inhalt | Keiner; es ist ein [leeres Element](/de/docs/Glossar/void_element). |
Tag-Auslassung | Muss ein Starttag haben und darf keinen Endtag haben. |
Erlaubte Eltern | Jedes Element, das eingebetteten Inhalt akzeptiert. |
Implizite ARIA-Rolle |
|
Erlaubte ARIA-Rollen |
|
DOM-Schnittstelle | [`HTMLImageElement`](/de/docs/Web/API/HTMLImageElement) |
Spezifikationen
Specification |
---|
HTML # the-img-element |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
img | ||||||||||||
align | ||||||||||||
alt | ||||||||||||
Aspect ratio computed from width and height attributes | ||||||||||||
attributionsrc | ||||||||||||
border | ||||||||||||
crossorigin | ||||||||||||
decoding | ||||||||||||
fetchpriority | ||||||||||||
height | ||||||||||||
hspace | ||||||||||||
ismap | ||||||||||||
loading | ||||||||||||
longdesc | ||||||||||||
name | ||||||||||||
referrerpolicy | ||||||||||||
no-referrer-when-downgrade | ||||||||||||
origin-when-cross-origin | ||||||||||||
unsafe-url | ||||||||||||
sizes | ||||||||||||
auto value | ||||||||||||
src | ||||||||||||
srcset | ||||||||||||
usemap | ||||||||||||
Content is case-sensitive | ||||||||||||
vspace | ||||||||||||
width |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- Deprecated. Not for use in new websites.
- See implementation notes.
- Uses a non-standard name.
- Has more compatibility info.
Siehe auch
<picture>
,<object>
, und<embed>
-Elementeobject-fit
,object-position
,image-orientation
,image-rendering
, undimage-resolution
: Bildbezogene CSS-Eigenschaften.HTMLImageElement
-Schnittstelle für dieses Element- HTML-Bilder
- Leitfaden zu Bilddateitypen und -formaten
- Reaktionsfähige Bilder