<img>: Das Bild-Einbettungselement

<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 textuellen Ersatz für das Bild, was obligatorisch und unglaublich nützlich für die Barrierefreiheit ist — Bildschirmlesegeräte lesen den Attributwert ihren Benutzern vor, damit diese 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 Linkverfall.

Es gibt viele andere Attribute für verschiedene Zwecke:

• Kontrolle von Referrer/CORS 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 vor dem Laden Platz beanspruchen kann, um Layoutverschiebungen im Inhalt zu verringern.
• Hinweise für responsive Bilder mit sizes und srcset (siehe auch das <picture>-Element und unser Tutorial zu responsiven Bildern).

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

Die am häufigsten im Web verwendeten Bilddateiformate 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 Performance.
• 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. Verwendung für Bilder, die in verschiedenen Größen genau dargestellt 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 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 dargestellt werden müssen.

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 mehreren Situationen passieren, einschließlich:

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

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 verschiedene Situationen, in denen ein Browser möglicherweise keine Bilder 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 geben Sie nach Möglichkeit einen nützlichen Wert für alt an.

Wenn Sie dieses Attribut auf einen leeren String (alt="") setzen, zeigt dies an, dass dieses Bild nicht ein wesentlicher Bestandteil des Inhalts ist (es ist Dekoration oder ein Verfolgungspixel) und dass nicht visuelle Browser es von der Darstellung auslassen können. Visuelle Browser verstecken auch das Symbol für das kaputte Bild, wenn das alt-Attribut leer ist und das Bild nicht angezeigt werden konnte.

Dieses Attribut wird auch verwendet, wenn das Bild kopiert und eingefügt wird, oder wenn 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 oder Attribution-Reporting-Register-Trigger Headers in der Antwort auszulösen, um eine bildbasierte Attributionsquelle oder einen Attributionstrigger zu registrieren. Welcher Antwortheader zurückgesendet werden soll, hängt von dem Wert des Attribution-Reporting-Eligible Headers ab, der die Registrierung ausgelöst hat.

Das entsprechende Quellen- oder Triggereignis wird aktiviert, 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 attributionsrc-Name. 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 Triggers auf demselben Server handhaben. 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, beispielsweise:

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 kontrollieren, oder 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 Ressourcenanfrage erfolgt, wird der Attribution-Reporting-Eligible Header zusätzlich zum Ursprungsort der Ressource an die(s) in attributionSrc spezifizierten URL(s) gesendet. Diese URLs können dann mit einem Attribution-Reporting-Register-Source oder Attribution-Reporting-Register-Trigger Header wie angemessen antworten, um die Registrierung abzuschließen.

Hinweis: Die Angabe mehrerer URLs bedeutet, dass mehrere Attributionsquellen für dasselbe Feature registriert werden können. Sie könnten beispielsweise verschiedene Kampagnen haben, deren Erfolg Sie messen möchten, was die Erstellung verschiedener Berichte über unterschiedliche Daten beinhaltet.

crossorigin

Gibt an, ob das Abrufen des Bildes mit einer CORS-Anfrage erfolgen muss. Bilddaten eines CORS-aktivierten Bildes, das von einer CORS-Anfrage zurückgegeben wird, können im <canvas>-Element ohne Markierung als "verfälscht" wiederverwendet werden.

Wenn das crossorigin-Attribut nicht angegeben ist, wird eine Nicht-CORS-Anfrage gesendet (ohne den Origin-Request-Header), und der Browser markiert das Bild als verfälscht und schränkt den Zugriff auf seine Bilddaten ein, wodurch dessen Nutzung in <canvas>-Elementen verhindert wird.

Wenn das crossorigin-Attribut angegeben ist, wird eine CORS-Anfrage gesendet (mit dem Origin-Request-Header); jedoch, wenn der Server nicht in die gewährt Erlaubnis für die Quellsite, um auf die Bilddaten übergreifend zuzugreifen (indem er keinen Access-Control-Allow-Origin-Antwort-Header sendet oder die Ursprungsseite in irgendeinem Access-Control-Allow-Origin-Antwort-Header nicht einschließt, den er sendet), blockiert der Browser das Laden des Bildes und protokolliert einen CORS-Fehler in der Entwicklerkonsole.

