<img>: Das Bildelement

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 Zugänglichkeit ist — Screenreader lesen den Attributwert ihren Nutzern vor, damit sie verstehen, was das Bild bedeutet. Alternativtext wird auch auf der Seite angezeigt, wenn das Bild aus irgendeinem Grund nicht geladen werden kann: beispielsweise bei Netzwerkfehlern, Inhaltsblockierungen oder Linkverfall.

Es gibt viele weitere 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 vor dem Laden Platz beansprucht, um Layoutverschiebungen des Inhalts zu mindern.
• Hinweise für responsive Bilder mit sizes und srcset (siehe auch das <picture>-Element und unser Responsive images-Tutorial).

Der HTML-Standard legt nicht fest, welche Bildformate unterstützt werden sollen, sodass Benutzeragenten unterschiedliche Formate unterstützen können.

Die Bilddateiformate, die im Web am häufigsten 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 Komprimierung von Standbildern (derzeit am beliebtesten).
• PNG (Portable Network Graphics) — Gute Wahl für verlustfreie Komprimierung von Standbildern (etwas bessere Qualität als JPEG).
• SVG (Scalable Vector Graphics) — Vektor-Bildformat. Nutzen Sie es für Bilder, die in verschiedenen Größen genau gezeichnet werden müssen.
• WebP (Web Picture format) — Ausgezeichnete Wahl sowohl für Bilder als auch für animierte Bilder.

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

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

Wenn beim Laden oder Rendern eines Bildes ein Fehler auftritt und ein onerror Event-Handler für das error-Ereignis festgelegt wurde, wird dieser Event-Handler aufgerufen. Dies kann in mehreren Situationen passieren, unter anderem:

• Das src-Attribut ist leer ("") oder null.
• Die src URL ist identisch mit der URL der Seite, die der Benutzer gerade besucht.
• Das Bild ist in irgendeiner 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 Format, das vom Benutzeragenten nicht unterstützt wird.

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 solche, 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.

Das Festlegen dieses Attributs auf einen leeren String (alt="") zeigt an, dass dieses Bild nicht ein wesentlicher Bestandteil des Inhalts ist (es ist Dekoration oder ein Tracking-Pixel) und dass nicht-visuelle Browser es vom Rendering auslassen können. Visuelle Browser verbergen auch das kaputte Bildsymbol, wenn das alt-Attribut leer ist und das Bild nicht angezeigt werden konnte.

Dieses Attribut wird auch verwendet, wenn das Bild in Text kopiert oder beim Speichern eines verknüpften Bildes zu einem Lesezeichen verwendet 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 Antwort-Header zurückgesendet werden sollte, hängt vom Wert des Attribution-Reporting-Eligible-Headers ab, der die Registrierung ausgelöst hat.

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

Hinweis: 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 der Attribution-Reporting-Eligible-Header an denselben Server gesendet werden soll, auf den das src-Attribut verweist. Dies ist in Ordnung, wenn Sie die Registrierung der Attributionsquelle oder des Triggers auf demselben Server behandeln. Beim Registrieren eines Attributionstriggers ist diese Eigenschaft optional, und ein boolescher Wert wird verwendet, wenn sie ausgelassen 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 liegt, den Sie kontrollieren, oder Sie die Registrierung der Attributionsquelle einfach 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 Attribution-Reporting-Register-Source- oder Attribution-Reporting-Register-Trigger-Header entsprechend antworten, um die Registrierung abzuschließen.

Hinweis: Das Angeben mehrerer URLs bedeutet, dass mehrere Attributionsquellen für dieselbe Funktion registriert werden können. Sie könnten zum Beispiel verschiedene Kampagnen haben, deren Erfolg Sie messen möchten, was das Generieren unterschiedlicher Berichte zu unterschiedlichen Daten erfordert.

crossorigin

Gibt an, ob das Abrufen des Bildes mit einer CORS-Anfrage erfolgen muss. Bilddaten von einem CORS-fähigen Bild, das über eine CORS-Anfrage zurückgegeben wird, können im <canvas>-Element wiederverwendet werden, ohne als "verfälscht" markiert zu werden.

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

