<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 zum Bild, das Sie einbetten möchten.
• Das alt-Attribut enthält einen textuellen Ersatz für das Bild, was obligatorisch und äußerst 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 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 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 geladen wird, um Layoutverschiebungen zu verringern.
• Hinweise zu responsiven Bildern mit sizes und srcset (siehe auch das <picture>-Element und unser Leitfaden zu responsiven Bildern).

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

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 für Bilder und animierte Bilder aufgrund hoher Leistung.
• GIF (Graphics Interchange Format) — Gute Wahl für einfache Bilder und Animationen.
• JPEG (Joint Photographic Expert Group image) — Gute Wahl für verlustbehaftete Komprimierung von Standbildern (derzeit am beliebtesten).
• PNG (Portable Network Graphics) — Gute Wahl für verlustfreie Komprimierung von Standbildern (leicht bessere Qualität als JPEG).
• SVG (Scalable Vector Graphics) — Vektorbildformat. Verwenden Sie es für Bilder, die in unterschiedlichen Größen genau gezeichnet werden müssen.
• WebP (Web Picture format) — Ausgezeichnete Wahl für Bilder und animierte Bilder.

Formate wie WebP und AVIF werden empfohlen, da sie sowohl bei Stand- als auch animierten Bildern viel besser als PNG, JPEG, GIF abschneiden.

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

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 geschehen, unter anderem:

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

Dieses Element umfasst 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 Bilder möglicherweise nicht anzeigt, wie:

• Nicht-visuelle Browser (wie sie von Menschen mit Sehbehinderungen verwendet werden)
• Der Benutzer entscheidet sich, Bilder nicht anzuzeigen (Speicherung von Bandbreite, Datenschutzgründe)
• 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ür alt bereitstellen.

Setzen Sie dieses Attribut auf eine leere Zeichenfolge (alt=""), zeigt dies an, dass dieses Bild kein wesentlicher Teil des Inhalts ist (es handelt sich um Dekoration oder ein Analysetransparent) und dass nicht-visuelle Browser es möglicherweise von der Darstellung ausschließen. 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 verwendet, wenn das Bild in Text kopiert und eingefügt oder ein verknüpftes Bild in einem Lesezeichen gespeichert wird.

attributionsrc Experimentell

gibt an, dass Sie möchten, dass der Browser einen Attribution-Reporting-Eligible-Header mit der Bildanfrage sendet.

Serverseitig 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 Zuweisungsquelle oder einen Zuordnungsauslöser zu registrieren. Welcher Antwortheader zurückgesendet werden sollte, hängt vom Wert des Attribution-Reporting-Eligible-Headers ab, der die Registrierung ausgelöst hat.

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

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

Es gibt zwei Versionen dieses Attributs, die Sie festlegen 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 verweist. Dies ist in Ordnung, wenn Sie die Registrierung der Zuweisungsquelle oder des Auslösers auf demselben Server durchführen. Bei der Registrierung eines Zuweisungsauslösers 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, wenn die angeforderte Ressource nicht auf einem Server ist, den Sie steuern, oder Sie die Registrierung der Zuweisungsquelle auf einem anderen Server durchführen möchten. In diesem Fall können Sie eine oder mehrere URLs als Wert von attributionsrc angeben. Wenn die Ressourcenanforderung auftritt, wird der Attribution-Reporting-Eligible-Header an die in attributionSrc angegebenen URL(s) zusätzlich zum Ressourcenursprung gesendet. Diese URLs können dann mit einem geeigneten Attribution-Reporting-Register-Source- oder Attribution-Reporting-Register-Trigger-Header antworten, um die Registrierung abzuschließen.

Hinweis: Die Angabe mehrerer URLs bedeutet, dass auf der gleichen Funktion mehrere Zuweisungsquellen registriert werden können. Sie könnten z.B. verschiedene Kampagnen haben, deren Erfolg Sie messen möchten, wobei dabei Berichte über verschiedene Daten erstellt werden.

crossorigin