Erlaubte Werte:

anonymous

Eine CORS-Anfrage wird ohne Anmeldeinformationen gesendet (d.h. ohne Cookies, X.509-Zertifikate oder Authorization-Request-Header).

use-credentials

Die CORS-Anfrage wird mit allen Anmeldeinformationen gesendet (d.h. Cookies, X.509-Zertifikate und der Authorization-Request-Header). Wenn der Server nicht zustimmt, Anmeldeinformationen mit der Ursprungsseite zu teilen (indem er den Access-Control-Allow-Credentials: true-Antwort-Header zurücksendet), markiert der Browser das Bild als verfälscht 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 wurde. Siehe CORS-Einstellungen Attribute für zusätzliche Informationen.

decoding

Dieses Attribut gibt dem Browser einen Hinweis darauf, ob er das Bild zusammen mit dem Rendern der anderen DOM-Inhalte in einem einzigen Präsentationsschritt, der "korrekter" aussieht, dekodieren soll (sync), oder ob er die anderen DOM-Inhalte zuerst rendern und präsentieren und das Bild später dekodieren und präsentieren soll (async). In der Praxis bedeutet async, dass das nächste Rendern nicht darauf wartet, dass das Bild dekodiert wird.

Es ist oft schwierig, einen wahrnehmbaren Effekt zu sehen, wenn decoding bei statischen <img>-Elementen verwendet wird. 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 gehandhabt werden, so dass die "Synchronisierung" der Inhaltsupdates weniger offensichtlich ist. Das Blockieren der Darstellung während des Dekodierens, das oft sehr klein ist, kann jedoch gemessen werden – selbst wenn es schwierig ist, es mit dem bloßen Auge zu beobachten. Siehe Was macht das Bilddekodierungsattribut eigentlich? für eine detailliertere Analyse (tunetheweb.com, 2023).

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

Erlaubte Werte:

sync

Dekodiert das Bild synchron zusammen mit dem Rendern der anderen DOM-Inhalte und präsentiert alles zusammen.

async

Dekodiert das Bild asynchron, nach dem Rendern und Präsentieren der anderen DOM-Inhalte.

auto

Keine Präferenz für den Dekodierungsmodus; der Browser entscheidet, was das Beste für den Benutzer ist. Dies ist der Standardwert.

elementtiming

Markiert das Bild zur Beobachtung durch die PerformanceElementTiming-API. Der angegebene Wert wird zu einem Kennzeichen für das beobachtete Bildelement. Siehe auch die elementtiming Attributseite.

fetchpriority

Gibt einen Hinweis auf die relative Priorität, die beim Abrufen des Bildes verwendet werden soll. Erlaubte Werte:

high

Ruft das Bild mit hoher Priorität im Vergleich zu anderen Bildern ab.

low

Ruft das Bild mit niedriger Priorität im Vergleich zu anderen Bildern ab.

auto

Setzt keine Präferenz für die Abrufpriorität. Dies ist der Standardwert. Er 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: Das Einfügen 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 benötigten Platz zur Anzeige des Bildes zu reservieren und das Layout zu reduzieren oder sogar zu verhindern, wenn das Bild heruntergeladen und auf den Bildschirm gezeichnet wird. Eine Reduzierung der Layoutverschiebung ist ein wesentlicher Bestandteil einer guten Benutzererfahrung und Web-Performance.

ismap

Dieses boolesche Attribut zeigt an, dass das Bild Teil einer serverseitigen Karte ist. Wenn dies der Fall ist, werden die Koordinaten, auf die der Benutzer im Bild geklickt hat, an den Server gesendet.

Hinweis: Dieses Attribut ist nur erlaubt, wenn das <img>-Element ein Nachfahre eines <a> Elements mit einem gültigen href-Attribut ist. Dies bietet Nutzern ohne Zeigegeräte ein alternatives Ziel.

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

lazy