Wenn das crossorigin-Attribut angegeben wird, wird eine CORS-Anfrage gesendet (mit dem Origin-Request-Header); Wenn der Server jedoch nicht zustimmt, den Cross-Origin-Zugriff auf die Bilddaten von der Ursprungsseite zuzulassen (indem er keinen Access-Control-Allow-Origin-Response-Header sendet, oder indem er die Ursprungsseite nicht in einen Access-Control-Allow-Origin-Response-Header aufnimmt, den er sendet), blockiert der Browser das Laden des Bildes und protokolliert einen CORS-Fehler in der Devtools-Konsole.

Erlaubte Werte:

anonymous

Eine CORS-Anfrage wird ohne Anmeldedaten gesendet (dh. keine Cookies, X.509-Zertifikate oder Authorization-Request-Header).

use-credentials

Die CORS-Anfrage wird mit Anmeldedaten gesendet (d.h. Cookies, X.509-Zertifikate und der Authorization-Request-Header). Wenn der Server nicht einwilligt, Anmeldedaten mit der Ursprungsseite zu teilen (indem er den Header Access-Control-Allow-Credentials: true 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 dies so, als ob der Wert anonymous verwendet würde. Siehe CORS-Einstellungsattribute für zusätzliche Informationen.

decoding

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

Es ist oft schwierig, einen wahrnehmbaren Effekt bei der Verwendung von decoding bei 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. Daher ist die "Synchronisierung" von Inhaltsaktualisierungen weniger offensichtlich. Das Blockieren des Renderings während der Dekodierung, auch wenn es oft ziemlich klein ist, kann gemessen werden — selbst wenn es mit dem menschlichen Auge schwer zu beobachten ist. Siehe Was macht das Bild-Dekodierungsattribut tatsächlich? für eine detailliertere Analyse (tunetheweb.com, 2023).

Die Verwendung unterschiedlicher 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.

Erlaubte Werte:

sync

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

async

Dekodiere 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 API PerformanceElementTiming. 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 zum Abrufen des Bildes. Erlaubte Werte:

high

Hole das Bild mit einer hohen Priorität im Vergleich zu anderen Bildern.

low

Hole das Bild mit einer niedrigen Priorität im Vergleich zu anderen Bildern.

auto

Keine Präferenz für die Abrufpriorität einstellen. Dies ist der Standard. Es wird verwendet, wenn kein Wert oder ein ungültiger Wert festgelegt 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 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 zur Anzeige des Bildes zu reservieren, wodurch eine Layoutverschiebung reduziert oder sogar verhindert wird, wenn das Bild heruntergeladen und auf den Bildschirm gemalt wird. Die Reduzierung der Layoutverschiebung ist ein wesentlicher Bestandteil einer guten Benutzererfahrung und Webleistung.

ismap

Dieses Boolesche Attribut zeigt an, dass das Bild Teil einer Server-seitigen Karte ist. Wenn dem so ist, werden die Koordinaten, auf die der Benutzer auf dem 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 alternatives Ziel.

loading

Gibt an, wie der Browser das Bild laden soll:

eager

Lade das Bild sofort, unabhängig davon, ob es sich derzeit im sichtbaren Viewport befindet oder nicht (dies ist der Standardwert).

lazy

Verzögern Sie das Laden des Bildes, bis es eine berechnete Entfernung vom Viewport erreicht, wie vom Browser definiert. Die Absicht ist, das Netzwerk und den Speicherbedarf für das Bild zu vermeiden, bis es mit hinreichender Sicherheit erforderlich ist. Dies verbessert 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 es, wenn ein Benutzeragent das Lazy-Loading unterstützt, wenn das Scripting deaktiviert ist, immer noch möglich wäre, die ungefähre Scrollposition eines Benutzers während einer Sitzung zu verfolgen, indem Bilder strategisch im Markup einer Seite platziert werden, sodass ein Server verfolgen kann, wie viele Bilder angefordert werden und wann.

Hinweis: Bilder mit loading, das auf lazy gesetzt ist, werden nie geladen, wenn sie keine sichtbaren Teile eines Elements schneiden, selbst wenn das Laden sie ändern würde, da nicht geladene Bilder eine width und height von 0 haben. Das Angeben von width und height bei lazy-geladenen Bildern behebt dieses Problem und ist eine bewährte Methode, empfohlen durch die Spezifikation. Dies trägt auch dazu bei, Layoutverschiebungen zu verhindern.

referrerpolicy

Ein String, der angibt, welcher 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 an andere Ursprünge gesendete Referrer wird auf das Schema, den Host und den Port beschränkt. Navigationsvorgänge im selben Ursprung enthalten weiterhin den Pfad.
• same-origin: Ein Referrer wird für gleiche Ursprünge gesendet, aber Anfragen an fremde Ursprünge enthalten keine Referrer-Informationen.
• strict-origin: Senden Sie nur den Ursprung des Dokuments als Referrer, wenn das Protokollsicherheitsniveau gleich bleibt (HTTPS→HTTPS), senden Sie ihn jedoch nicht zu einem weniger sicheren Ziel (HTTPS→HTTP).
• strict-origin-when-cross-origin (Standard): Sende eine vollständige URL bei Anfragen im selben Ursprung, sende nur den Ursprung, wenn das Protokollsicherheitsniveau gleich bleibt (HTTPS→HTTPS), und sende keinen Header zu einem weniger sicheren Ziel (HTTPS→HTTP).
• unsafe-url: Der Referrer enthält den Ursprung und den Pfad (jedoch 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. Diese muss für das letzte Element in der Liste weggelassen werden.
2. Einem Quellengrößenwert.

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.

Quellengrößenwerte geben die beabsichtigte Anzeigegröße des Bildes an. Benutzeragenten verwenden die aktuelle Quellengröß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-Stilierung angewendet wird). Wenn das srcset-Attribut fehlt oder keine Werte mit einer Breitenbeschreibung enthält, hat das sizes-Attribut keine Wirkung.

src

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

srcset

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

1. Einer URL zu einem Bild

2. Optional, gefolgt von einem der folgenden Whitespace:

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

Wenn kein Beschreiber angegeben ist, wird der Quelle der Standardbeschreiber 1x zugewiesen.

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

Wenn das srcset-Attribut Breitenbeschreiber verwendet, muss das sizes-Attribut ebenfalls vorhanden sein, sonst wird das srcset selbst ignoriert.

Der Benutzeragent wählt nach eigenem Ermessen eine der verfügbaren Quellen aus. Dies gibt ihnen einen erheblichen Spielraum, um ihre Auswahl basierend auf Faktoren wie Benutzerpräferenzen oder Bandbreiten-bedingungen anzupassen. Siehe unser Responsive images-Tutorial 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 Bildkarte, die mit dem Element verknüpft 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 umgebenden 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 Randes um das Bild. Verwenden Sie die border CSS-Eigenschaft stattdessen.

hspace Veraltet

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

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 jedoch aus dem WHATWG-HTML Living Standard entfernt. Es hat eine ungewisse Zukunft; Autoren sollten stattdessen eine WAI-ARIA-Alternative wie aria-describedby oder aria-details verwenden.

name Veraltet

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

vspace Veraltet

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

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

<img> hat keine Basislinie, sodass, wenn Bilder in einem Inline-Formatierungs-Kontext mit vertical-align: baseline verwendet werden, der Boden des Bildes auf der Textbasislinie platziert wird.

Sie können die object-position-Eigenschaft verwenden, um das Bild innerhalb der Box des Elements zu positionieren, und die object-fit-Eigenschaft, um die Größenanpassung des Bildes innerhalb der Box zu justieren (zum Beispiel, ob das Bild die Box passend ausfüllen soll oder ob es gefüllt werden soll, auch wenn Clipping erforderlich ist).

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

Der Wert des alt-Attributs sollte einen klaren und präzisen Ersatztext für den Bildinhalt bieten. Er sollte das Vorhandensein des Bildes selbst oder den Dateinamen des Bildes nicht beschreiben. Wenn das alt-Attribut absichtlich weggelassen wird, weil das Bild kein sprachliches Äquivalent hat, sollten alternative Methoden in Betracht gezogen werden, um darzustellen, was das Bild zu kommunizieren versucht.

Nicht

<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 vorhergehendem Textinhalt zu lesen, um zu sehen, ob er die gleiche Bedeutung wie das Bild vermittelt. Zum Beispiel, wenn das Bild von dem Satz "Auf meinen Reisen sah ich ein niedliches kleines Tier:" vorausgegangen wäre, könnte das Nicht-Beispiel von einem Screenreader als "Auf meinen Reisen sah ich ein niedliches kleines Tier: Bild" vorgelesen werden, was keinen Sinn ergibt. Das Machen-Beispiel könnte von einem Screenreader als "Auf meinen Reisen sah ich ein niedliches kleines Tier: Ein Pinguin am Strand." vorgelesen werden, was Sinn ergibt.

Für Bilder, die eine Aktion auslösen sollen, zum Beispiel Bilder, die in einem <a>- oder <button>-Element verschachtelt sind, sollten Sie in Erwägung ziehen, die ausgelöste Aktion im Wert des alt-Attributs zu beschreiben. Beispielsweise könnten Sie alt="nächste Seite" anstelle von alt="Pfeil nach rechts" schreiben. Sie könnten auch in Erwägung ziehen, eine optionale weitere Beschreibung in einem title-Attribut hinzuzufügen; dieses kann von Screenreadern auf Anfrage des Benutzers vorgelesen werden.

Wenn ein alt-Attribut bei einem Bild fehlt, können einige Screenreader 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 Entscheidungsbaum für Alt • Bilder • WAI Web Accessibility Tutorials
• Alt-Texte: Der Ultimative Leitfaden — Axess Lab
• Anleitung zum Erstellen großartiger Alt-Texte: Eine Einführung | Deque
• MDN Understanding WCAG, Erläuterungen zu Richtlinie 1.1
• Erfolgskriterium 1.1.1 verstehen | W3C Understanding WCAG 2.0

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

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

Das title-Attribut ist kein akzeptabler Ersatz für das alt-Attribut. Vermeiden Sie zudem die Duplikation des Werts des alt-Attributs in einem auf demselben Bild deklarierten title-Attribut. Dies kann dazu führen, dass einige Screenreader den gleichen Text zweimal ankündigen, was eine verwirrende Erfahrung schafft.

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

Der Wert des title-Attributs wird dem Benutzer normalerweise als Tooltip präsentiert, der kurz nach dem Anhalten des Cursors über dem Bild erscheint. Obwohl dies dem Benutzer zusätzliche Informationen bieten kann, sollten Sie nicht davon ausgehen, dass der Benutzer es 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 statt mit title.

• Das HTML-Title-Attribut verwenden – aktualisiert | The Paciello Group

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

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

Dieses Beispiel baut auf dem vorherigen auf und zeigt, wie das Bild zu einem Link gemacht wird. Um dies zu tun, nisten Sie das <img>-Tag in das <a> ein. Sie sollten den Alternativtext die Ressource beschreiben lassen, 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 ein; diese wird anstelle des Bildes im src-Attribut auf hochauflösenden Geräten geladen. Das Bild, auf das im src-Attribut verwiesen wird, wird als 1x-Kandidat in Benutzeragenten betrachtet, die srcset unterstützen.

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

Das src-Attribut wird in Benutzeragenten, die srcset unterstützen, ignoriert, wenn w-Beschreiber enthalten sind. Wenn die Medienbedingung (max-width: 600px) zutrifft, wird das 200 Pixel breite Bild geladen (es ist das, 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 unschuldige Verwendungen haben, können sie unerwünschte Konsequenzen für die Sicherheit und den Datenschutz der Benutzer haben. Weitere Informationen und Maß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 für Bilddateiformate und -typen
• Responsive images