<img>: Das Bildeinbettungselement

<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 ist erforderlich und enthält den Pfad zu dem Bild, das Sie einbetten möchten.
• Das alt-Attribut enthält einen textlichen Ersatz für das Bild, der obligatorisch und ungemein nützlich für die Barrierefreiheit ist — Bildschirmlesegeräte lesen den Attributwert vor, damit ihre Benutzer verstehen, was das Bild bedeutet. Alternativer Text wird auch angezeigt, wenn das Bild aus irgendeinem Grund nicht geladen werden kann: zum Beispiel bei Netzwerkfehlern, Inhaltsblockierung oder Verlinkungsfehlern.

Es gibt viele andere Attribute, um verschiedene Zwecke zu erreichen:

• Referrer/CORS-Kontrolle für Sicherheit und Datenschutz: siehe crossorigin und referrerpolicy.
• Verwenden Sie sowohl width als auch height, um die intrinsische Größe des Bildes festzulegen, damit es Platz einnimmt, bevor es lädt, um Layoutverschiebungen zu mindern.
• Hinweise auf responsive Bilder mit sizes und srcset (siehe auch das <picture>-Element und unser Leitfaden zu responsiven Bildern).

Der HTML-Standard gibt nicht an, welche Bildformate unterstützt werden, sodass User Agents unterschiedliche Formate unterstützen können.

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 leistungsfähig)
• 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 am beliebtesten).
• PNG (Portable Network Graphics) — Gute Wahl für verlustfreie Kompression von Standbildern (etwas 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 sowohl für Bilder als auch für animierte Bilder

Formate wie WebP und AVIF werden empfohlen, da sie sowohl für Standbilder als auch für animierte Bilder viel besser abschneiden als PNG, JPEG, GIF.

SVG bleibt das empfohlene Format für Bilder, die in verschiedenen Größen genau gezeichnet werden müssen.

Wenn beim Laden oder Rendern eines Bildes ein Fehler auftritt und ein onerror-Ereignishandler für das error-Ereignis gesetzt wurde, wird dieser Ereignishandler aufgerufen. Dies kann in mehreren Situationen passieren, einschließlich:

• Das src-Attribut ist leer ("") oder null.
• Die src- URL ist dieselbe wie die URL der Seite, auf der sich der Benutzer derzeit befindet.
• Das Bild ist in irgendeiner Weise beschädigt, was verhindert, dass es geladen wird.
• Die Metadaten des Bildes sind so beschädigt, dass es nicht möglich ist, seine Abmessungen abzurufen, und keine Abmessungen wurden in den Attributen des <img>-Elements angegeben.
• Das Bild ist in einem Format, das nicht von dem User Agent unterstützt wird.

Dieses Element beinhaltet die globalen Attribute.

alt

Definiert Text, der das Bild auf der Seite ersetzen kann.

Hinweis: Browser zeigen Bilder nicht immer an. Es gibt eine Reihe von Situationen, in denen ein Browser möglicherweise keine Bilder anzeigt, wie zum Beispiel:

• Nicht-visuelle Browser (wie die von Menschen mit Sehbehinderungen)
• Der Benutzer wählt, 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 wenn möglich einen nützlichen Wert für alt angeben.

Setzen Sie dieses Attribut auf einen leeren String (alt=""), um anzugeben, dass dieses Bild kein wesentlicher Teil des Inhalts ist (es ist Dekoration oder ein Tracking-Pixel), und nicht-visuelle Browser es aus dem Rendern auslassen können. Visuelle Browser werden auch das kaputte Bildsymbol ausblenden, wenn das alt-Attribut leer ist und das Bild nicht angezeigt werden konnte.

Dieses Attribut wird auch beim Kopieren und Einfügen des Bildes in Text oder beim Speichern eines verlinkten Bildes als Lesezeichen verwendet.

attributionsrc Experimentell

Gibt an, dass der Browser einen Attribution-Reporting-Eligible-Header mit der Bildanforderung senden soll.

Auf der Serverseite wird dies verwendet, um das Senden eines Attribution-Reporting-Register-Source- oder Attribution-Reporting-Register-Trigger-Headers in der Antwort auszulösen, um eine bildbasierte Attributionsquelle oder einen Attribution-Auslöser zu registrieren. Welcher Antwortheader zurückgesendet werden soll, hängt vom Wert des Attribution-Reporting-Eligible-Headers ab, der die Registrierung ausgelöst hat.

Das entsprechende Quellen- oder Auslöserereignis wird ausgelöst, sobald der Browser die Antwort mit der Bilddatei erhält.

Hinweis: Weitere Informationen finden Sie in der Attribution Reporting API.

Es gibt zwei Versionen dieses Attributs, die Sie einstellen können:

• Boolean, d.h. nur der Name attributionsrc. Dies gibt an, dass Sie möchten, dass der Attribution-Reporting-Eligible-Header an denselben Server gesendet wird, auf den das src-Attribut zeigt. Dies ist in Ordnung, wenn Sie die Registrierung der Attributionsquelle oder des Auslösers auf demselben Server handhaben. Bei der Registrierung eines Attribution-Auslösers ist diese Eigenschaft optional, und es wird ein boolescher Wert verwendet, wenn sie weggelassen wird.
• Wert, der eine oder mehrere URLs enthält, zum Beispiel:

htmlCopy to Clipboard

<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 liegt, den Sie steuern, oder wenn Sie die Registrierung der Attributionsquelle auf einem anderen Server handhaben möchten. In diesem Fall können Sie eine oder mehrere URLs als Wert von attributionsrc angeben. Wenn die Ressource angefordert wird, wird der Attribution-Reporting-Eligible-Header zusätzlich zum Ursprungsserver an die in attributionSrc angegebenen URL(s) gesendet. Diese URLs können dann mit einem Attribution-Reporting-Register-Source- oder Attribution-Reporting-Register-Trigger-Header antworten, um die Registrierung abzuschließen.

Hinweis: Das Angeben mehrerer URLs bedeutet, dass mehrere Attributionsquellen auf derselben Funktion registriert werden können. Sie könnten zum Beispiel unterschiedliche Kampagnen haben, deren Erfolg Sie messen möchten, was das Generieren unterschiedlicher Berichte über verschiedene Daten beinhaltet.

crossorigin

Gibt an, ob das Abrufen des Bildes mit einer CORS-Anfrage durchgeführt werden muss. Bilddaten von einem CORS-fähigen Bild, das von einer CORS-Anfrage zurückkommt, können im <canvas>-Element ohne Markierung als "kontaminiert" wiederverwendet werden.

Wenn das crossorigin-Attribut nicht angegeben ist, wird eine Nicht-CORS-Anfrage gesendet (ohne den Origin-Anforderungsheader), und der Browser markiert das Bild als kontaminiert und beschränkt den Zugriff auf seine Bilddaten, sodass seine Verwendung in <canvas>-Elementen verhindert wird.

Wenn das crossorigin-Attribut ist angegeben, wird eine CORS-Anfrage gesendet (mit dem Origin-Anforderungsheader); wenn jedoch der Server nicht optiert, der Ursprungsseite den quellübergreifenden Zugriff auf die Bilddaten zu erlauben (indem er keinen Access-Control-Allow-Origin-Antwortheader sendet oder die Ursprungsseite nicht in einem gesendeten Access-Control-Allow-Origin-Antwortheader einbezieht), dann blockiert der Browser das Laden des Bildes und protokolliert einen CORS-Fehler in der Entwicklertools-Konsole.

Zulässige Werte:

anonymous

Eine CORS-Anfrage wird ohne Anmeldedaten gesendet (d.h. keine Cookies, X.509-Zertifikate oder Authorization-Anforderungsheader).

use-credentials

Die CORS-Anfrage wird mit allen Anmeldedaten gesendet (d.h. Cookies, X.509-Zertifikaten und dem Authorization-Anforderungsheader). Wenn der Server nicht optiert, Anmeldedaten mit der Ursprungsseite zu teilen (indem er den Access-Control-Allow-Credentials: true-Antwortheader sendet), dann markiert der Browser das Bild als kontaminiert und beschränkt den Zugriff auf seine Bilddaten.

Wenn das Attribut einen ungültigen Wert hat, behandeln Browser es so, als wäre der Wert anonymous verwendet worden. Weitere Informationen finden Sie unter CORS-Einstellung-Attribute.

decoding

Dieses Attribut gibt dem Browser einen Hinweis darauf, ob die Bilddecodierung zusammen mit dem Rendern der anderen DOM-Inhalte in einem einzigen Darstellungsschritt erfolgen soll, der korrekter aussieht (sync), oder ob zuerst die anderen DOM-Inhalte gerendert und präsentiert werden sollen, und dann das Bild dekodiert und später präsentiert wird (async). In der Praxis bedeutet async, dass das nächste Repaint nicht darauf wartet, dass das Bild dekodiert wird.

Es ist oft schwierig, einen spürbaren Effekt beim Einsatz von decoding auf statischen <img>-Elementen zu erkennen. 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 verarbeitet werden, sodass die "Synchronisation" von Inhaltsaktualisierungen weniger offensichtlich ist. Dennoch kann die Blockierung des Renderns, während die Decodierung erfolgt, zwar oft sehr klein, doch messbar sein — auch wenn es schwierig ist, es mit dem menschlichen Auge zu beobachten. Siehe Was macht das Bilddecodierungs-Attribut tatsächlich? für eine detaillierte Analyse (tunetheweb.com, 2023).

Die Verwendung verschiedener decoding-Typen kann zu deutlicheren Unterschieden führen, wenn <img>-Elemente dynamisch über JavaScript in das DOM eingefügt werden — siehe HTMLImageElement.decoding für weitere Details.

Zulässige Werte:

sync

Dekodieren Sie das Bild synchron zusammen mit dem Rendern der anderen DOM-Inhalte und präsentieren Sie alles zusammen.

async

Dekodieren Sie das Bild asynchron, nach dem Rendern und Darstellen der anderen DOM-Inhalte.

auto

Keine Präferenz für den Decodierungsmodus; der Browser entscheidet, was am besten für den Benutzer ist. Dies ist der Standardwert.

elementtiming

Markiert das Bild zur Beobachtung durch die PerformanceElementTiming-API. Der angegebene Wert wird zum Bezeichner für das beobachtete Bildelement. Siehe auch die Seite zum elementtiming-Attribut.

fetchpriority

Gibt einen Hinweis auf die relative Priorität des Laden des Bildes. Zulässige Werte:

high

Laden des Bildes mit hoher Priorität im Vergleich zu anderen Bildern.

low

Laden des Bildes mit niedriger Priorität im Vergleich zu anderen Bildern.

auto

Keine Präferenz für die Lade-Priorität setzen. 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 Pixel. Muss eine ganze Zahl ohne Einheit sein.

Hinweis: Die Angabe von height und width 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 benötigt wird, um das Bild anzuzeigen, wodurch eine Layoutverschiebung, wenn das Bild heruntergeladen und auf den Bildschirm gemalt wird, verringert oder sogar verhindert wird. Die Verringerung der Layoutverschiebung ist ein wesentlicher Bestandteil einer guten Benutzererfahrung und Web-Performance.

ismap

Dieses Boolean-Attribut zeigt an, dass das Bild Teil einer serverseitigen Karte ist. Wenn ja, werden die Koordinaten, an denen der Benutzer auf das Bild geklickt hat, an den Server gesendet.

Hinweis: Dieses Attribut ist nur zulässig, wenn das <img>-Element ein Nachkomme eines <a>-Elements mit einem gültigen href-Attribut ist. Dies gibt Benutzern ohne Zeigegeräte ein Rückfallziel.

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 Bereich befindet (dies ist der Standardwert).

lazy

Das Laden des Bildes wird aufgeschoben, bis es eine berechnete Entfernung vom Sichtbereich erreicht, wie vom Browser definiert. Die Absicht ist, die Netzwerk- und Speicherbandbreite zu vermeiden, die benötigt wird, um das Bild zu handhaben, bis es mit ziemlicher Sicherheit benötigt wird. Dies verbessert im Allgemeinen die Leistung der Inhalte in den meisten typischen Anwendungsfällen.

Hinweis: Das Laden wird nur dann aufgeschoben, wenn JavaScript aktiviert ist. Dies dient dem Anti-Tracking, weil, wenn ein Benutzeragent Lazy Loading unterstützen würde, wenn Skripte deaktiviert sind, es immer noch möglich wäre, die ungefähre Scrollposition eines Benutzers während einer Sitzung zu verfolgen, indem strategisch Bilder im Markup einer Seite platziert werden, sodass ein Server nachverfolgen kann, wie viele Bilder angefordert werden und wann.

Hinweis: Bilder mit loading auf lazy gesetzt werden niemals geladen, wenn sie keinen sichtbaren Teil eines Elements schneiden, selbst wenn sie laden, würde dies ändern, da ungeladene Bilder eine width und height von 0 haben. Die Angabe von width und height auf Lazy-Loaded-Bildern behebt dieses Problem und ist eine bewährte Methode, die von der Spezifikation empfohlen wird. Dies hilft auch, Layoutverschiebungen zu verhindern.

referrerpolicy

Ein String, der angibt, welchen Referrer beim Abrufen der Ressource verwendet werden soll:

• no-referrer: Der Referer-Header wird nicht gesendet.
• no-referrer-when-downgrade: Der Referer-Header wird nicht an Origins ohne TLS (HTTPS) gesendet.
• origin: Der gesendete Referrer ist auf den Ursprung der verweisenden Seite beschränkt: deren Schema, Host und Port.
• origin-when-cross-origin: Der an andere Ursprünge gesendete Referrer ist auf das Schema, den Host und den Port beschränkt. Navigationen im gleichen Ursprung enthalten weiterhin den Pfad.
• same-origin: Ein Referrer wird für gleicher Ursprung gesendet, aber cross-origin Anfragen enthalten keine Referrer-Informationen.
• strict-origin: Nur der Ursprung des Dokuments wird als Referrer gesendet, wenn das Sicherheitslevel des Protokolls gleich bleibt (HTTPS→HTTPS), jedoch nicht an ein weniger sicheres Ziel (HTTPS→HTTP).
• strict-origin-when-cross-origin (Standard): Sende eine vollständige URL bei der Durchführung einer gleich-origin Anfrage, sende nur den Ursprung, wenn das Sicherheitslevel des Protokolls gleich bleibt (HTTPS→HTTPS), und sende keinen Header an ein weniger sicheres Ziel (HTTPS→HTTP).
• unsafe-url: Der Referrer umfasst den Ursprung und den Pfad (jedoch 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 durchsickern lässt.

sizes

Ein oder mehrere durch Kommas getrennte Strings, die eine Menge von Quelldimensionen angeben. Jede Quelldimension besteht aus:

1. Einer Medienbedingung. Diese muss für das letzte Element in der Liste weggelassen werden.
2. Einem Quelldimension-Wert.

Medienbedingungen beschreiben Eigenschaften des Viewports, nicht des Bildes. Zum Beispiel schlägt (max-height: 500px) 1000px vor, eine Quelle von 1000px Breite zu verwenden, wenn der Viewport nicht höher als 500px ist. Da ein Quelldimension-Deskriptor verwendet wird, um die Breite anzugeben, die für das Bild während des Layouts der Seite verwendet werden soll, basiert die Medienbedingung typischerweise (aber nicht unbedingt) auf den Breiteninformationen.

Quelldimension-Werte spezifizieren die beabsichtigte Anzeigegröße des Bildes. Benutzeragenten verwenden die aktuelle Quelldimension, um eine der durch das srcset-Attribut bereitgestellten Quellen auszuwählen, wenn diese Quellen mit Breiten- (w) Deskriptoren beschrieben werden. Die ausgewählte Quelldimension beeinflusst die intrinsische Dimension des Bildes (die Anzeigengröße des Bildes, wenn keine CSS-Stilierung angewendet wird). Wenn das srcset-Attribut fehlt oder keine Werte mit einem Breiten-Deskriptor enthält, hat das sizes-Attribut keine Wirkung.

Ein Quelldimension-Wert kann jede nicht-negative Länge sein. Es darf keine CSS-Funktionen außer den Mathe-Funktionen verwenden. Einheiten werden in derselben Weise interpretiert wie Medienabfragen, was bedeutet, dass alle relativen Längeneinheiten relativ zur Dokumentwurzel statt zum <img>-Element sind, sodass ein em-Wert relativ zur Schriftgröße der Wurzel ist, statt zur Schriftgröße des Bildes. Prozentwerte sind nicht erlaubt.

Zusätzlich können Sie den Wert auto verwenden, um die gesamte Liste der Größen oder den ersten Eintrag in der Liste zu ersetzen. Es ist nur gültig, wenn es in Kombination mit loading="lazy" verwendet wird, und löst sich in die konkrete Größe des Bildes auf.

src

Die Bild-URL. Obligatorisch für das <img>-Element. Auf Browsern, die srcset unterstützen, wird src wie ein Kandidatenbild mit einem Pixeldichte-Deskriptor 1x behandelt, es sei denn, ein Bild mit diesem Pixeldichte-Deskriptor ist bereits in srcset definiert, oder srcset enthält w-Deskriptoren.

srcset

Ein oder mehrere durch Kommas getrennte Strings, die mögliche Bildquellen für den Benutzeragenten zur Verwendung angeben. Jeder String besteht aus:

1. Einer URL zu einem Bild

2. Optional, Leerraum gefolgt von einem der folgenden:

   • Einem Breitendeskriptor (eine positive ganze Zahl direkt gefolgt von w). Der Breitendeskriptor wird durch die in sizes angegebene Quelldimension dividiert, um die effektive Pixeldichte zu berechnen.
   • Einem Pixeldichtedeskriptor (eine positive Gleitkommazahl direkt gefolgt von x).

Wenn kein Deskriptor angegeben ist, wird der Quelle der Standarddeskriptor von 1x zugewiesen.

Es ist nicht korrekt, Breitendeskriptoren und Pixeldichtedeskriptoren im gleichen srcset-Attribut zu mischen. Doppelte Deskriptoren (zum Beispiel, zwei Quellen im gleichen srcset, die beide mit 2x beschrieben sind) sind ebenfalls ungültig.

Wenn das srcset-Attribut Breitendeskriptoren verwendet, muss auch das sizes-Attribut vorhanden sein, oder das srcset selbst wird ignoriert.

Der Benutzeragent wählt nach eigenem Ermessen eine der verfügbaren Quellen aus. Dies gibt ihnen erheblichen Spielraum, ihre Auswahl basierend auf Dingen wie Benutzerpräferenzen oder Bandbreiten-Bedingungen zu bearbeiten. Siehe unser Leitfaden zu responsiven Bildern 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 mit dem Element verbundenen Bildkarte.

Hinweis: Sie können dieses Attribut nicht verwenden, wenn das <img>-Element innerhalb eines <a>- oder <button>-Elements ist.

align Veraltet

Richtet das Bild mit seinem umgebenden Kontext aus. Verwenden Sie stattdessen die CSS-Eigenschaften float und/oder vertical-align. Zulässige Werte:

top

Entspricht vertical-align: top oder vertical-align: text-top

middle

Entspricht vertical-align: -moz-middle-with-baseline

bottom

Der Standardwert, entspricht vertical-align: unset oder vertical-align: initial

left

Entspricht float: left

right

Entspricht float: right

border Veraltet

Die Breite eines Rahmens um das Bild. Verwenden Sie stattdessen die CSS-Eigenschaft border.

hspace Veraltet

Die Anzahl der Pixel des Weißraums links und rechts vom Bild. Verwenden Sie stattdessen die CSS-Eigenschaft margin.

longdesc Veraltet

Ein Link zu einer detaillierteren Beschreibung des Bildes. Mögliche Werte sind eine URL oder eine id eines Elements.

Hinweis: Dieses Attribut wird in der neuesten W3C-Version, HTML 5.2, erwähnt, wurde jedoch aus dem HTML Living Standard des WHATWG entfernt. Es hat eine ungewisse Zukunft; Autoren sollten eine WAI-ARIA-Alternative wie aria-describedby oder aria-details verwenden.

name Veraltet

Ein Name für das Element. Verwenden Sie stattdessen das id-Attribut.

vspace Veraltet

Die Anzahl der Pixel des Weißraums über und unter dem Bild. Verwenden Sie stattdessen die CSS-Eigenschaft margin.

<img> ist ein ersetztes Element; es hat von Haus aus einen display-Wert von inline, aber seine Standardabmessungen sind 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 einstellen.

<img> hat keine Baseline, daher wird der untere Rand des Bildes auf der Textbasislinie platziert, wenn Bilder in einem Inline-Formatierungskontext mit vertical-align: baseline verwendet werden.

Sie können die Eigenschaft object-position verwenden, um das Bild innerhalb des Elementkästchens zu positionieren, und die Eigenschaft object-fit, um die Größenanpassung des Bildes innerhalb des Kastens anzupassen (zum Beispiel, ob das Bild den Kasten ausfüllen soll oder ob eine Einpassung erforderlich ist, auch wenn ein Zuschneiden erforderlich ist).

Abhängig von seinem Typ kann ein Bild eine intrinsische Breite und Höhe haben. Bei einigen Bildtypen sind jedoch intrinsische Abmessungen unnötig. SVG-Bilder haben zum Beispiel keine intrinsischen Dimensionen, wenn ihr Wurzel-<svg>-Element keine width- oder height-Angabe hat.

Der Wert des alt-Attributs sollte einen klaren und prägnanten Textersatz für den Bildinhalt liefern. Er sollte weder das Vorhandensein des Bildes selbst noch den Dateinamen des Bildes beschreiben. Wenn das alt-Attribut absichtlich weggelassen wird, weil das Bild kein textliches Äquivalent hat, sollten Sie andere Methoden in Betracht ziehen, um das darzustellen, was das Bild kommunizieren möchte.

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 dem vorausgegangenen textlichen Inhalt zu lesen, um festzustellen, ob er denselben Sinn wie das Bild vermittelt. Wenn zum Beispiel das Bild dem Satz "Auf meinen Reisen sah ich ein niedliches kleines Tierchen:" vorausging, könnte das Nicht tun-Beispiel von einem Bildschirmlesegerät vorgelesen werden als "Auf meinen Reisen sah ich ein niedliches kleines Tierchen: Bild", was keinen Sinn ergibt. Das Tun-Beispiel könnte von einem Bildschirmlesegerät vorgelesen werden als "Auf meinen Reisen sah ich ein niedliches kleines Tierchen: Ein Pinguin am Strand.", was Sinn ergibt.

Für Bilder, die eine Aktion auslösen, zum Beispiel Bilder, die innerhalb eines <a>- oder <button>-Elements verschachtelt sind, sollten Sie erwägen, die ausgelöste Aktion im Wert des alt-Attributs zu beschreiben. Zum Beispiel könnten Sie alt="nächste Seite" anstelle von alt="Pfeil rechts" schreiben. Sie könnten auch eine optional weitere Beschreibung in einem title-Attribut in Betracht ziehen; dies kann von Bildschirmlesegeräten auf Wunsch des Benutzers vorgelesen werden.

Wenn ein alt-Attribut nicht bei einem Bild vorhanden ist, können einige Bildschirmlesegeräte stattdessen den Dateinamen des Bildes ankündigen. Dies kann eine verwirrende Erfahrung sein, wenn der Dateiname nicht repräsentativ für den Bildinhalt ist.

• Ein Entscheidungsbaum für Alttexte • Bilder • WAI Web Accessibility Tutorials
• Alt-Texte: Der ultimative Leitfaden — Axess Lab
• Wie man großartige Alttexte entwirft: Eine Einführung | Deque
• MDN Verständnis der WCAG, Richtlinien 1.1 Erklärungen
• Verständnis des Erfolgskriteriums 1.1.1 | W3C Verständnis der WCAG 2.0

Aufgrund eines VoiceOver-Bugs kündigt VoiceOver SVG-Bilder nicht korrekt als Bilder an. Fügen Sie allen <img>-Elementen mit SVG-Quelldateien role="img" hinzu, um sicherzustellen, dass Hilfstechnologien SVG korrekt als Bildinhalt ankündigen.

<img src="mdn.svg" alt="MDN" role="img" />

Das title-Attribut ist kein akzeptabler Ersatz für das alt-Attribut. Vermeiden Sie es außerdem, den Wert des alt-Attributs in einem title-Attribut, das am selben Bild erklärt wird, zu duplizieren. Dies kann dazu führen, dass einige Bildschirmlesegeräte den gleichen Text zweimal ankündigen, was zu einer verwirrenden Erfahrung führt.

Das title-Attribut sollte auch nicht als zusätzliche Beschriftungsinformation verwendet werden, um eine Bildbeschreibung zu ergänzen. Wenn ein Bild eine Beschriftung benötigt, verwenden Sie die Elemente figure und figcaption.

Der Wert des title-Attributs wird dem Benutzer normalerweise als Tooltip präsentiert, der kurz nach dem Aufhören der Mausbewegung über dem Bild erscheint. Auch wenn es kann dem Benutzer zusätzliche Informationen bieten, sollten Sie nicht davon ausgehen, dass der Benutzer sie jemals sehen wird: Der Benutzer hat möglicherweise nur eine Tastatur oder einen Touchscreen. Wenn Sie Informationen haben, die für den Benutzer besonders wichtig oder wertvoll sind, präsentieren Sie sie inline mithilfe einer der oben genannten Methoden, anstatt title zu verwenden.

• Verwendung des HTML title-Attributs – aktualisiert | Die Paciello-Gruppe

Das folgende Beispiel bettet ein Bild in die Seite ein und enthält einen Alternativtext für die Barrierefreiheit.

<img src="favicon144.png" alt="MDN" />

Dieses Beispiel baut auf dem vorherigen auf und zeigt, wie man das Bild in einen Link verwandelt. Um dies zu tun, nisten Sie das <img>-Tag innerhalb des <a>-Elements ein. Sie sollten den Alternativtext so gestalten, dass er die Ressource beschreibt, auf die der Link zeigt, als würden Sie stattdessen einen Textlink verwenden.

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

In diesem Beispiel fügen wir ein srcset-Attribut mit einem Verweis auf eine hochauflösende Version des Logos hinzu; diese wird statt des im src-Attribut angegebenen Bildes auf hochauflösenden Geräten geladen. Das im src-Attribut referenzierte Bild wird in Benutzeragenten, die srcset unterstützen, als 1x-Kandidat gezählt.

<img src="favicon72.png" alt="MDN" srcset="favicon144.png 2x" />

Das src-Attribut wird in Benutzeragenten, die srcset unterstützen, wenn w-Deskriptoren enthalten sind, ignoriert. Wenn die Medienbedingung (max-width: 600px) übereinstimmt, wird das 200 Pixel breite Bild geladen (es ist das Bild, 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="(max-width: 600px) 200px, 50vw" />

Obwohl <img>-Elemente unverdächtige Zwecke haben, können sie ungewollte Konsequenzen für die Sicherheit und Privatsphäre der Benutzer haben. Siehe Referer-Header: Datenschutz- und Sicherheitsbedenken für mehr Informationen und Abhilfen.

• <picture>, <object>, und <embed> Elemente
• object-fit, object-position, image-orientation, image-rendering, und image-resolution: bildbezogene CSS-Eigenschaften.
• HTMLImageElement Schnittstelle für dieses Element
• HTML-Bilder
• Leitfaden zu Bilddateitypen und -formaten
• Responsive Bilder