Verzögert das Laden des Bildes, bis es eine berechnete Distanz vom Viewport erreicht, wie vom Browser definiert. Die Absicht ist, die Netz- und Speicherbandbreite, die zum Verarbeiten des Bildes erforderlich ist, zu vermeiden, bis es vernünftigerweise wahrscheinlich ist, dass es gebraucht wird. Dies verbessert im Allgemeinen die Leistung des Inhalts in den meisten typischen Anwendungsfällen.

Hinweis: Das Laden erfolgt nur, wenn JavaScript aktiviert ist. Dies ist eine Anti-Tracking-Maßnahme, da es, wenn ein Benutzeragent Lazy-Loading unterstützt, wenn das Skripting deaktiviert ist, 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, wodurch ein Server verfolgen kann, wie viele Bilder angefordert werden und wann.

Hinweis: Bilder mit loading auf lazy gesetzt werden nie geladen, wenn sie keinen sichtbaren Teil eines Elements überlappen, selbst wenn das Laden sie ändern würde, da nicht geladene Bilder eine width und height von 0 haben. Das Setzen von width und height auf lazy-geladene Bilder behebt dieses Problem und ist eine bewährte Methode, vom Standard empfohlen. 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 Ursprünge ohne TLS (HTTPS) gesendet.
• origin: Der gesendete Referrer wird auf den Ursprung der verweisenden Seite beschränkt: Schema, Host und Port.
• origin-when-cross-origin: Der an andere Ursprünge gesendete Referrer wird auf Schema, Host und Port beschränkt. Navigationen beim gleichen Ursprung enthalten weiterhin den Pfad.
• same-origin: Ein Referrer wird für den gleichen Ursprung gesendet, aber Cross-Origin-Anfragen enthalten keine Referrer-Informationen.
• strict-origin: Sendet den Ursprung des Dokuments als Referrer nur, wenn das Protokollsicherheitsniveau gleich bleibt (HTTPS→HTTPS), wird jedoch nicht an ein weniger sicheres Ziel (HTTPS→HTTP) gesendet.
• strict-origin-when-cross-origin (Standard): Sendet eine vollständige URL bei einer gleichursprünglichen Anfrage, sendet nur den Ursprung, wenn das Protokollsicherheitsniveau gleich bleibt (HTTPS→HTTPS), und sendet keinen Header an ein weniger sicheres Ziel (HTTPS→HTTP).
• unsafe-url: Der Referrer enthält den Ursprung und den Pfad (nicht jedoch das Fragment, das Passwort oder den Benutzernamen). 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 Zeichenfolgen, die eine Menge von Quellenangaben angeben. Jede Quellenangabe besteht aus:

1. Eine Medienbedingung. Diese muss für das letzte Element in der Liste weggelassen werden.
2. Ein Quellenwert.

Medienbedingungen beschreiben Eigenschaften des Viewports, nicht des Bildes. Zum Beispiel bedeutet (max-height: 500px) 1000px, dass eine Quelle mit einer Breite von 1000px verwendet werden soll, wenn der Viewport nicht höher als 500px ist. Da ein Quellenangabendeskriptor verwendet wird, um die Breite zu spezifizieren, die während des Layouts der Seite für das Bild verwendet werden soll, basiert die Medienbedingung typischerweise (aber nicht notwendigerweise) auf den Breiten Informationen.

Quellenwerte geben die beabsichtigte Anzeigebreite des Bildes an. User Agents verwenden die aktuelle Quellenangabe, um eine der durch das srcset-Attribut bereitgestellten Quellen auszuwählen, wenn diese Quellen mit Breitendeskriptoren beschrieben werden. Die ausgewählte Quellenangabe beeinflusst die intrinsische Größe des Bildes (die Anzeigebreite des Bildes, wenn keine CSS-Stilsetzung angewendet wird). Wenn das srcset-Attribut fehlt oder keine Werte mit einem Breitendeskriptor enthält, hat das sizes-Attribut keine Wirkung.