Gibt an, ob das Abrufen des Bildes unter Verwendung einer CORS-Anfrage erfolgen muss. Bilddaten von einem CORS-fähigen 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 ist, wird eine Nicht-CORS-Anfrage gesendet (ohne den Origin-Anforderungsheader), und der Browser markiert das Bild als beschädigt und beschränkt den Zugriff auf seine Bilddaten, was die Verwendung in <canvas>-Elementen verhindert.

Wenn das crossorigin-Attribut angegeben ist, wird eine CORS-Anfrage gesendet (mit dem Origin-Anforderungsheader); wenn der Server jedoch nicht bereit ist, Zugriff auf die Bilddaten über Ursprungsgrezen hinweg zuzulassen (indem kein Access-Control-Allow-Origin-Antwortheader gesendet wird oder das Origin-Site nicht in einem gesendeten Access-Control-Allow-Origin-Antwortheader enthalten ist), blockiert der Browser das Bild beim Laden und protokolliert einen CORS-Fehler in der Entwicklertools-Konsole.

Erlaubte Werte:

anonymous

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

use-credentials

Die CORS-Anfrage wird mit allen enthaltenen Anmeldeinformationen gesendet (d.h. Cookies, X.509-Zertifikate und der Authorization-Anforderungsheader). Wenn der Server keine Anmeldeinformationen mit der Origin-Site teilt (indem er den Antwortheader Access-Control-Allow-Credentials: true zurücksendet), markiert der Browser das Bild als beschädigt und beschränkt den Zugriff auf seine Bilddaten.

Wenn das Attribut einen ungültigen Wert hat, behandeln Browser es so, als ob der Wert anonymous verwendet wurde. Weitere Informationen finden Sie in CORS-Einstellungsattributen.

decoding

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

Es ist oft schwierig, einen merklichen Effekt bei statischen <img>-Elementen wahrzunehmen, wenn decoding verwendet wird. Sie werden wahrscheinlich zunächst als leere Bilder gerendert, während die Bilddateien abgerufen (entweder aus dem Netzwerk oder aus dem Cache) und dann unabhängig verarbeitet werden, sodass die "Synchronisation" der Inhaltsaktualisierungen weniger offensichtlich ist. Das Blockieren des Renderns, während die Decodierung erfolgt, kann messbar sein, selbst wenn es für das menschliche Auge schwer zu beobachten ist. Siehe Was macht das Bilddecodierungsattribut wirklich? für eine detailliertere Analyse (tunetheweb.com, 2023).

Unterschiedliche decoding-Typen können zu deutlicheren Unterschieden führen, wenn <img>-Elemente dynamisch über JavaScript in den DOM eingefügt werden — siehe HTMLImageElement.decoding für weitere Details.

Erlaubte Werte:

sync

Dekodiert das Bild synchron 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 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 zur Kennzeichnung des beobachteten Bildelements verwendet. Siehe auch die Seite zum elementtiming-Attribut.

fetchpriority

Liefert einen Hinweis auf die relative Priorität, wenn das Bild abgerufen wird. Erlaubte Werte:

high

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

low

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

auto

Setze keine Präferenz für die Abrufpriorität. Dies ist der Standard. 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 Pixeln. Muss eine Ganzzahl ohne Einheit sein.

Hinweis: Die Angabe von height und width ermöglicht es dem Browser, das Seitenverhältnis des Bildes vor dessen Laden zu berechnen. Dieses Seitenverhältnis wird verwendet, um den Platz zu reservieren, der für die Anzeige des Bildes benötigt wird, wodurch eine Layoutverschiebung reduziert oder sogar verhindert wird, wenn das Bild heruntergeladen und auf dem Bildschirm angezeigt wird. Die Reduzierung der Layoutverschiebung ist ein wesentlicher Bestandteil einer guten Benutzererfahrung und Web-Performance.

ismap

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

Hinweis: Dieses Attribut ist nur erlaubt, wenn das <img>-Element ein Nachkomme eines <a>-Elements mit einem gültigen href-Attribut ist. Dies bietet Benutzern 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 innerhalb des sichtbaren Viewports befindet oder nicht (dies ist der Standardwert).

lazy

