<img>: Das Bildeinbettungselement

Das obige Beispiel zeigt die Verwendung des <img>-Elements:

• Das src-Attribut ist erforderlich und enthält den Pfad zum einzubettenden Bild.
• Das alt-Attribut enthält einen textlichen Ersatz für das Bild. Es ist obligatorisch und extrem nützlich für die Barrierefreiheit — Bildschirmleser lesen den Attributwert vor, damit Nutzer wissen, was das Bild bedeutet. Alternativtext wird auch auf der Seite angezeigt, wenn das Bild aus irgendeinem Grund nicht geladen werden kann: beispielsweise Netzwerkfehler, Inhaltsblockierung oder verfallene Links.

Es gibt viele weitere Attribute für verschiedene Zwecke:

• Kontrolle von Referrer/CORS für Sicherheit und Privatsphäre: siehe crossorigin und referrerpolicy.
• Verwenden Sie sowohl width als auch height, um die intrinsische Größe des Bildes festzulegen. Dies ermöglicht, Platz vor dem Laden des Bildes zu reservieren, um das Verschieben des Inhaltslayouts zu minimieren.
• Responsive Bildhinweise mit sizes und srcset (siehe auch das <picture> Element und unseren Leitfaden für responsive Bilder).

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 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 dargestellt 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 deutlich besser als PNG, JPEG, GIF sowohl für Standbilder als auch für animierte Bilder abschneiden.

SVG bleibt das empfohlene Format für Bilder, die in unterschiedlichen 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 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, die der Benutzer derzeit aufgerufen hat.
• Das Bild ist auf irgendeine Weise beschädigt, die verhindert, dass es geladen wird.
• Die Metadaten des Bildes sind so beschädigt, dass es unmöglich ist, seine Dimensionen abzurufen, und es wurden keine Dimensionen in den Attributen des <img>-Elements angegeben.
• Das Bild ist in einem von der Benutzer-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 nicht immer Bilder an. Es gibt eine Reihe von Situationen, in denen ein Browser möglicherweise keine Bilder anzeigt, wie zum Beispiel:

• Nicht-visuelle Browser (wie die, die von Menschen mit Sehbehinderungen verwendet werden)
• Der Benutzer entscheidet sich, keine Bilder anzuzeigen (um Bandbreite zu sparen, aus Datenschutzgründen)
• Das Bild ist ungültig oder ein nicht unterstützter Typ

In diesen Fällen kann der Browser das Bild durch den Text im alt-Attribut des Elements ersetzen. Aus diesen und anderen Gründen sollten Sie, wann immer möglich, einen nützlichen Wert für alt angeben.

Wenn Sie dieses Attribut auf eine leere Zeichenfolge (alt="") setzen, zeigt dies an, dass dieses Bild kein Schlüsselteil des Inhalts ist (es ist Dekoration oder ein Tracking-Pixel) und dass nicht-visuelle Browser es möglicherweise aus dem Rendern weglassen. Visuelle Browser verbergen das kaputte Bildsymbol ebenfalls, wenn das alt-Attribut leer ist und das Bild nicht angezeigt werden konnte.

Dieses Attribut wird auch verwendet, wenn Sie das Bild in Text kopieren und einfügen oder ein verlinktes Bild in einem Lesezeichen speichern.

attributionsrc Experimentell

Gibt an, dass Sie möchten, dass der Browser ein 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 vom Wert des Attribution-Reporting-Eligible Headers ab, der die Registrierung ausgelöst hat.

Das entsprechende Quell- oder Triggerereignis 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 attributionsrc Name. Dies gibt an, dass Sie möchten, dass der Attribution-Reporting-Eligible Header zum selben Server gesendet wird, auf den das src-Attribut verweist. Dies ist in Ordnung, wenn Sie die Registrierung der Attributionsquelle oder des Triggers auf demselben Server verwalten. Beim Registrieren eines Attributionstriggers ist diese Eigenschaft optional, und ein Boolean-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 ist, den Sie kontrollieren, oder Sie die Registrierung der Attributionsquelle auf einem anderen Server verwalten 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 zu den in attributionsrc angegebenen URL(s) zusätzlich zum Ressourcen-Ursprung 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: Durch die Angabe mehrerer URLs können mehrere Attributionsquellen auf derselben Funktion registriert werden. Sie könnten zum Beispiel verschiedene Kampagnen haben, deren Erfolg Sie messen möchten, indem Sie unterschiedliche Berichte über verschiedene Daten erstellen.

crossorigin

Gibt an, ob die Abrufung des Bildes mit einer CORS-Anfrage durchgeführt werden muss. Bilddaten aus einem CORS-fähigen Bild, das aus einer CORS-Anfrage zurückgegeben wird, können im <canvas> Element ohne Markierung als "verfälscht" wiederverwendet werden.