Ein Quellenwert kann jede nicht-negative Länge sein. Er darf keine CSS-Funktionen außer den mathematischen Funktionen verwenden. Einheiten werden auf die gleiche Weise wie Medienabfragen interpretiert, was bedeutet, dass alle relativen Längeneinheiten relativ zur Wurzel des Dokuments anstelle des <img>-Elements sind, so dass ein em-Wert relativ zur Wurzel-Schriftgröße ist und nicht zur Schriftgröße des Bildes. Prozentwerte sind nicht erlaubt.

Darüber hinaus 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 mit loading="lazy" kombiniert wird und auf die konkrete Größe des Bildes aufgelöst wird.

src

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

srcset

Eine oder mehrere durch Kommas getrennte Zeichenfolgen, die mögliche Bildquellen für den User Agent angeben. Jede Zeichenfolge besteht aus:

1. Einer URL zu einem Bild

2. Optional, einem Leerraum gefolgt von einem der folgenden:

   • Einem Breiten-Deskriptor (eine positive Ganzzahl gefolgt von w). Der Breiten-Deskriptor wird durch die angegebene Quellengröße im sizes-Attribut geteilt, um die effektive Pixeldichte zu berechnen.
   • Einem Pixeldichte-Deskriptor (eine positive Gleitkommazahl gefolgt von x).

Wenn kein Deskriptor angegeben ist, wird die Quelle standardmäßig als 1x-Deskriptor zugewiesen.

Es ist falsch, Breiten-Deskriptoren und Pixeldichte-Deskriptoren im selben srcset-Attribut zu mischen. Doppelte Deskriptoren (z.B. zwei Quellen im selben srcset, die beide mit 2x beschrieben werden) sind ebenfalls ungültig.

Wenn das srcset-Attribut Breiten-Deskriptoren verwendet, muss auch das sizes-Attribut vorhanden sein, sonst wird das srcset selbst ignoriert.

Der User Agent wählt nach eigenem Ermessen eine der verfügbaren Quellen aus. Dies gibt ihnen bedeutenden Spielraum, um ihre Auswahl basierend auf Benutzerpräferenzen oder Bandbreiten-Bedingungen zu optimieren. Siehe unser Tutorial zu responsiven Bildern für ein Beispiel.

width

Die intrinsische Breite des Bildes in Pixeln. Muss eine ganze Zahl ohne Einheit sein.

usemap

Die partielle URL (beginnend mit #) einer mit dem Element verknüpften Bildkarte.

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

align Veraltet

Richtet das Bild mit seinem umgebenden Kontext aus. Verwenden Sie die float und/oder vertical-align CSS-Eigenschaften anstelle dieses Attributs. Erlaubte 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 border CSS-Eigenschaft.

hspace Veraltet

Die Anzahl der Pixel 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](/de/docs/Web/HTML/Global_attributes/id).

Hinweis: Dieses Attribut wird in der neuesten W3C Version, HTML 5.2, erwähnt, wurde aber aus dem WHATWG HTML Living Standard entfernt. Es hat eine unsichere 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 oberhalb und unterhalb des Bildes. Verwenden Sie stattdessen die margin CSS-Eigenschaft.

<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 z.B. border/border-radius, padding/margin, width, height usw. auf ein Bild anwenden.

<img> hat keine Basislinie, daher wird das Bild in einem Inline-Formatierungskontext mit vertical-align: baseline am unteren Rand auf die Textbasislinie gesetzt.