Verschiebt das Laden des Bildes, bis es eine berechnete Entfernung vom Viewport erreicht hat, wie vom Browser definiert. Das Ziel besteht darin, das Netzwerk und den Speicherbedarf so weit wie möglich zu reduzieren, bis sichergestellt ist, dass das Bild benötigt wird. Dies verbessert normalerweise die Leistung des Inhalts in den meisten typischen Anwendungsfällen.

Hinweis: Das Laden wird nur verschoben, wenn JavaScript aktiviert ist. Dies ist eine Anti-Tracking-Maßnahme, da, wenn ein Benutzeragent das verzögerte Laden unterstützt, wenn Skripten deaktiviert sind, es immer noch möglich wäre, die ungefähre Scroll-Position des 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 mit dem auf lazy gesetzten loading-Attribut werden niemals geladen, wenn sie keine sichtbaren Teile eines Elements schneiden, selbst wenn das Laden dieser dazu führen würde, dass nicht geladene Bilder eine Breite und Höhe von 0 aufweisen. Die Angabe von width und height für verzögert geladene Bilder behebt dieses Problem und ist eine bewährte Praxis, wie in der Spezifikation empfohlen. Dies trägt auch dazu bei, Layoutverschiebungen zu verhindern.

referrerpolicy

Eine Zeichenfolge, die angibt, welchen Referrer beim Abrufen der Ressource zu verwenden ist:

• 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 beschränkt sich auf den Ursprung der referenzierenden Seite: ihr Schema, Host und Port.
• origin-when-cross-origin: Der an andere Ursprünge gesendete Referrer wird auf das Schema, den Host und den Port beschränkt. Bei Navigationen im gleichen Ursprung wird der Pfad weiterhin gesendet.
• same-origin: Ein Referrer wird für gleichen Ursprung gesendet, aber bei Anforderungen über Ursprungsgrenzen hinweg werden keine Referrer-Informationen enthalten sein.
• strict-origin: Senden Sie den Ursprung des Dokuments als Referrer, wenn das Protokoll-Sicherheitslevel gleich bleibt (HTTPS→HTTPS), senden Sie es aber nicht an weniger sichere Ziele (HTTPS→HTTP).
• strict-origin-when-cross-origin (Standard): Senden Sie bei einer Anforderung im gleichen Ursprung eine vollständige URL, bei der das Protokoll-Sicherheitslevel gleich bleibt (HTTPS→HTTPS), und senden Sie keinen Header an weniger sichere Ziele (HTTPS→HTTP).
• unsafe-url: Der Referrer enthält den Ursprung und den Pfad (aber nicht 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 weitergibt.

sizes

Eine oder mehrere durch Kommas getrennte Zeichenfolgen, die eine Reihe von Quellgrößen angeben. Jede Quellgröße besteht aus:

1. Einer Medienbedingung, die für den letzten Eintrag in der Liste weggelassen werden muss.
2. Einem Quellgrößenwert.

Medienbedingungen beschreiben Eigenschaften des Viewports und nicht des Bildes. Zum Beispiel besagt (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 eine Quellgrößenbeschreibung verwendet wird, um die Breite für das Bild während des Seitenlayouts anzugeben, basiert die Medienbedingung typischerweise (aber nicht notwendigerweise) auf der Breiten-Information.

Quellgrößenwerte geben die beabsichtigte Anzeigengröße des Bildes an. User Agents verwenden die aktuelle Quellgröße, um eine der Quellen auszuwählen, die durch das srcset-Attribut bereitgestellt werden, wenn diese Quellen mit Breitenbeschreibungen (w) beschrieben werden. Die ausgewählte Quellgröße beeinflusst die intrinsische Größe des Bildes (die Anzeigengröße des Bildes, wenn keine CSS-Stilgebung angewendet wird). Wenn das srcset-Attribut fehlt oder keine Werte mit einer Breitenbeschreibung enthält, hat das sizes-Attribut keine Auswirkungen.

Ein Quellgrößenwert kann eine beliebige nicht-negative Länge sein. Es darf keine CSS-Funktionen außer den mathematischen Funktionen verwenden. Einheiten werden auf die gleiche Weise interpretiert wie Medienabfragen, also sind alle relativen Längeneinheiten relativ zur Dokumentwurzel und nicht zum <img>-Element, d.h. ein em-Wert ist relativ zur Schriftgröße der Wurzel und nicht zur Schriftgröße des Bildes. Prozentwerte sind nicht erlaubt.

Außerdem können Sie den Wert auto verwenden, um die gesamte Liste von Größen oder den ersten Eintrag in der Liste zu ersetzen. Er ist nur gültig, wenn er mit loading="lazy" kombiniert wird und zur konkreten Größe des Bildes aufgelöst wird.

src

Die Bild-URL. Verpflichtend für das <img>-Element. In Browsern, die srcset unterstützen, wird src wie ein Kandidatenbild mit dem Pixeldichtewert 1x behandelt, es sei denn, ein Bild mit diesem Pixeldichtewert ist bereits in srcset definiert, oder es sei denn, srcset enthält w-Beschreibungen.

srcset

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

1. Einer URL zu einem Bild

2. Optional, Leerzeichen gefolgt von einem der folgenden:

   • Einer Breitenbeschreibung (ein positiver ganzzahliger Wert, direkt gefolgt von w). Die Breitenbeschreibung wird durch die im sizes-Attribut angegebene Quellgröße geteilt, um die effektive Pixeldichte zu berechnen.
   • Einer Pixeldichtebeschreibung (ein positiver, gleitender Punktwert, direkt gefolgt von x).

Wenn keine Beschreibung angegeben ist, wird die Quelle mit dem Standardwert von 1x zugewiesen.

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

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

Der User Agent wählt nach eigenem Ermessen eine der verfügbaren Quellen aus. Dies gibt ihm erheblichen Spielraum, seine Auswahl auf Benutzerpräferenzen oder Bandbreitenbedingungen zu stützen. Siehe unser Leitfaden zu responsiven Bildern für ein Beispiel.

width

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

usemap

Die partielle URL (beginnend mit #) einer Bildkarte, die mit dem Element verknüpft ist.

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

align Veraltet

Justiert das Bild mit seinem umgebenden Kontext. Verwenden Sie stattdessen die float- und/oder vertical-align-CSS-Eigenschaften. 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 einer Umrandung um das Bild. Verwenden Sie stattdessen die border-CSS-Eigenschaft.

hspace Veraltet

Die Anzahl der Pixel Leerraum 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 Living Standard der WHATWG 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 Leerraum oben und unten vom Bild. Verwenden Sie stattdessen die margin-CSS-Eigenschaft.

<img> ist ein ersetztes Element; Es hat einen display-Wert von inline standardmäßig, aber seine Standardabmessungen werden durch die eingebetteten Eigenschaften des Bildes definiert, als ob es inline-block wäre. Sie können Eigenschaften wie border/border-radius, padding/margin, width, height, etc. auf ein Bild anwenden.

<img> hat keine Grundlinie, deshalb wird das Bild, wenn es in einem Inline-Formatierungskontext mit vertical-align: baseline verwendet wird, auf der Textgrundlinie platziert.

Sie können die Eigenschaft object-position verwenden, um das Bild innerhalb des Elementkastens zu positionieren, und die Eigenschaft object-fit, um die Größe des Bildes innerhalb des Kastens zu justieren (zum Beispiel, ob das Bild in den Kasten passen soll oder ihn füllen soll, auch wenn dafür Zuschneiden erforderlich ist).

Abhängig von seinem Typ kann ein Bild eine intrinsische Breite und Höhe haben. Für einige Bildtypen sind jedoch intrinsische Abmessungen nicht erforderlich. SVG-Bilder haben zum Beispiel keine intrinsischen Abmessungen, wenn ihr Wurzel-<svg>-Element keine width- oder height-Angabe hat.

Der Wert eines alt-Attributs sollte einen klaren und prägnanten textersatz für den Inhalt des Bildes bieten. Es sollte nicht das Vorhandensein des Bildes selbst oder den Dateinamen des Bildes beschreiben. Wenn das alt-Attribut absichtlich weggelassen wird, weil das Bild kein Textäquivalent hat, sollten Sie alternative Methoden in Betracht ziehen, um darzustellen, was das Bild vermitteln möchte.

Vermeiden Sie

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

Machen Sie es so

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

Ein wichtiger Barrierefreiheitstest ist es, den Inhalt des alt-Attributs zusammen mit dem vorhergehenden Textinhalt zu lesen, um festzustellen, ob es dasselbe Bedeutung wie das Bild vermittelt. Zum Beispiel, wenn das Bild dem Satz "Auf meinen Reisen habe ich ein niedliches kleines Tier gesehen:" vorangestellt war, könnte das Vermeiden Sie-Beispiel von einem Bildschirmlesegerät als "Auf meinen Reisen habe ich ein niedliches kleines Tier gesehen: Bild" vorgelesen werden, was keinen Sinn ergibt. Das Machen Sie es so-Beispiel könnte von einem Bildschirmlesegerät als "Auf meinen Reisen habe ich ein niedliches kleines Tier gesehen: Ein Pinguin am Strand." vorgelesen werden, was sinnvoll ist.

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-Attributswert beschreiben. Zum Beispiel könnten Sie alt="nächste Seite" statt alt="Pfeil rechts" schreiben. Sie könnten auch in Betracht ziehen, eine optionale weitere Beschreibung in einem title-Attribut hinzuzufügen; dies kann von Bildschirmlesegeräten gelesen werden, falls vom Benutzer gewünscht wird.

Wenn das alt-Attribut bei einem Bild nicht vorhanden ist, können einige Bildschirmlesegeräte möglicherweise 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 alt-Entscheidungsbaum • Bilder • WAI-Web-Accessibility-Tutorials
• Alt-Texte: Der ultimative Leitfaden — Axess Lab
• Wie man großartige Alt-Texte erstellt: Eine Einführung | Deque
• MDN Verständnis von WCAG, Richtlinie 1.1: Erklärungen
• Verständnis des Erfolgs-Kriteriums 1.1.1 | W3C Verständnis von WCAG 2.0

Aufgrund eines VoiceOver-Fehlers 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 ist kein akzeptabler Ersatz für das alt-Attribut. Vermeiden Sie zudem, den alt-Attributswert in einem auf demselben Bild deklarierten title-Attribut zu duplizieren. Andernfalls könnten einige Bildschirmlesegeräte denselben Text zweimal ansagen, was eine verwirrende Erfahrung schafft.

Das title-Attribut sollte auch nicht als zusätzliche Untertitel-Information verwendet werden, um die alt-Beschreibung eines Bildes zu ergänzen. Wenn ein Bild eine Bildunterschrift benötigt, verwenden Sie die figure- und figcaption-Elemente.

Der Wert des title-Attributs wird dem Benutzer üblicherweise als Tooltip präsentiert, der kurze Zeit nach der Bewegung des Cursors über dem Bild erscheint. Auch wenn dies dem Benutzer zusätzliche Informationen liefern kann, sollten Sie nicht davon ausgehen, dass der Benutzer sie jemals sieht: Der Benutzer hat möglicherweise nur Tastatur oder Touchscreen. Wenn Sie Informationen haben, die für den Benutzer besonders wichtig oder wertvoll sind, präsentieren Sie diese inline unter Verwendung einer der oben genannten Methoden, anstatt title zu verwenden.

• Das HTML-title-Attribut verwenden – aktualisiert | Die Paciello Group

Das folgende Beispiel bettet ein Bild auf der Seite ein und enthält alternativen Text für die Barrierefreiheit.

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

Dieses Beispiel baut auf dem vorhergehenden auf und zeigt, wie man das Bild in einen Link verwandelt. Dazu 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>

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

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

Das src-Attribut wird in User Agents, die srcset unterstützen, ignoriert, wenn w-Beschreibungen enthalten sind. Wenn die (max-width: 600px)-Medienbedingung zutrifft, wird das 200 Pixel breite Bild geladen (es ist dasjenige, das 200px am nächsten kommt), sonst 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 unschuldige Verwendungen haben, können sie unerwünschte Konsequenzen für die Sicherheit und den Datenschutz der Benutzer haben. Weitere Informationen und Gegenmaßnahmen finden Sie unter Referer-Header: Datenschutz- und Sicherheitsbedenken.

• <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
• Leitfaden zu responsiven Bildern