<img>: Das Image Embed-Element

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 Textersatz für das Bild, der verpflichtend und äußerst nützlich für die Barrierefreiheit ist – Bildschirmleser lesen den Attributwert ihren Nutzern vor, damit sie wissen, was das Bild bedeutet. Alternativer Text wird auch angezeigt, wenn das Bild aus irgendeinem Grund nicht geladen werden kann: zum Beispiel bei Netzwerkfehlern, Inhaltsblockierung oder Linkverfall.

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

• 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 Platz einnimmt, bevor es geladen wird, um Verschiebungen des Inhaltslayouts zu minimieren.
• Hinweise zu responsiven Bildern mit sizes und srcset (siehe auch das <picture> Element und unser Responsive images Tutorial).

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

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 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 (etwas bessere Qualität als JPEG).
• SVG (Scalable Vector Graphics) — Vektorbildformat. Verwenden Sie es für Bilder, die in unterschiedlichen Größen exakt gezeichnet werden müssen.
• WebP (Web Picture format) — Hervorragende Wahl für Bilder und animierte Bilder

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

SVG bleibt das empfohlene Format für Bilder, die in verschiedenen Größen exakt 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 passieren, einschließlich:

• Das src-Attribut ist leer ("") oder null.
• Die src URL ist dieselbe wie die URL der Seite, auf der sich der Benutzer momentan befindet.
• 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 vom 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 nicht immer Bilder an. Es gibt eine Reihe von Situationen, in denen ein Browser möglicherweise keine Bilder anzeigt, wie:

• Nicht-visuelle Browser (wie die, die von Menschen mit Sehbehinderungen verwendet werden)
• Der Benutzer entscheidet sich gegen das Anzeigen von Bildern (Bandbreite sparen, 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 nach Möglichkeit einen nützlichen Wert für alt angeben.

Dieses Attribut auf einen leeren String (alt="") zu setzen, zeigt an, dass dieses Bild kein wesentlicher Bestandteil des Inhalts ist (es ist Dekoration oder ein Tracking-Pixel) und dass nicht-visuelle Browser es beim Rendering auslassen können. Visuelle Browser werden auch das defekte 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 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 Zuweisungsquelle oder Zuweisungsauslöser entsprechend 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 Auslöserereignis wird ausgelöst, sobald der Browser die Antwort mit der Bilddatei erhält.

Hinweis: Siehe die Attribut-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 verweist. Dies ist in Ordnung, wenn Sie die Registrierung der Zuweisungsquelle oder des Auslösers auf demselben Server verarbeiten. Beim Registrieren eines Zuweisungsauslösers ist diese Eigenschaft optional und es wird ein boolean Wert 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 liegt, den Sie kontrollieren, oder Sie die Registrierung der Zuweisungsquelle auf einem anderen Server verarbeiten möchten. In diesem Fall können Sie eine oder mehrere URLs als Wert von attributionsrc angeben. Wenn die Ressourcenanforderung erfolgt, wird der Attribution-Reporting-Eligible Header an die in attributionSrc angegebene(n) URL(s) zusätzlich zum Ursprungsserver 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 Zuweisungsquellen für dasselbe Feature registriert werden können. Sie könnten zum Beispiel verschiedene Kampagnen haben, deren Erfolg Sie messen möchten, indem Sie verschiedene Berichte über verschiedene Daten generieren.

crossorigin

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

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

Wenn das crossorigin Attribut angegeben wird, wird eine CORS-Anfrage gesendet (mit dem Origin Anfrage-Header); aber wenn der Server nicht zugesteht, den Quellseiten die Nutzung der Bilddaten über das Quellstandort-übergreifende Nutzen zu erlauben (durch keine Access-Control-Allow-Origin Antwort-Header zu senden oder den Ursprung der Seite nicht in einem Access-Control-Allow-Origin Antwort-Header anzugeben), blockiert der Browser das Laden des Bildes und protokolliert einen CORS-Fehler in der Entwicklerkonsole.

Erlaubte Werte:

anonymous

Eine CORS-Anfrage wird ohne Anmeldedaten gesendet (das heißt, keine Cookies, X.509-Zertifikate oder Authorization Anfrage-Header).

use-credentials

Die CORS-Anfrage wird mit allen Anmeldedaten gesendet (das heißt, Cookies, X.509-Zertifikate und der Authorization Anfrage-Header). Wenn der Server nicht zustimmt, Anmeldedaten mit der Quellseite zu teilen (indem er den Access-Control-Allow-Credentials: true Antwort-Header zurücksendet), markiert der Browser das Bild als "tainted" 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 wurde. Weitere Informationen finden Sie in den CORS-Einstellungen der Attribute.

decoding

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

Es ist oft schwierig, einen merklichen Effekt bei der Verwendung 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, sodass das "Synchronisieren" der Inhaltsänderungen weniger offensichtlich ist. Das Blockieren des Renderns, während die Kodierung stattfindet, kann jedoch, während es oft sehr gering ist, gemessen werden – auch wenn es mit dem menschlichen Auge schwer zu beobachten ist. Siehe Was macht das Bilddecodierungs-Attribut tatsächlich? für eine detaillierte Analyse (tunetheweb.com, 2023).

Die Verwendung unterschiedlicher decoding-Typen kann zu deutlicheren Unterschieden führen, wenn <img>-Elemente dynamisch per JavaScript in den DOM eingefügt werden – siehe HTMLImageElement.decoding für weitere Informationen.

Erlaubte Werte:

sync

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

async

Dekodieren Sie das Bild asynchron, nachdem das andere DOM-Inhalt gerendert und präsentiert wurde.

auto

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

elementtiming

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

fetchpriority

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

high

Rufen Sie das Bild mit hoher Priorität im Verhältnis zu anderen Bildern ab.

low

Rufen Sie das Bild mit niedriger Priorität im Verhältnis zu anderen Bildern ab.

auto

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 unter HTMLImageElement.fetchPriority.

height

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

Hinweis: Die Einschließung 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 für die Darstellung des Bildes benötigten Platz 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 eine wichtige Komponente für eine gute Benutzererfahrung und Web-Performance.

ismap

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

Hinweis: Dieses Attribut ist nur erlaubt, wenn das <img> Element ein Nachkomme eines <a> Elements mit einem gültigen href Attribut ist. Dies gibt Benutzern ohne Eingabegerä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 momentan im sichtbaren Bereich befindet oder nicht (das ist der Standardwert).

lazy

Verzichtet auf das Laden des Bildes, bis es einen berechneten Abstand zum Blickfeld erreicht, wie er vom Browser definiert ist. Der Zweck besteht darin, das Netzwerk- und Speicherbandbreite zu sparen, bis es wahrscheinlich ist, dass es benötigt wird. Dies verbessert allgemein die Leistung des Inhalts 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 immer noch möglich wäre, die ungefähre Scrollposition eines Benutzers während einer Sitzung zu verfolgen, indem strategisch Bilder im Markup einer Seite platziert werden, sodass ein Server verfolgen kann, wie viele Bilder angefordert werden und wann.

Hinweis: Bilder mit loading auf lazy gesetztem Wert werden niemals geladen, wenn sie keinen sichtbaren Teil eines Elements schneiden, selbst wenn das Laden diese Bedingung ändern würde, da nicht geladene Bilder eine width und height von 0 haben. width und height auf verzögert geladenen Bildern zu setzen, behebt dieses Problem und wird als bewährte Praxis, von der Spezifikation empfohlen. So wird auch geholfen, Layoutverschiebungen zu vermeiden.

referrerpolicy

Ein String, der angibt, welche Referrer beim Abrufen der Ressource verwendet werden sollen:

• no-referrer: Der Referer Header wird nicht gesendet.
• no-referrer-when-downgrade: Der Referer Header wird nicht an Origins ohne TLS (HTTPS) gesendet.
• origin: Der gesendete Referrer wird auf den Ursprung der verweisenden Seite begrenzt: sein Schema, Host und Port.
• origin-when-cross-origin: Der gesendete Referrer an andere Ursprünge wird auf das Schema, den Host und den Port begrenzt sein. Navigationen im gleichen Ursprung enthalten weiterhin den Pfad.
• same-origin: Ein Referrer wird für gleiches Ursprung gesendet, aber ursprungsübergreifende Anfragen enthalten keine Referrer-Informationen.
• strict-origin: Sendet nur den Ursprung des Dokuments als Referrer, wenn das Protokollsicherheitsniveau gleich bleibt (HTTPS→HTTPS), aber nicht an eine weniger sichere Zieladresse (HTTPS→HTTP).
• strict-origin-when-cross-origin (Standard): Sendet eine vollständige URL, wenn eine gleiche Ursprungsanfrage durchgeführt wird, 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 beinhaltet den Ursprung und den Pfad (aber nicht das Fragment, Passwort oder den Benutzernamen). Dieser Wert ist unsicher, weil er Ursprünge und Pfade von TLS-geschützten Ressourcen an unsichere Ursprünge offenlegt.

sizes

Einen oder mehrere Strings, getrennt durch Kommata, 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 Quellgrößenwert.

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

Quellgrößenwerte geben die beabsichtigte Darstellungsgröße des Bildes an. User Agents verwenden die aktuelle Quellgröße, um eine der durch das srcset-Attribut bereitgestellten Quellen auszuwählen, wenn diese Quellen mit Breiten (w)-Deskriptoren beschrieben werden. Die ausgewählte Quellgröße beeinflusst die intrinsische Größe des Bildes (die Darstellungsgröße des Bildes, wenn keine CSS-Stile angewendet werden). Wenn das srcset-Attribut fehlt oder keine Werte mit einem Breiten-Deskriptor 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-Deskriptor 1x behandelt, es sei denn, ein Bild mit diesem Pixeldichte-Deskriptor ist bereits in srcset definiert, oder srcset enthält w-Deskriptoren.

srcset

Einen oder mehrere Strings, getrennt durch Kommata, die mögliche Bildquellen angeben, die der User-Agent verwenden kann. Jeder String besteht aus:

1. Einer URL zu einem Bild

2. Optional gefolgt von einem:

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

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

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

Wenn das srcset-Attribut Breiten-Deskriptoren verwendet, muss das sizes-Attribut ebenfalls vorhanden sein, oder das srcset-Attribut wird ignoriert.

Der User-Agent wählt nach eigenem Ermessen eine der verfügbaren Quellen aus. Dies bietet ihnen erhebliche Freiheit, ihre Auswahl basierend auf Dingen wie Benutzereinstellungen oder Bandbreiten-Bedingungen anzupassen. Sehen Sie unser Responsive images Tutorial für ein Beispiel.

width

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

usemap

Der teilweise URL (beginnend mit #) einer mit dem Element verbundenen Bildkarte.

Hinweis: Sie können dieses Attribut nicht verwenden, wenn das <img>-Element sich in einem <a> oder <button> Element 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 Standard, 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 die border CSS-Eigenschaft stattdessen.

hspace Veraltet

Die Anzahl der Pixel des Leerraums 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.

Hinweis: Dieses Attribut wird in der neuesten W3C-Version, HTML 5.2, erwähnt, 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 das id Attribut stattdessen.

vspace Veraltet

Die Anzahl der Pixel des Leerraums ü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 Standardabmessungen 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 setzen.

<img> hat keine Basislinie, daher wird beim Verwenden von Bildern in einem Inline-Formatierungskontext mit vertical-align: baseline, der Unterseite des Bildes auf der Textbasisstelle platziert.

Sie können die object-position-Eigenschaft verwenden, um das Bild innerhalb des Feldes des Elements zu positionieren, und die object-fit-Eigenschaft, um die Größe des Bildes innerhalb des Feldes anzupassen (zum Beispiel, ob das Bild in das Feld passen oder es füllen soll, auch wenn ein Clipping erforderlich ist).

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

Der Wert eines alt-Attributs sollte einen klaren und prägnanten Textersatz für den Inhalt des Bildes bereitstellen. Er sollte nicht das Vorhandensein des Bildes selbst oder den Dateinamen des Bildes beschreiben. Wenn das alt-Attribut absichtlich weggelassen wird, weil das Bild keine textuelle Entsprechung hat, sollten Sie alternative Methoden in Betracht ziehen, um das zu präsentieren, was das Bild vermitteln soll.

Nicht

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

Richtig

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

Ein wichtiger Barrierefreiheitstest besteht darin, den Inhalt des alt-Attributs zusammen mit dem vorausgehenden Textinhalt zu lesen, um zu sehen, ob er dieselbe Bedeutung wie das Bild vermittelt. Zum Beispiel, wenn das Bild dem Satz "Auf meinen Reisen sah ich ein niedliches kleines Tier:" vorangeht, könnte das Nicht-Beispiel von einem Bildschirmlesegerät als "Auf meinen Reisen sah ich ein niedliches kleines Tier: Bild" gelesen werden, was keinen Sinn ergibt. Das Richtig-Beispiel könnte von einem Bildschirmlesegerät als "Auf meinen Reisen sah ich ein niedliches kleines Tier: Ein Pinguin am Strand." gelesen werden, was Sinn ergibt.

Für Bilder, die eine Aktion auslösen, zum Beispiel Bilder, die in einem <a> oder <button> Element verschachtelt sind, sollten Sie in Betracht ziehen, die ausgelöste Aktion im alt-Attributwert zu beschreiben. Zum Beispiel könnten Sie alt="nächste Seite" anstelle von 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 auf Anfrage des Benutzers gelesen werden.

Wenn ein alt-Attribut in einem Bild nicht vorhanden ist, können einige Bildschirmlesegeräte den Dateinamen anstelle dessen ankündigen. Dies kann eine verwirrende Erfahrung sein, wenn der Dateiname den Inhalt des Bildes nicht repräsentiert.

• Ein alt Entscheidungsbaum • Bilder • WAI Web Accessibility Tutorials
• Alt-Texte: Der ultimative Leitfaden — Axess Lab
• So gestalten Sie großartige Alt-Texte: Eine Einführung | Deque
• MDN Understanding WCAG, Leitlinie 1.1 Erklärungen
• Verständnis von Erfolgskriterium 1.1.1 | W3C Understanding WCAG 2.0

Aufgrund eines VoiceOver-Bugs gibt VoiceOver SVG-Bilder nicht korrekt als Bilder aus. Schließen Sie role="img" in allen <img>-Elementen mit SVG-Quelldateien ein, um sicherzustellen, dass Hilfstechnologien SVG korrekt als Bildinhalt anzeigen.

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

Das title Attribut ist kein akzeptabler Ersatz für das alt-Attribut. Vermeiden Sie es auch, den alt-Attributwert in einem auf dem gleichen Bild deklarierten title Attribut zu duplizieren. Ein solches Vorgehen kann dazu führen, dass einige Bildschirmlesegeräte denselben Text zweimal ansagen, was eine verwirrende Erfahrung darstellen kann.

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

Der Wert des title-Attributs wird normalerweise dem Benutzer als Tooltip präsentiert, der kurz erscheint, nachdem der Cursor sich über dem Bild nicht mehr bewegt. Obwohl dies zusätzliche Informationen für den Benutzer bereitstellen 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 zur Verfügung stellen, 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 | The Paciello Group

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

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

Dieses Beispiel baut auf dem vorherigen auf und zeigt, wie das Bild in einen Link umgewandelt werden kann. Um dies zu tun, 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 angegebene Bild wird als 1x-Kandidat in User-Agents gewertet, 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 (max-width: 600px) Medienbedingung zutrifft, lädt das 200 Pixel breite Bild (das ist das, welches 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 Folgen für die Sicherheit und Privatsphäre 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
• Image file type and format guide
• Responsive images