<img>: The Image Embed element
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>
HTML-Element bindet ein Bild in das Dokument ein.
Probieren Sie es aus
<img
class="fit-picture"
src="/shared-assets/images/examples/grapefruit-slice.jpg"
alt="Grapefruit slice atop a pile of other slices" />
.fit-picture {
width: 250px;
}
Das obige Beispiel zeigt die Verwendung des <img>
-Elements:
- Das
src
-Attribut enthält den Pfad zum Bild, das Sie einbinden möchten. Es ist nicht zwingend erforderlich, wenn das srcset-Attribut verfügbar ist. Mindestens eines der Attributesrc
odersrcset
muss jedoch angegeben werden. - Das
alt
-Attribut enthält einen textuellen Ersatz für das Bild, der zwingend erforderlich und ungemein nützlich für die Barrierefreiheit ist – Bildschirmlesegeräte lesen den Attributwert vor, damit die Nutzer wissen, was das Bild bedeutet. Der Alt-Text wird auch auf der Seite angezeigt, wenn das Bild aus irgendeinem Grund nicht geladen werden kann, zum Beispiel aufgrund von Netzwerkfehlern, Inhaltsblockierung oder Link-Verfall.
Es gibt viele weitere Attribute für verschiedene Zwecke:
- Referrer/CORS-Kontrolle für Sicherheit und Datenschutz: siehe
crossorigin
undreferrerpolicy
. - Verwenden Sie sowohl
width
als auchheight
, um die intrinsische Größe des Bildes festzulegen, damit es vor dem Laden den Platz einnimmt und Layoutverschiebungen vermindert werden. - Hinweise für Responsive Bilder mit
sizes
undsrcset
(siehe auch das<picture>
-Element und unser Leitfaden zu Responsive Bildern).
Unterstützte Bildformate
Der HTML-Standard listet nicht auf, welche Bildformate unterstützt werden sollen, sodass User Agents möglicherweise unterschiedliche Formate unterstützen.
Hinweis: Der Leitfaden zu Bild-Dateitypen und -formaten bietet umfassende Informationen über Bildformate und deren Unterstützung durch Webbrowser. Dieser Abschnitt ist nur eine Zusammenfassung!
Die am häufigsten im Web verwendeten Bilddateiformate sind:
- APNG (Animated Portable Network Graphics) — Eine gute Wahl für verlustfreie Animationssequenzen (GIF ist weniger leistungsfähig)
- AVIF (AV1 Image File Format) — Eine gute Wahl für sowohl Bilder als auch animierte Bilder aufgrund der hohen Leistung.
- GIF (Graphics Interchange Format) — Eine gute Wahl für einfache Bilder und Animationen.
- JPEG (Joint Photographic Expert Group image) — Eine gute Wahl für verlustbehaftete Kompression von Standbildern (derzeit das beliebteste Format).
- PNG (Portable Network Graphics) — Eine gute Wahl für verlustfreie Kompression von Standbildern (etwas bessere Qualität als JPEG).
- SVG (Scalable Vector Graphics) — Ein Vektorbildformat. Verwenden Sie es für Bilder, die in verschiedenen Größen genau wiedergegeben werden müssen.
- WebP (Web Picture format) — Hervorragend geeignet für sowohl Bilder als auch animierte Bilder.
Formate wie WebP und AVIF werden empfohlen, da sie viel besser als PNG, JPEG und GIF für sowohl Stand- als auch animierte Bilder performen.
SVG bleibt das empfohlene Format für Bilder, die in verschiedenen Größen genau dargestellt werden müssen.
Fehler beim Laden von Bildern
Wenn ein Fehler beim Laden oder Rendern eines Bildes auftritt und ein onerror
-Ereignishandler für das error
-Ereignis festgelegt wurde, wird dieser Ereignishandler aufgerufen. Dies kann in verschiedenen Situationen geschehen, unter anderem:
- Die
src
- odersrcset
-Attribute sind leer (""
) odernull
. - Die
src
URL ist dieselbe wie die URL der Seite, auf der der Benutzer sich aktuell befindet. - Das Bild ist in irgendeiner Weise beschädigt, die das Laden verhindert.
- Die Bild-Metadaten sind so beschädigt, dass es unmöglich ist, seine Abmessungen zu erfassen und keine Abmessungen im
<img>
-Element-Attribute angegeben wurden. - Das Bild ist in einem Format, das nicht vom User Agent unterstützt wird.
Attribute
Dieses Element enthält die globalen Attribute.
alt
-
Definiert einen Text, der das Bild auf der Seite ersetzen kann.
Hinweis: Browser zeigen nicht immer Bilder an. Es gibt eine Anzahl von Situationen, in denen ein Browser möglicherweise keine Bilder anzeigt, z. B.:
- Nicht-visuelle Browser (wie sie von Menschen mit Sehbehinderungen verwendet werden)
- Der Benutzer entscheidet sich, Bilder nicht 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
bereitstellen.Wenn Sie dieses Attribut auf einen leeren String (
alt=""
) setzen, zeigt dies an, dass dieses Bild kein wichtiger Bestandteil des Inhalts ist (es handelt sich um Dekoration oder ein Tracking-Pixel) und dass nicht-visuelle Browser es möglicherweise bei der Darstellung weglassen. Visuelle Browser verbergen auch das kaputte Bildsymbol, 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 verknüpftes Bild als Lesezeichen gespeichert wird.
attributionsrc
Experimentell-
Gibt an, dass Sie möchten, dass der Browser einen
Attribution-Reporting-Eligible
-Header zusammen mit der Bildanforderung 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 auf Bildern basierende Attributionsquelle oder einen Attributionstrigger entsprechend zu registrieren. Welcher Antwortheader zurückgesendet werden sollte, hängt vom Wert desAttribution-Reporting-Eligible
-Headers ab, der die Registrierung ausgelöst hat.Das entsprechende Quellen- oder Trigger-Ereignis wird ausgelöst, sobald der Browser die Antwort mit der Bilddatei erhält.
Hinweis: Siehe die Attribution Reporting API für weitere Details.
Es gibt zwei Versionen dieses Attributs, die Sie festlegen können:
- Boolean, d.h. nur der Name
attributionsrc
. Dies gibt an, dass Sie denAttribution-Reporting-Eligible
-Header an denselben Server gesendet haben möchten, auf den dassrc
-Attribut zeigt. Dies ist in Ordnung, wenn Sie die Registrierung der Attributionsquelle oder des Triggers auf demselben Server bearbeiten. Bei der Registrierung eines Attributionstriggers ist diese Eigenschaft optional, und ein boolescher Wert wird verwendet, wenn sie 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, in denen die angeforderte Ressource nicht auf einem Server unter Ihrer Kontrolle liegt oder wenn Sie die Registrierung der Attributionsquelle auf einem anderen Server abwickeln möchten. In diesem Fall können Sie eine oder mehrere URLs als Wert von
attributionsrc
angeben. Wenn die Ressourcenanforderung erfolgt, wird derAttribution-Reporting-Eligible
-Header an die inattributionSrc
angegebenen URL(s) gesendet sowie an den Ursprung der Ressource. Diese URLs können dann mit einem entsprechendenAttribution-Reporting-Register-Source
- oderAttribution-Reporting-Register-Trigger
-Header antworten, um die Registrierung abzuschließen.Hinweis: Die Angabe mehrerer URLs bedeutet, dass mehrere Attributionsquellen auf derselben Funktion registriert werden können. Sie könnten zum Beispiel verschiedene Kampagnen haben, deren Erfolg Sie messen möchten, was die Generierung verschiedener Berichte auf verschiedenen Daten umfasst.
- Boolean, d.h. nur der Name
crossorigin
-
Gibt an, ob das Abrufen des Bildes als CORS-Anfrage durchgeführt werden muss. Bilddaten von einem CORS-fähigen Bild, das aus einer CORS-Anfrage zurückgegeben wurde, können im
<canvas>
-Element wiederverwendet werden, ohne dass es als "kontaminiert" markiert wird.Wenn das
crossorigin
-Attribut nicht angegeben ist, wird eine Non-CORS-Anfrage gesendet (ohne denOrigin
-Anforderungsheader), und der Browser markiert das Bild als kontaminiert und schränkt den Zugriff auf seine Bilddaten ein, um deren Verwendung in<canvas>
-Elementen zu verhindern.Wenn das
crossorigin
-Attribut angegeben ist, wird eine CORS-Anfrage gesendet (mit demOrigin
-Anforderungsheader); aber wenn der Server nicht ausdrücklich die Erlaubnis gibt, auf die Bilddaten von der Ursprungssite zuzugreifen (indem er keinenAccess-Control-Allow-Origin
-Antwortheader sendet oder indem er den Ursprung der Site in keinemAccess-Control-Allow-Origin
-Antwortheader, den er sendet, einschließt), blockiert der Browser das Laden des Bildes und protokolliert einen CORS-Fehler in der Entwicklertools-Konsole.Erlaubte Werte:
anonymous
-
Eine CORS-Anfrage wird gesendet, wobei Anmeldeinformationen weggelassen werden (das heißt, keine Cookies, X.509-Zertifikate oder
Authorization
-Anforderungsheader). use-credentials
-
Die CORS-Anfrage wird mit allen Anmeldeinformationen gesendet (das heißt, Cookies, X.509-Zertifikate und der
Authorization
-Anforderungsheader). Wenn der Server nicht explizit die Freigabe von Anmeldeinformationen mit der Ursprungssite erlaubt (indem er denAccess-Control-Allow-Credentials: true
-Antwortheader sendet), markiert der Browser das Bild als kontaminiert und schränkt den Zugriff auf seine Bilddaten ein.
Wenn das Attribut einen ungültigen Wert hat, behandeln Browser es so, als ob der Wert
anonymous
verwendet worden wäre. Siehe CORS Einstellungen Attribute für zusätzliche Informationen. decoding
-
Dieses Attribut gibt dem Browser einen Hinweis darauf, ob er die Bilddecodierung zusammen mit der Darstellung der anderen DOM-Inhalte in einem einzigen Präsentationsschritt durchführen soll, der "korrekter" aussieht (
sync
), oder ob er die anderen DOM-Inhalte zuerst rendern und darstellen und das Bild später decodieren und darstellen soll (async
). In der Praxis bedeutetasync
, dass das nächste Rendern nicht darauf wartet, dass das Bild decodiert wird.Es ist oft schwer, eine spürbare Wirkung bei der Verwendung von
decoding
auf statischen<img>
-Elementen wahrzunehmen. Sie werden wahrscheinlich zunächst als leere Bilder gerendert, während die Bilddateien abgerufen werden (entweder aus dem Netzwerk oder aus dem Cache) und dann unabhängig behandelt werden, sodass die "Synchronisierung" von Inhaltsaktualisierungen weniger offensichtlich ist. Das Blockieren des Renderns, während die Decodierung erfolgt, kann jedoch messbar sein, auch wenn es schwer mit dem menschlichen Auge zu beobachten ist. Siehe What does the image decoding attribute actually do? für eine ausführliche Analyse (tunetheweb.com, 2023).Unterschiedliche
decoding
-Typen zu verwenden, kann zu deutlicheren Unterschieden führen, wenn<img>
-Elemente dynamisch über JavaScript in das DOM eingefügt werden – sieheHTMLImageElement.decoding
für weitere Einzelheiten.Erlaubte Werte:
sync
-
Decodiere das Bild synchron zusammen mit dem Rendern der anderen DOM-Inhalte und stelle alles zusammen dar.
async
-
Decodiere das Bild asynchron, nach dem Rendern und der Darstellung der anderen DOM-Inhalte.
auto
-
Keine Präferenz für den Decodierungsmodus; 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
-
Gibt einen Hinweis auf die relative Priorität, die beim Abrufen des Bildes verwendet werden soll. Erlaubte Werte:
high
-
Holen Sie sich das Bild mit hoher Priorität im Vergleich zu anderen Bildern.
low
-
Holen Sie sich das Bild mit niedriger Priorität im Vergleich zu anderen Bildern.
auto
-
Keine Präferenz für die Abrufpriorität festlegen. Dies ist der Standard. Es wird verwendet, wenn kein Wert oder ein ungültiger Wert gesetzt ist.
Siehe
HTMLImageElement.fetchPriority
für weitere Informationen. height
-
Die intrinsische Höhe des Bildes in Pixeln. Muss eine ganze Zahl ohne Einheit sein.
Hinweis: Das Einfügen von
height
undwidth
ermöglicht es dem Browser, das Seitenverhältnis des Bildes zu berechnen, bevor das Bild geladen wird. Dieses Seitenverhältnis wird verwendet, um den Platz zu reservieren, der zur Anzeige des Bildes benötigt wird, wodurch eine Layoutverschiebung verringert oder sogar verhindert wird, wenn das Bild heruntergeladen und auf dem Bildschirm gerendert wird. Die Reduzierung der Layoutverschiebung ist ein wichtiger Bestandteil einer guten Benutzererfahrung und Web-Performance. ismap
-
Dieses boolesche Attribut gibt an, dass das Bild Teil einer serverseitigen Map ist. In diesem Fall 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 es sich derzeit im sichtbaren Viewport befindet oder nicht (Dies ist der Standardwert).
lazy
-
Verzögert das Laden des Bildes, bis es eine berechnete Entfernung zum Viewport erreicht hat, wie es der Browser definiert. Das Ziel ist es, das Netzwerk- und Speicherbandbreite, die zum Verarbeiten des Bildes erforderlich sind, zu sparen, bis es relativ sicher ist, dass es gebraucht wird. Dies verbessert in den meisten typischen Anwendungsfällen die Leistung des Inhalts.
Hinweis: Das Laden wird nur verzögert, wenn JavaScript aktiviert ist. Dies ist eine Maßnahme gegen Tracking, denn wenn ein User Agent Lazy-Loading unterstützen würde, wenn das Skripting deaktiviert ist, wäre es immer noch möglich, die ungefähre Scroll-Position eines Benutzers während einer Sitzung zu verfolgen, indem strategisch Bilder im Markup einer Seite platziert werden, sodass ein Server verfolgen kann, wie viele Bilder angefordert werden und wann.
Hinweis: Bilder, bei denen
loading
auflazy
gesetzt ist, werden niemals geladen, wenn sie keinen sichtbaren Teil eines Elements schneiden, selbst wenn das Laden diese Änderung hervorrufen würde, da nicht geladene Bilder einewidth
undheight
von0
haben. Das Setzen vonwidth
undheight
bei faul geladenen Bildern behebt dieses Problem und ist eine bewährte Praxis, empfohlen durch die Spezifikation. Dies hilft auch, Layoutverschiebungen zu vermeiden. referrerpolicy
-
Ein String, der angibt, welchen Referrer beim Abrufen der Ressource verwendet werden soll:
no-referrer
: DerReferer
-Header wird nicht gesendet.no-referrer-when-downgrade
: DerReferer
-Header wird nicht zu Ursprungen ohne TLS (HTTPS) gesendet.origin
: Der gesendete Referrer wird auf den Ursprung der verweisenden Seite beschränkt sein: 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 sein. Navigationen am selben Ursprung enthalten dennoch den Pfad.same-origin
: Ein Referrer wird für gleicher Ursprung gesendet, aber Cross-Origin-Anfragen enthalten keine Referrer-Informationen.strict-origin
: Sendet nur den Ursprung des Dokuments als Referrer, wenn das Protokollsicherheitsniveau gleich bleibt (HTTPS→HTTPS), sendet ihn aber nicht an ein weniger sicheres Ziel (HTTPS→HTTP).strict-origin-when-cross-origin
(Standard): Sendet eine volle URL, wenn eine Anfrage gleicher Herkunft ausgeführt wird, sendet nur den Ursprung, wenn das Protokollsicherheitsniveau gleich bleibt (HTTPS→HTTPS), und sendet kein Header an ein weniger sicheres Ziel (HTTPS→HTTP).unsafe-url
: Der Referrer wird den Ursprung und den Pfad enthalten (aber nicht das Fragment, Passwort oder Benutzername). 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 eine Reihe von Quellen-Größen angeben. Jede Quellen-Größe besteht aus:
- Einer Medienbedingung. Diese muss für das letzte Element in der Liste weggelassen werden.
- Einem Quellen-Größenwert.
Medienbedingungen beschreiben Eigenschaften des Viewports, nicht des Bildes. Zum Beispiel schlägt
(height <= 500px) 1000px
vor, eine Quelle von 1000px Breite zu verwenden, wenn der Viewport nicht höher als 500px ist. Da ein Quellengrößenbeschreiber verwendet wird, um die während des Seitenlayouts zu verwendende Breite für das Bild zu bestimmen, basiert die Medienbedingung typischerweise (aber nicht notwendigerweise) auf der Breiten--Information.Quellen-Größenwerte geben die beabsichtigte Anzeigegröße des Bildes an. User Agents verwenden die aktuelle Quellengröße, um eine der vom
srcset
-Attribut bereitgestellten Quellen auszuwählen, wenn diese Quellen mit Breiten- (w
) Beschreibungen angegeben sind. Die ausgewählte Quellengröße beeinflusst die intrinsische Größe des Bildes (die Anzeigegröße des Bildes, wenn keine CSS-Stilierung angewendet wird). Wenn dassrcset
-Attribut fehlt oder keine Werte mit Breiten-Beschreibungen enthält, hat dassizes
-Attribut keine Auswirkung.Ein Quellengrößenwert kann jede nicht-negative Länge sein. Es dürfen keine CSS-Funktionen außer den mathematischen Funktionen verwendet werden. Einheiten werden auf die gleiche Weise wie Medienabfragen interpretiert, was bedeutet, dass alle relativen Längeneinheiten relativ zur Dokumentwurzel und nicht zum
<img>
-Element sind, sodass einem
-Wert relativ zur Grundschriftgröße und nicht zur Schriftgröße des Bildes ist. Prozentwerte sind nicht erlaubt.Das
sizes
-Attribut akzeptiert auch die folgenden Schlüsselwortwerte:auto
-
auto
kann die gesamte Liste der Größen oder das erste Element in der Liste ersetzen. Es ist nur gültig, wenn es mitloading="lazy"
kombiniert wird und wird auf die konkrete Größe des Bildes aufgelöst. Da die intrinsische Größe des Bildes noch nicht bekannt ist, solltenwidth
- undheight
-Attribute (oder CSS-Äquivalente) ebenfalls angegeben werden, um zu verhindern, dass der Browser eine Standardbreite von 300px annimmt.
src
-
Die Bild-URL. Pflichtfeld für das
<img>
-Element. In Browsern, diesrcset
unterstützen, wirdsrc
wie ein Kandidatenbild mit einem Pixeldichte-Beschreiber von1x
behandelt, es sei denn, ein Bild mit diesem Pixeldichte-Beschreiber ist bereits insrcset
definiert odersrcset
enthältw
-Beschreiber. srcset
-
Eine oder mehrere durch Kommas getrennte Strings, die mögliche Bildquellen für den User Agent angeben. Jeder String besteht aus:
- Einer URL zu einem Bild
- Optional, Leerraum gefolgt von einem der folgenden Elemente:
- Einem Breiten-Beschreiber (eine positive ganze Zahl, direkt gefolgt von
w
). Der Breitenbeschreiber wird durch die imsizes
-Attribut angegebene Quellengröße geteilt, um die effektive Pixeldichte zu berechnen. - Einem Pixeldichte-Beschreiber (eine positive Fließkommazahl, direkt gefolgt von
x
).
- Einem Breiten-Beschreiber (eine positive ganze Zahl, direkt gefolgt von
Wenn kein Beschreiber angegeben ist, wird der Quelle der Standardbeschreiber
1x
zugewiesen.Es ist falsch, Breitenbeschreiber und Pixeldichte-Beschreiber im selben
srcset
-Attribut zu mischen. Doppelte Beschreiber (zum Beispiel, zwei Quellen im selbensrcset
, die beide mit2x
beschrieben wurden) sind ebenfalls ungültig.Wenn das
srcset
-Attribut Breitenbeschreiber verwendet, muss auch dassizes
-Attribut vorhanden sein, andernfalls wird dassrcset
selbst ignoriert.Der User Agent wählt nach eigenem Ermessen eine der verfügbaren Quellen aus. Dies bietet ihnen großen Spielraum, ihre Auswahl basierend auf Dingen wie Benutzervorlieben oder Bandbreite-Bedingungen anzupassen. Siehe unser Leitfaden zu Responsive Bildern für ein Beispiel.
width
-
Die intrinsische Breite des Bildes in Pixeln. Muss eine ganze Zahl ohne Einheit sein.
usemap
-
Die teilweise URL (beginnend mit
#
) einer Bildkarte, die dem Element zugeordnet ist.
Veraltete Attribute
align
Veraltet-
Richtet das Bild im Zusammenhang mit dem umgebenden Kontext aus. Verwenden Sie stattdessen die
float
- und/odervertical-align
-Eigenschaften von CSS. Erlaubte Werte: border
Veraltet-
Die Breite eines Rahmens um das Bild. Verwenden Sie stattdessen die
border
-Eigenschaft von CSS. hspace
Veraltet-
Die Anzahl der Pixel des weißen Raums links und rechts vom Bild. Verwenden Sie stattdessen die
margin
-Eigenschaft von CSS. longdesc
Veraltet-
Ein Link zu einer detaillierteren Beschreibung des Bildes. Mögliche Werte sind eine URL oder die
id
eines Elements.Hinweis: Dieses Attribut wird in der HTML-Spezifikation als veraltet angesehen. Es hat eine unklare Zukunft; Autoren sollten eine WAI-ARIA-Alternative wie
aria-describedby
oderaria-details
verwenden. name
Veraltet-
Ein Name für das Element. Verwenden Sie stattdessen das
id
-Attribut. vspace
Veraltet-
Die Anzahl der Pixel des weißen Raums oberhalb und unterhalb des Bildes. Verwenden Sie stattdessen die
margin
-Eigenschaft von CSS.
Styling mit CSS
<img>
ist ein ersetztes Element; es hat standardmäßig einen display
-Wert von inline
, aber seine Standardabmessungen werden durch die eingebetteten intrinsischen Werte des Bildes definiert, als wäre es inline-block
. Sie können Eigenschaften wie border
/border-radius
, padding
/margin
, width
, height
, etc. auf einem Bild festlegen.
<img>
hat keine Basislinie, sodass, wenn Bilder in einem Inline-Formatierungskontext mit vertical-align: baseline
verwendet werden, der Boden des Bildes auf der Textbasislinie platziert wird.
Sie können die object-position
-Eigenschaft verwenden, um das Bild innerhalb der Elementbox zu positionieren, und die object-fit
-Eigenschaft, um die Größe des Bildes innerhalb der Box anzupassen (zum Beispiel, ob das Bild die Box ausfüllen oder anpassen soll, selbst wenn ein Ausschnitt erforderlich ist).
Abhängig von seiner Art kann ein Bild eine intrinsische Breite und Höhe haben. Für einige Bildtypen sind jedoch intrinsische Dimensionen unnötig. SVG-Bilder haben zum Beispiel keine intrinsischen Dimensionen, wenn das Stamm-<svg>
-Element keine festgelegte width
- oder height
-Eigenschaft hat.
Barrierefreiheit
Aussagekräftige alternative Beschreibungen verfassen
Der Wert eines alt
-Attributs sollte einen klaren und prägnanten Textersatz für den Inhalt des Bildes bereitstellen. Es sollte nicht das Vorhandensein des Bildes selbst oder den Dateinamen des Bildes beschreiben. Wenn das alt
-Attribut absichtlich weggelassen wird, weil das Bild keine textuelle Entsprechung hat, erwägen Sie alternative Methoden, um darzustellen, was das Bild zu vermitteln versucht.
Nicht
<img alt="image" src="penguin.jpg" />
So machen Sie es richtig
<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 es die gleiche Bedeutung wie das Bild vermittelt. Zum Beispiel, wenn das Bild mit dem Satz "Auf meinen Reisen sah ich ein niedliches kleines Tier:" eingeleitet wurde, könnte das Don't-Beispiel von einem Bildschirmlesegerät als "Auf meinen Reisen sah ich ein niedliches kleines Tier: Bild" vorgelesen werden, was keinen Sinn ergibt. Das Do-Beispiel könnte von einem Bildschirmlesegerät als "Auf meinen Reisen sah ich ein niedliches kleines Tier: Ein Pinguin am Strand." vorgelesen werden, was Sinn ergibt.
Für Bilder, die eine Aktion auslösen, z. B. Bilder, die in einem <a>
- oder <button>
-Element verschachtelt sind, erwägen Sie, die ausgelöste Aktion im alt
-Attributwert zu beschreiben. Zum Beispiel könnten Sie alt="nächste Seite"
anstelle von alt="Pfeil nach rechts"
schreiben. Sie könnten auch in Betracht ziehen, eine optionale weitere Beschreibung in einem title
-Attribut hinzuzufügen, die von Bildschirmlesegeräten auf Wunsch des Benutzers vorgelesen werden kann.
Wenn ein alt
-Attribut bei einem Bild nicht vorhanden ist, geben einige Bildschirmlesegeräte möglicherweise den Dateinamen des Bildes an. Dies kann eine verwirrende Erfahrung sein, wenn der Dateiname nicht repräsentativ für den Inhalt des Bildes ist.
SVG als Bild identifizieren
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 Hilfstechnologien 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 zudem, den Wert des alt
-Attributs im selben Bild in einem title
-Attribut zu duplizieren. Dies könnte dazu führen, dass einige Bildschirmlesegeräte denselben Text zweimal ankündigen, was eine verwirrende Erfahrung schafft.
Das title
-Attribut sollte auch nicht als ergänzende 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 in der Regel als Tooltip präsentiert, der erscheint, kurz nachdem der Cursor aufhört, sich über dem Bild zu bewegen. Während dies dem Benutzer zusätzliche Informationen geben kann, sollten Sie nicht davon ausgehen, dass der Benutzer ihn jemals sieht: der Benutzer könnte nur über eine Tastatur oder einen Touchscreen verfügen. Wenn Sie Informationen haben, die besonders wichtig oder wertvoll für den Benutzer sind, präsentieren Sie sie inline mit Hilfe 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 zur Barrierefreiheit.
<img src="/shared-assets/images/examples/favicon144.png" alt="MDN" />
Bildlink
Dieses Beispiel baut auf dem vorherigen auf und zeigt, wie man das Bild in einen Link umwandelt. Dazu muss das <img>
-Tag innerhalb des <a>
-Tags verschachtelt werden. Sie sollten den alternativen Text so gestalten, dass er die Ressource beschreibt, auf die der Link verweist, als ob Sie einen Textlink verwenden würden.
<a href="https://developer.mozilla.org">
<img
src="/shared-assets/images/examples/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 hinzu; dieses wird anstelle des im src
-Attributs angegebenen Bildes auf hochauflösenden Geräten geladen. Das im src
-Attribut angegebene Bild wird als 1x
-Kandidat in User Agents gezählt, die srcset
unterstützen.
<img
src="/shared-assets/images/examples/favicon72.png"
alt="MDN"
srcset="/shared-assets/images/examples/favicon144.png 2x" />
Verwendung der srcset- und sizes-Attribute
Das src
-Attribut wird in User Agents, die srcset
unterstützen, ignoriert, wenn w
-Beschreiber enthalten sind. Wenn die Medienbedingung (width <= 600px)
zutrifft, wird das 200 Pixel breite Bild geladen (es ist dasjenige, das 200px
am nächsten kommt), ansonsten 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="(width <= 600px) 200px, 50vw" />
Hinweis: Um die Größenänderung in Aktion zu sehen, view the example on a separate page, um tatsächlich den Inhaltsbereich zu ändern.
Sicherheits- und Datenschutzbedenken
Obwohl <img>
-Elemente harmlose Verwendungen haben, können sie unerwünschte Konsequenzen für die Sicherheit und den Datenschutz der Benutzer mit sich bringen. Weitere Informationen und Abhilfemaßnahmen finden Sie unter Referer-Header: Bedenken zu Sicherheit und Datenschutz.
Technische Zusammenfassung
Inhaltskategorien |
Fließender Inhalt,
Phraseninhalt,
eingebetteter Inhalt,
fühlbarer Inhalt. Wenn das Element ein usemap -Attribut hat, ist es ferner Bestandteil der interaktiven Inhaltskategorie.
|
---|---|
Erlaubter Inhalt | Kein; es ist ein leeres Element. |
Tag-Auslassung | Muss ein Start-Tag haben und darf keinen End-Tag haben. |
Erlaubte Eltern | Jedes Element, das eingebetteten Inhalt akzeptiert. |
Implizierte ARIA-Rolle |
|
Erlaubte ARIA-Rollen |
|
DOM-Schnittstelle | [`HTMLImageElement`](/de/docs/Web/API/HTMLImageElement) |
Spezifikationen
Specification |
---|
HTML # the-img-element |
Browser-Kompatibilität
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 Bild-Dateitypen und -formaten
- Responsive Bilder