Ist das crossorigin-Attribut nicht angegeben, wird eine Nicht-CORS-Anfrage gesendet (ohne den Origin Anfrageheader) und der Browser markiert das Bild als verfälscht und beschränkt den Zugriff auf seine Bilddaten, wodurch die Verwendung im <canvas>-Element verhindert wird.

Ist das crossorigin-Attribut angegeben, wird eine CORS-Anfrage gesendet (mit dem Origin Anfrageheader); wenn der Server jedoch nicht zustimmt, den grenzüberschreitenden Zugriff auf die Bilddaten durch die Ursprungsseite zuzulassen (indem er keinen Access-Control-Allow-Origin Antwortheader sendet oder die Ursprungsseite nicht in einen gesendeten Access-Control-Allow-Origin Antwortheader einschließt), blockiert der Browser das Laden des Bildes und protokolliert einen CORS-Fehler in der Entwicklerconsole.

Erlaubte Werte:

anonymous

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

use-credentials

Die CORS-Anfrage wird mit allen Anmeldedaten gesendet (d.h. Cookies, X.509-Zertifikate und der Authorization Anfrageheader). Wenn der Server nicht zustimmt, Anmeldedaten mit der Ursprungsseite zu teilen (indem er den Access-Control-Allow-Credentials: true Antwortheader zurücksendet), markiert der Browser das Bild als verfälscht und beschränkt den Zugriff auf seine Bilddaten.

Wenn das Attribut einen ungültigen Wert hat, behandeln Browser es, als ob der Wert anonymous verwendet würde. Siehe CORS-Einstellungsattribute für zusätzliche Informationen.

decoding

Dieses Attribut gibt dem Browser einen Hinweis, ob das Bild zusammen mit dem Rendern des anderen DOM-Inhalts in einem einzigen Präsentationsschritt dekodiert werden soll, der "korrekter" aussieht (sync), oder ob zuerst der andere DOM-Inhalt gerendert und präsentiert und dann das Bild dekodiert und später präsentiert werden soll (async). In der Praxis bedeutet async, dass das nächste Paint nicht auf die Dekodierung des Bildes wartet.

Oft ist es schwierig, einen merklichen Effekt beim Verwenden 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 verarbeitet werden, sodass das "Synchronisieren" der Inhaltsupdates weniger sichtbar ist. Das Blockieren des Renderns während der Dekodierzeit kann jedoch, auch wenn es oft sehr gering ist, gemessen werden — auch wenn es mit dem menschlichen Auge schwer zu beobachten ist. Siehe Was macht das Bild-Dekodierungsattribut eigentlich? für eine detaillierte Analyse (tunetheweb.com, 2023).

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

Erlaubte Werte:

sync

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

async

Dekodiert das Bild asynchron, nach dem Rendern und der Präsentation des anderen DOM-Inhalts.

auto

Keine Präferenz für den Dekodierungsmodus; 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 zu einem Bezeichner für das beobachtete Bildelement. Siehe auch die Attributseite elementtiming.

fetchpriority

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

high

Holen Sie das Bild mit hoher Priorität im Vergleich zu anderen Bilder ab.

low

Holen Sie das Bild mit niedriger Priorität im Vergleich zu anderen Bilder ab.

auto

Setzen Sie keine Präferenz für die Abrufpriorität. Dies ist der Standardwert. Er wird verwendet, wenn kein Wert oder ein ungültiger Wert festgelegt ist.

Weitere Informationen finden Sie in der HTMLImageElement.fetchPriority.

height

Die intrinsische Höhe des Bildes in Pixel. Muss eine ganze Zahl ohne Einheit sein.

Hinweis: Das Einbeziehen 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 zu reservieren, um das Bild anzuzeigen, was das Layout-Verschieben beim Herunterladen und Darstellen des Bildes reduziert oder sogar verhindert. Die Verringerung des Layout-Verschiebens ist ein wesentlicher Bestandteil einer guten Benutzererfahrung und Webleistung.

ismap

Dieses Boolean-Attribut zeigt an, dass das Bild Teil einer serverseitigen Karte ist. In diesem Fall werden die Koordinaten, auf die der Benutzer im Bild geklickt hat, an den Server gesendet.

Hinweis: Dieses Attribut ist nur zulässig, wenn das <img>-Element ein Nachfahre eines <a>-Elements mit einem gültigen href-Attribut ist. Dies gibt 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 das Bild derzeit innerhalb des sichtbaren Viewports ist oder nicht (dies ist der Standardwert).

lazy