Sie können die object-position-Eigenschaft verwenden, um das Bild innerhalb der Box des Elements zu positionieren, und die object-fit-Eigenschaft, um die Größe des Bildes innerhalb der Box anzupassen (zum Beispiel, ob das Bild in die Box passen oder es füllen soll, selbst wenn Clipping 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 erforderlich. Zum Beispiel haben SVG-Bilder keine intrinsischen Dimensionen, wenn ihr Wurzel-<svg>-Element keine width- oder height-Attribute gesetzt hat.

Der Wert eines alt-Attributs sollte einen klaren und prägnanten Textersatz für den Inhalt des Bildes bieten. Es sollte nicht die Anwesenheit des Bildes selbst oder den Dateinamen des Bildes beschreiben. Wenn das alt-Attribut absichtlich weggelassen wird, weil das Bild keinen textlichen Äquivalent hat, sollten Sie alternative Methoden in Betracht ziehen, um das zu präsentieren, was das Bild vermitteln soll.

Nicht tun

<img alt="image" src="penguin.jpg" />

Machen

<img alt="A Penguin on a beach." src="penguin.jpg" />

Ein wichtiger Barrierefreiheitstest besteht darin, den Inhalt des alt-Attributs zusammen mit dem vorhergehenden Textinhalt zu lesen, um festzustellen, ob es den gleichen Sinn wie das Bild vermittelt. Zum Beispiel könnte, wenn dem Bild der Satz "Auf meinen Reisen sah ich ein niedliches kleines Tier:" voranginge, das Nicht-tun-Beispiel von einem Bildschirmleser als "Auf meinen Reisen sah ich ein niedliches kleines Tier: Bild" gelesen werden, was keinen Sinn macht. Das Machen-Beispiel könnte von einem Bildschirmleser als "Auf meinen Reisen sah ich ein niedliches kleines Tier: Ein Pinguin am Strand." gelesen werden, was Sinn macht.

Für Bilder, die eine Aktion auslösen sollen, zum Beispiel Bilder, die in einem <a> oder <button> Element eingebettet sind, sollten Sie die ausgelöste Aktion im alt-Attributwert beschreiben. Zum Beispiel könnten Sie alt="nächste Seite" schreiben, anstatt alt="Pfeil rechts". Sie könnten auch in Betracht ziehen, eine optionale weitere Beschreibung in ein title-Attribut aufzunehmen; dies könnte von Bildschirmlesern gelesen werden, wenn dies vom Benutzer gewünscht wird.

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

• Ein alt Entscheidungsbaum • Bilder • WAI Web-Accessibility-Tutorials
• Alt-Texte: Der ultimative Leitfaden — Axess Lab
• Wie man großartige Alt-Texte entwirft: Eine Einführung | Deque
• MDN Verständnis von WCAG, Erläuterungen zu Richtlinie 1.1
• Verständnis des Erfolgskriteriums 1.1.1 | W3C Verständnis von 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 unterstützende Technologien SVGs 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 außerdem, den Wert des alt-Attributs im title-Attribut desselben Bildes zu duplizieren. Dadurch könnte es passieren, dass einige Bildschirmlesegeräte den gleichen Text zweimal ansagen, was zu einer verwirrenden Erfahrung führen kann.

Das title-Attribut sollte auch nicht als ergänzende Überschrifteninformation verwendet werden, um die alt-Beschreibung eines Bildes zu begleiten. Wenn ein Bild eine Bildunterschrift benötigt, verwenden Sie die figure und figcaption Elemente.

Der Wert des title-Attributs wird dem Benutzer normalerweise als Tooltip präsentiert, der kurz angezeigt wird, nachdem der Cursor aufgehört hat, sich über dem Bild zu bewegen. Während dies dem Benutzer zusätzliche Informationen geben kann, 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 besonders wichtig oder wertvoll für den Benutzer sind, präsentieren Sie sie inline mit einer der oben genannten Methoden, anstatt title zu verwenden.

• Die 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 Barrierefreiheit.

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

Dieses Beispiel baut auf dem vorherigen auf und zeigt, wie man das Bild zu einem Link macht. Dazu bettet man das <img>-Tag im <a>-Element ein. Der Alternativtext sollte die Ressource beschreiben, auf die der Link zeigt, 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>

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

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

Das src-Attribut wird in User Agents ignoriert, die srcset unterstützen, wenn w-Deskriptoren enthalten sind. Wenn die Medienbedingung (max-width: 600px) zutrifft, wird das 200 Pixel breite Bild geladen (es ist dasjenige, das 200px am nächsten kommt), 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" />

Obwohl <img>-Elemente unschuldig erscheinen, können sie unerwünschte Konsequenzen für die Sicherheit und den Datenschutz des Benutzers haben. Siehe Referer-Header: Datenschutz- und Sicherheitsbedenken für weitere Informationen und Maßnahmen.

• <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
• Bilddateityp und Format-Leitfaden
• Responsive Bilder