<img>: Das Bild-Einbettungselement

<img
  class="fit-picture"
  src="/shared-assets/images/examples/grapefruit-slice.jpg"
  alt="Grapefruit slice atop a pile of other slices" />

.fit-picture {
  width: 250px;
}

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

• Das src-Attribut enthält den Pfad zum eingebetteten Bild. Es ist nicht erforderlich, wenn das srcset-Attribut verfügbar ist. Es muss jedoch mindestens eines der src- oder srcset-Attribute angegeben werden.
• Das alt-Attribut enthält einen Textersatz für das Bild, was obligatorisch ist und unglaublich nützlich für die Zugänglichkeit ist — Screenreader lesen den Attributwert für ihre Benutzer aus, damit sie wissen, was das Bild bedeutet. Alternativtext wird auch auf der Seite angezeigt, wenn das Bild aus irgendeinem Grund nicht geladen werden kann: zum Beispiel Netzwerkfehler, Inhaltsblockierung oder Link-Zerfall.

Es gibt viele andere Attribute für verschiedene Zwecke:

• 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 einnehmen kann, bevor es geladen wird, um Verschiebungen im Inhaltslayout zu verringern.
• Hinweise für responsive Bilder mit sizes und srcset (siehe auch das <picture>-Element und unser Leitfaden für Responsive Bilder).

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

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

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

Wenn beim Laden oder Rendern eines Bildes ein Fehler auftritt und ein onerror-Ereignishandler für das error-Ereignis festgelegt wurde, wird dieser Ereignishandler aufgerufen. Dies kann in verschiedenen Situationen passieren, einschließlich:

• Die src- oder srcset-Attribute sind leer ("") oder null.
• Die src- URL ist dieselbe wie die URL der Seite, die der Benutzer gerade aufruft.
• Das Bild ist in irgendeiner Weise beschädigt, die das Laden verhindert.
• Die Metadaten des Bildes sind so beschädigt, dass es unmöglich ist, seine Abmessungen abzurufen, und keine Abmessungen im <img>-Element-Attribut angegeben wurden.
• Das Bild ist in einem Format, das vom User Agent nicht unterstützt wird.

Dieses Element umfasst die globalen Attribute.

alt

Definiert einen 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 z.B.:

• Nicht-visuelle Browser (wie die von Menschen mit Sehbehinderung 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 geben Sie einen nützlichen Wert für alt wann immer möglich an.

Das Festlegen dieses Attributs auf einen leeren String (alt="") zeigt an, dass dieses Bild kein wesentlicher Teil des Inhalts ist (es ist eine Dekoration oder ein Tracking-Pixel) und dass nicht-visuelle Browser es vom Rendern auslassen können. Visuelle Browser werden das defekte Bildsymbol auch 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 oder ein verlinktes 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 Bildanforderung 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 Ereignis der Quelle oder des Triggers wird ausgelöst, sobald der Browser die Antwort mit der Bilddatei erhält.

[!NOTIZ] Weitere Informationen finden Sie in der Attribution Reporting API.

Es gibt zwei Versionen dieses Attributs, die Sie festlegen können:

• Boolescher Wert, das heißt, 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 Attributionsquelle oder die Triggerregistrierung auf demselben Server handhaben. Bei der Registrierung eines Attributionstriggers ist diese Eigenschaft optional und ein boolescher Wert wird verwendet, wenn sie weggelassen wird.
• Wert, der eine oder mehrere URLs enthält, 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 von Ihnen kontrollierten Server liegt oder Sie die Registrierung der Attributionsquelle nur auf einem anderen Server verwalten 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 Ressourcenursprung gesendet. Diese URLs können dann mit einem Attribution-Reporting-Register-Source- oder Attribution-Reporting-Register-Trigger-Header antworten, um die Registrierung abzuschließen.

[!NOTIZ] Die Angabe mehrerer URLs bedeutet, dass mehrere Attributionsquellen an derselben Funktion registriert werden können. Beispielsweise könnten Sie verschiedene Kampagnen haben, deren Erfolg Sie messen möchten, was das Generieren verschiedener Berichte zu unterschiedlichen Daten involviert.

crossorigin

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

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

Wenn das crossorigin-Attribut angegeben ist, wird eine CORS-Anforderung gesendet (mit dem Origin-Anforderungsheader); Wenn der Server jedoch nicht in die Bereitstellung von Cross-Origin-Zugriff auf die Bilddaten durch die Ursprungsseite einwilligt (indem er keinen Access-Control-Allow-Origin-Antwortheader sendet oder die Ursprungsseite nicht in einen Access-Control-Allow-Origin-Antwortheader 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-Anforderung wird ohne Anmeldeinformationen gesendet (also ohne Cookies, X.509-Zertifikate oder Authorization-Anforderungsheader).

use-credentials

Die CORS-Anforderung wird mit vorhandenen Anmeldeinformationen gesendet (also Cookies, X.509-Zertifikate und den Authorization-Anforderungsheader). Wenn der Server nicht in die Freigabe von Anmeldeinformationen mit der Ursprungsseite einwilligt (durch das Senden des Access-Control-Allow-Credentials: true-Antwortheaders), 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 so, als ob der Wert anonymous verwendet wurde. Siehe CORS-Einstellungen Attribute für zusätzliche Informationen.

decoding

Dieses Attribut gibt einen Hinweis an den Browser, ob er die Bilddecodierung zusammen mit dem Rendern des anderen DOM-Inhalts in einem einzigen Darstellungsschritt durchführen soll, der "korrekter" aussieht (sync), oder den anderen DOM-Inhalt zuerst darstellen und dann das Bild decodieren und später präsentieren soll (async). In der Praxis bedeutet async, dass das nächste Paint nicht darauf wartet, dass das Bild decodiert wird.

Es ist oft schwierig, einen merkbaren Effekt bei der Verwendung von decoding auf statischen <img>-Elementen zu erfassen. Sie werden wahrscheinlich zunächst als leere Bilder gerendert, während die Bilddateien abgerufen werden (entweder aus dem Netzwerk oder aus dem Cache) und dann unabhängig gehandhabt, sodass das "Synchronisieren" von Inhaltsupdates weniger offensichtlich ist. Das Blockieren des Renderings während der Decodierung kann zwar oft sehr kurz sein, kann jedoch gemessen werden — selbst wenn es mit dem menschlichen Auge schwer zu beobachten ist. Siehe Was macht das Bilddecodierungsattribut tatsächlich? für eine detailliertere Analyse (tunetheweb.com, 2023).

Unterschiedliche decoding-Typen zu verwenden, kann zu spürbareren 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

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

async

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

auto

Keine Präferenz für den Decodierungsmodus; 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 Seite zum elementtiming-Attribut.

fetchpriority

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

high

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

low

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

auto

Keine Präferenz für die Abrufpriorität festlegen. 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: Das Einbinden von height und width ermöglicht es dem Browser, das Seitenverhältnis des Bildes zu berechnen, bevor es geladen wird. Dieses Seitenverhältnis wird verwendet, um den Platz zu reservieren, der benötigt wird, um das Bild anzuzeigen. Dies reduziert oder verhindert sogar eine Layoutverschiebung, wenn das Bild heruntergeladen und auf dem Bildschirm angezeigt wird. Das Reduzieren von Layoutverschiebungen ist ein wesentlicher Bestandteil einer guten Benutzererfahrung und Webleistung.

ismap

Dieses boolesche Attribut gibt an, dass das Bild Teil einer serverseitigen 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 Nachfahre eines <a>-Elements mit einem gültigen href-Attribut ist. Dies gibt Benutzern ohne Zeigergeräte ein alternatives Ziel.

loading

Gibt an, wie der Browser das Bild laden soll:

eager

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

lazy

Verzögert das Laden des Bildes, bis es eine berechnete Distanz vom Viewport erreicht, wie vom Browser definiert. Das Ziel ist es, die Netzwerk- und Speicherbandbreite zu vermeiden, die benötigt wird, um das Bild zu verarbeiten, bis es wahrscheinlich benötigt wird. Dies verbessert im Allgemeinen die Leistung des Inhalts in den meisten typischen Anwendungsfällen.

Hinweis: Das Laden wird nur verzögert, wenn JavaScript aktiviert ist. Dies ist eine Maßnahme gegen Tracking, denn wenn ein Benutzer-Agent das verzögerte Laden auch bei deaktiviertem Skripting unterstützen würde, wäre es dennoch möglich, die ungefähre Scrollposition eines Benutzers während einer Sitzung zu verfolgen, indem strategisch Bilder in einem Seiten-Markup platziert 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 schneiden, selbst wenn das Laden sie ändern würde, da nicht geladene Bilder eine width und height von 0 haben. Durch das Setzen von width und height auf Bildern mit verzögertem Laden wird dieses Problem behoben und es ist eine bewährte Praxis, die von der Spezifikation empfohlen wird. Dies hilft auch, Layoutverschiebungen zu verhindern.

referrerpolicy

Ein String, der angibt, welchen Referrer beim Abrufen der Ressource verwendet werden soll:

• no-referrer: Der Referer-Header wird nicht gesendet.
• no-referrer-when-downgrade: Der Referer-Header wird nicht an Ursprünge ohne TLS (HTTPS) gesendet.
• origin: Der gesendete Referrer ist auf den Ursprung der verweisenden Seite beschränkt: dessen Schema, Host und Port.
• origin-when-cross-origin: Der Referrer, der an andere Ursprünge gesendet wird, ist auf das Schema, den Host und den Port beschränkt. Bei Navigationen im selben Ursprung wird der Pfad weiterhin eingeschlossen.
• same-origin: Ein Referrer wird für den selben Ursprung gesendet, aber Anfragen über verschiedene Ursprünge enthalten keine Referrer-Informationen.
• strict-origin: Nur den Ursprung des Dokuments als Referrer senden, wenn die Sicherheitsebene des Protokolls gleich bleibt (HTTPS→HTTPS), aber es nicht an ein weniger sicheres Ziel senden (HTTPS→HTTP).
• strict-origin-when-cross-origin (Standard): Eine vollständige URL senden, wenn eine Anfrage im selben Ursprung erfolgt, nur den Ursprung senden, wenn die Sicherheitsebene des Protokolls 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

Ein oder mehrere durch Kommas getrennte Strings, die eine Reihe von Quelldetails 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 Viewports, nicht des Bildes. Zum Beispiel schlägt (höhe <= 500px) 1000px vor, eine Quelle von 1000px Breite zu verwenden, wenn der Viewport nicht höher als 500px ist. Da ein Quellgrößenbeschreiber verwendet wird, um die Breite zu spezifizieren, die für das Bild während des Layouts der Seite verwendet werden soll, basiert die Medienbedingung typischerweise auf der Breiten-Information.

Quellgrößenwerte spezifizieren die beabsichtigte Anzeigengröße des Bildes. User Agents verwenden die aktuelle Quellgröße, um eine der Quellen auszuwählen, die vom srcset-Attribut angegeben sind, 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 kein CSS-Styling angewendet wird). Wenn das srcset-Attribut fehlt oder keine Werte mit einer Breitenbeschreibung enthält, hat das sizes-Attribut keine Wirkung.

Ein Quellgrößenwert kann eine beliebige nicht-negative Länge sein. Er darf keine CSS-Funktionen außer den Mathematischen Funktionen verwenden. Einheiten werden auf dieselbe Weise wie in Medienabfragen interpretiert, was bedeutet, dass alle relativen Längeneinheiten relativ zur Dokumentwurzel und nicht zum <img>-Element sind, so dass ein em-Wert relativ zur Schriftgröße der Wurzel und nicht zur Schriftgröße des Bildes ist. Prozentwerte sind nicht erlaubt.

Das sizes-Attribut akzeptiert auch die folgenden Schlüsselwortwerte:

auto

auto kann die gesamte Liste der Größen oder den ersten Eintrag in der Liste ersetzen. Es ist nur gültig in Kombination mit loading="lazy" und löst sich auf die konkrete Größe des Bildes auf. Da die intrinsische Größe des Bildes noch nicht bekannt ist, sollten auch width und height Attribute (oder CSS-Äquivalente) angegeben werden, um zu verhindern, dass der Browser eine Standardbreite von 300px annimmt.

src

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

srcset

Ein oder mehrere durch Kommas getrennte Strings, die mögliche Bildquellen für den User Agent zur Verwendung angeben. Jeder String besteht aus:

1. Einer URL zu einem Bild
2. Optional, Leerzeichen gefolgt von einem der:
   • Einem Breitenbeschreiber (eine positive Ganzzahl direkt gefolgt von w). Der Breitenbeschreiber wird durch die im sizes-Attribut angegebene Quellgröße geteilt, um die effektive Pixeldichte zu berechnen.
   • Einem Pixeldichtedeskriptor (eine positive Gleitkommazahl direkt gefolgt von x).

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

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

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

Der User Agent wählt nach eigenem Ermessen eine der verfügbaren Quellen aus. Dies gibt ihnen erheblichen Spielraum, um ihre Auswahl auf Grundlage von Benutzerpräferenzen oder Bandbreitenbedingungen anzupassen. Siehe unser Leitfaden für Responsive Bilder für ein Beispiel.

width

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

usemap

Die partielle URL (beginnend mit #) einer Bildkarte, die mit dem Element verbunden 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 die float- und/oder vertical-align- CSS-Eigenschaften anstelle dieses Attributs. Zulässige 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 die border- CSS-Eigenschaft stattdessen.

hspace Veraltet

Die Anzahl der Pixel Weißraum links und rechts vom Bild. 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 HTML-Spezifikation als veraltet betrachtet. 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 Weißraum über und unter dem Bild. Verwenden Sie die margin-CSS-Eigenschaft stattdessen.

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

<img> hat keine Basislinie, sodass Bilder in einem inline-Formatierungskontext mit vertical-align: baseline am unteren Ende des Bildes auf der Textbasislinie platziert werden.

Sie können die object-position-Eigenschaft verwenden, um das Bild innerhalb des Elementrahmens 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 ausfüllen sollte, auch wenn eine Kürzung erforderlich ist).

Je nach Typ kann ein Bild eine intrinsische Breite und Höhe haben. Für einige Bildtypen sind jedoch intrinsische Dimensionen unnötig. SVG-Bilder haben zum Beispiel keine intrinsischen Dimensionen, wenn ihr Wurzel-<svg>-Element keine width- oder height-Eigenschaft darauf hat.

Der Wert des alt-Attributs sollte einen klaren und prägnanten Textersatz für den Bildinhalt bereitstellen. Es sollte nicht das Vorhandensein des Bildes selbst oder den Dateinamen des Bildes beschreiben. Wenn das alt-Attribut absichtlich weggelassen wurde, weil das Bild kein textliches Äquivalent hat, ziehen Sie alternative Methoden in Betracht, um zu zeigen, was das Bild zu kommunizieren versucht.

Nicht tun

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

Tun Sie es

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

Ein wichtiger Barrierefreiheitstest besteht darin, den Inhalt des alt-Attributs zusammen mit dem vorhergehenden Textinhalt zu lesen, um festzustellen, ob er dieselbe Bedeutung wie das Bild vermittelt. Wenn das Bild zum Beispiel dem Satz "Auf meinen Reisen sah ich ein süßes kleines Tier:" vorausging, könnte das Nicht tun-Beispiel von einem Screenreader als "Auf meinen Reisen sah ich ein süßes kleines Tier: Bild" gelesen werden, was keinen Sinn ergibt. Das Tun Sie es-Beispiel könnte von einem Screenreader 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, zum Beispiel Bilder, die innerhalb eines <a>- oder <button>-Elements verschachtelt sind, ziehen Sie es in Erwägung, die ausgelöste Aktion innerhalb des alt-Attributwerts zu beschreiben. Beispielsweise könnten Sie alt="nächste Seite" anstelle von alt="Pfeil rechts" schreiben. Sie könnten auch in Erwägung ziehen, eine optionale weitere Beschreibung in einem title-Attribut hinzuzufügen; diese kann von Screenreadern angesagt werden, wenn vom Benutzer angefordert.

Wenn ein alt-Attribut auf einem Bild nicht vorhanden ist, können einige Screenreader den Dateinamen des Bildes stattdessen ankündigen. Dies kann eine verwirrende Erfahrung sein, wenn der Dateiname nicht repräsentativ für den Bildinhalt ist.

• Ein alternativer Entscheidungstext • Bilder • WAI Web Accessibility Tutorials
• Alt-Texte: Der ultimative Leitfaden — Axess Lab
• How to Design Great Alt Text: An Introduction | Deque
• MDN Understanding WCAG, Leitlinie 1.1 Erklärungen
• Understanding Success Criterion 1.1.1 | W3C Understanding 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 hinzu, die SVG-Quelldateien haben, um sicherzustellen, dass unterstützende Technologien das SVG als Bildinhalt korrekt ankündigen.

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

Das title-Attribut ist kein akzeptabler Ersatz für das alt-Attribut. Vermeiden Sie es außerdem, den Wert des alt-Attributs in einem sich auf dasselbe Bild beziehenden title-Attribut zu duplizieren. Andernfalls können einige Screenreader denselben 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 üblicherweise als Tooltip präsentiert, der kurz nach dem Stoppen des Cursors über dem Bild erscheint. Während dies dem Benutzer zusätzliche Informationen bieten kann, sollten Sie nicht davon ausgehen, dass der Benutzer sie überhaupt sieht: 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, sollten Sie sie inline mit einer der oben genannten Methoden präsentieren, anstatt title zu verwenden.

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

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

<img src="/shared-assets/images/examples/favicon144.png" alt="MDN" />

Dieses Beispiel baut auf dem vorherigen auf und zeigt, wie das Bild in einen Link umgewandelt werden kann. Dazu wird das <img>-Tag innerhalb des <a>-Elements verschachtelt. Sie sollten den alternativen Text so formulieren, dass er die Ressource beschreibt, auf die der Link zeigt, als würden Sie einen Text-Link verwenden.

<a href="https://developer.mozilla.org">
  <img
    src="/shared-assets/images/examples/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 als 1x-Kandidat in User Agents, die srcset unterstützen, gezählt.

<img
  src="/shared-assets/images/examples/favicon72.png"
  alt="MDN"
  srcset="/shared-assets/images/examples/favicon144.png 2x" />

Das src-Attribut wird in User Agents, die srcset unterstützen, ignoriert, wenn w-Deskriptoren enthalten sind. Wenn die (Breite <= 600px)-Medienbedingung zutrifft, wird das 200 Pixel breite Bild geladen (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="(width <= 600px) 200px, 50vw" />

Auch wenn <img>-Elemente unschuldige Anwendungen haben, können sie unerwünschte Folgen für die Benutzer-Sicherheit und den Datenschutz haben. Weitere Informationen und Abhilfen 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
• Responsive Bilder