Verzögert das Laden des Bildes, bis es eine berechnete Entfernung vom Viewport erreicht, wie vom Browser definiert. Ziel ist es, den Netzwerk- und Speicheraufwand zu vermeiden, der für die Verarbeitung des Bildes erforderlich ist, bis vernünftigerweise sicher ist, dass es benötigt wird. Dies verbessert im Allgemeinen die Leistung der Inhalte in den meisten typischen Anwendungsfällen.

Hinweis: Das Laden wird nur verzögert, wenn JavaScript aktiviert ist. Dies ist eine Anti-Tracking-Maßnahme, da, wenn ein Benutzer-Agent Lazy Loading bei deaktivierter Skripterstellung unterstützen würde, es immer noch möglich wäre, die ungefähre Scroll-Position eines Benutzers während einer Sitzung nachzuverfolgen, indem Bilder strategisch in das Markup der Seite eingefügt werden, sodass 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 durchschneiden, 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-Loaded-Bilder behebt dieses Problem und ist eine bewährte Praxis, die von der Spezifikation empfohlen wird. Dies hilft auch, Layout-Verschiebungen 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: sein 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. Navigationen im selben Ursprung enthalten weiterhin den Pfad.
• same-origin: Ein Referrer wird für gleichartige Ursprünge gesendet, aber Anfragen an andere Ursprünge enthalten keine Referrer-Informationen.
• strict-origin: Nur den Ursprung des Dokuments als Referrer senden, wenn das Protokollsicherheitsniveau gleich bleibt (HTTPS→HTTPS), aber nicht an ein weniger sicheres Ziel (HTTPS→HTTP).
• strict-origin-when-cross-origin (Standardeinstellung): Eine vollständige URL senden, wenn eine Anfrage im selben Ursprung durchgeführt wird, nur den Ursprung senden, wenn das Protokollsicherheitsniveau gleich bleibt (HTTPS→HTTPS), und keinen Header an ein weniger sicheres Ziel senden (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 preisgibt.

sizes

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

1. Einer Medienbedingung. Diese muss für das letzte Element in der Liste ausgelassen werden.
2. Einem Quellgrößenwert.

Medienbedingungen beschreiben Eigenschaften des Viewports, nicht des Bildes. Zum Beispiel, (max-height: 500px) 1000px schlägt vor, eine Quelle von 1000px Breite zu verwenden, wenn der Viewport nicht höher als 500px ist.

Quellgrößenwerte geben die beabsichtigte Anzeigegröße des Bildes an. User Agents verwenden die aktuelle Quellgröße, um eine der durch das srcset-Attribut angegebenen Quellen auszuwählen, wenn diese Quellen mithilfe von Breiten (w) Deskriptoren beschrieben werden. Die ausgewählte Quellgröße beeinflusst die intrinsische Größe des Bildes (die Anzeigegröße des Bildes, wenn kein CSS-Styling angewendet wird). Wenn das srcset-Attribut fehlt oder keine Werte mit einem Breitendeskriptor enthält, hat das sizes-Attribut keine Auswirkungen.

src

Die Bild-URL. Verpflichtend für das <img>-Element. In Browsern, die srcset unterstützen, wird src wie ein Kandidatenbild mit einem Pixel-Dichte-Deskriptor 1x behandelt, es sei denn, ein Bild mit diesem Pixel-Dichte-Deskriptor ist bereits in srcset definiert, oder 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, Leerzeichen gefolgt von einem der folgenden:

   • Einem Breitendeskriptor (eine positive ganze Zahl, die direkt von w gefolgt wird). Der Breitendeskriptor wird durch die im sizes-Attribut angegebene Quellgröße geteilt, um die effektive Pixeldichte zu berechnen.
   • Einem Pixel-Dichte-Deskriptor (eine positive Gleitkommazahl, die direkt von x gefolgt wird).

Wird kein Deskriptor angegeben, wird der Quelle der Standarddeskriptor 1x zugewiesen.

Es ist falsch, Breitendeskriptoren und Pixel-Dichte-Deskriptoren im selben srcset-Attribut zu mischen. Doppelte Deskriptoren (zum Beispiel zwei Quellen im selben srcset, die beide mit 2x beschrieben werden) sind ebenfalls ungültig.

Wenn das srcset-Attribut Breitendeskriptoren 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. Dies gibt ihm bedeutenden Spielraum, seine Auswahl basierend auf Dingen wie Benutzerpräferenzen oder Bandbreite Bedingungen anzupassen. Sehen Sie sich unser Leitfaden für responsive Bilder für ein Beispiel an.

width

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

usemap

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

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 umliegenden Kontext aus. 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 eines Rahmens um das Bild. Verwenden Sie stattdessen die border CSS Eigenschaft.

hspace Veraltet

Die Anzahl der Pixel des Leerraums links und rechts des Bildes. 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 erwähnt, HTML 5.2, wurde jedoch aus dem WHATWG's HTML Living Standard 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 Leerraums 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 intrinsischen Werte des eingebetteten Bildes definiert, wie wenn es inline-block wäre. Sie können Eigenschaften wie border/border-radius, padding/margin, width, height, usw. auf ein Bild setzen.

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

Sie können die object-position Eigenschaft verwenden, um das Bild innerhalb des Rahmens des Elements zu positionieren, und die object-fit Eigenschaft, um die Größe des Bildes innerhalb des Rahmens anzupassen (zum Beispiel, ob das Bild in den Rahmen passen oder ihn füllen soll, auch wenn beschneiden 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 unnötig. SVG-Bilder beispielsweise haben keine intrinsischen Dimensionen, wenn ihr Wurzel-<svg>-Element keine width oder height-Angabe hat.

Der Wert des alt-Attributs sollte eine klare und prägnante textliche Ersatzbeschreibung 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 textuelles Äquivalent hat, sollten Sie alternative Methoden erwägen, um das zu präsentieren, was das Bild zu kommunizieren versucht.

Nicht

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

Stattdessen

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

Ein wichtiger Test der Barrierefreiheit besteht darin, den Inhalt des alt-Attributs zusammen mit dem vorausgehenden Text zu lesen, um zu sehen, ob es dieselbe Bedeutung wie das Bild vermittelt. Wenn das Bild beispielsweise von dem Satz "Auf meinen Reisen sah ich ein süßes kleines Tier:" vorangegangen war, könnte das Nicht-Beispiel von einem Bildschirmleser als "Auf meinen Reisen sah ich ein süßes kleines Tier: Bild" gelesen werden, was keinen Sinn ergibt. Das Stattdessen-Beispiel könnte von einem Bildschirmleser als "Auf meinen Reisen sah ich ein süßes kleines Tier: Ein Pinguin am Strand." gelesen werden, was Sinn ergibt.

Für Bilder, die eine Aktion auslösen sollen, z.B. Bilder innerhalb eines <a>- oder <button>-Elements, sollten Sie erwägen, die ausgelöste Aktion im alt-Attributwert zu beschreiben. Sie könnten beispielsweise alt="nächste Seite" statt alt="Pfeil rechts" schreiben. Sie könnten auch erwägen, eine optionale weitere Beschreibung in einem title-Attribut hinzuzufügen; dies kann von Bildschirmlesern gelesen werden, wenn der Benutzer dies anfordert.

Wenn ein alt-Attribut bei einem Bild nicht vorhanden ist, können einige Bildschirmleser stattdessen den Dateinamen des Bildes ankündigen. 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 Erklärt WCAG, Richtlinie 1.1 Erklärungen
• Verstehen von Erfolgskriterium 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 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. Zusätzlich sollten Sie vermeiden, den alt-Attributwert in ein auf demselben Bild erklärtes title-Attribut zu duplizieren. Dies kann dazu führen, dass einige Bildschirmleser denselben Text doppelt ankündigen, was eine verwirrende Erfahrung schafft.

Das title-Attribut sollte auch nicht als ergänzende Bildunterschrifteninformation verwendet werden, um eine alt-Beschreibung des 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 in der Regel als Tooltip präsentiert, der kurz erscheint, nachdem der Cursor über dem Bild anhält. Obwohl dies dem Benutzer zusätzliche Informationen geben kann, sollten Sie nicht davon ausgehen, dass der Benutzer es jemals sehen wird: Der Benutzer könnte nur eine Tastatur oder einen Touchscreen haben. Wenn Sie Informationen haben, die für den Benutzer besonders wichtig oder wertvoll sind, präsentieren Sie diese inline mit einer der oben genannten Methoden anstelle der Verwendung von title.

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

Das folgende Beispiel bettet ein Bild in die Seite ein und enthält Alternativtext zur Barrierefreiheit.

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

Dieses Beispiel baut auf dem vorherigen auf und zeigt, wie man das Bild in einen Link verwandelt. Dazu muss der <img>-Tag innerhalb der <a>-Elemente verschachtelt werden. Sie sollten den Alternativtext so beschreiben, dass er die Ressource, auf die der Link verweist, beschreibt, so 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; dies wird anstelle des src-Bildes auf hochauflösenden Geräten geladen. Das im src-Attribut referenzierte Bild wird als 1x-Kandidat in User Agents gezählt, die srcset unterstützen.

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

Das src-Attribut wird in User Agents, die srcset unterstützen, ignoriert, 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 harmlose Verwendungen haben, können sie unerwünschte Konsequenzen für die Sicherheit und Privatsphäre des Benutzers haben. Siehe Referer-Header: Datenschutz- und Sicherheitsbedenken für weitere Informationen und Milderungen.

• <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
• Bilder in HTML
• Leitfaden für Bilddateitypen und -formate
• Responsive Bilder