<img>: The Image Embed element

Probieren Sie es aus

<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 zu dem Bild, das Sie einbetten möchten. Es ist nicht zwingend erforderlich, wenn das Attribut srcset verfügbar ist. Allerdings muss mindestens eines der Attribute src oder srcset bereitgestellt werden.
• Das alt-Attribut enthält einen Text, der das Bild ersetzt. Es ist zwingend erforderlich und äußerst nützlich für die Barrierefreiheit — Bildschirmlesegeräte lesen den Attributwert vor, damit Benutzer wissen, was das Bild bedeutet. Alternativer Text wird auch auf der Seite angezeigt, wenn das Bild aus irgendeinem Grund nicht geladen werden kann: zum Beispiel Netzwerkfehler, Inhaltsblockierung oder Link-Verfall.

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

• Kontrolle über 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, sodass es Platz einnimmt, bevor es geladen wird, um Layoutverschiebungen zu minimieren.
• Hinweise für responsive Bilder mit sizes und srcset (siehe auch das <picture>-Element und unser Responsive images Tutorial).

Unterstützte Bildformate

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 für sowohl Bilder als auch 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. Verwenden Sie es für Bilder, die in verschiedenen Größen genau gezeichnet werden müssen.
• WebP (Web Picture format) — Hervorragende Wahl für sowohl Bilder als auch animierte Bilder

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

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

Fehler beim Laden von Bildern

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

• Die src- oder srcset-Attribute sind leer ("") oder null.
• Die src- URL ist dieselbe wie die URL der aktuellen Seite des Benutzers.
• Das Bild ist in irgendeiner Weise beschädigt, die es unbrauchbar macht.
• Die Metadaten des Bildes sind in einer Weise beschädigt, dass es unmöglich ist, seine Dimensionen abzurufen, und es wurden keine Dimensionen in den Attributen des <img>-Elements angegeben.
• Das Bild befindet sich in einem vom User-Agent nicht unterstützten Format.

Attribute

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 sie von Personen 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 immer nach Möglichkeit einen nützlichen Wert für alt bereitstellen.

Die Einstellung dieses Attributs auf eine leere Zeichenfolge (alt="") zeigt an, dass dieses Bild kein wesentlicher Bestandteil des Inhalts ist (es ist Dekoration oder ein Tracking-Pixel) und dass nicht-visuelle Browser es möglicherweise aus dem Rendering weglassen. Visuelle Browser werden auch das defekte Bildsymbol ausblenden, wenn das alt-Attribut leer ist und das Bild nicht angezeigt wurde.

Dieses Attribut wird auch verwendet, wenn das Bild in Text kopiert und eingefügt oder ein verlinktes Bild als Lesezeichen gespeichert wird.

attributionsrc Experimentell

Gibt an, dass der Browser einen Attribution-Reporting-Eligible-Header zusammen mit der Bildanfrage senden soll.

Auf der Serverseite wird dieser 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: Details finden Sie in der Attribution Reporting API.

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

• Boolean, das heißt nur der attributionsrc-Name. Dies gibt an, dass Sie möchten, dass der Attribution-Reporting-Eligible-Header an denselben Server gesendet wird, auf den auch das src-Attribut verweist. Das ist in Ordnung, wenn Sie die Registrierung der Attributionsquelle oder des Triggers auf demselben Server verarbeiten. Bei der Registrierung eines Attributionstriggers ist diese Eigenschaft optional, und es wird ein boolescher Wert verwendet, wenn sie weggelassen wird.
• Ein 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 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 zusätzlich zum Ursprungs-URL an die in attributionsrc angegebene(n) URL(s) 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: Das Angeben mehrerer URLs bedeutet, dass mehrere Attributionsquellen im selben Feature registriert werden können. Zum Beispiel können Sie verschiedene Kampagnen haben, deren Erfolg Sie messen möchten, was die Erstellung unterschiedlicher Berichte über unterschiedliche Daten umfasst.

crossorigin

Gibt an, ob das Abfragen des Bildes mit einer CORS-Anfrage durchgeführt werden muss. Bilddaten aus einem von CORS-fähigen Bild zurückgegebenen CORS-Anfrage können in einem <canvas>-Element wiederverwendet werden, ohne als "verunreinigt" markiert zu werden.

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

Wenn das crossorigin-Attribut angegeben wird, dann wird eine CORS-Anfrage gesendet (mit dem Origin-Header); wenn der Server jedoch nicht zustimmt, den Zugriff auf die Bilddaten durch die Ursprungsseite zu erlauben (indem er keinen Access-Control-Allow-Origin-Header in der Antwort sendet oder die Ursprungsseite nicht in den Header aufnimmt, den er sendet), blockiert der Browser das Laden des Bildes und protokolliert einen CORS-Fehler in der Entwicklertools-Konsole.

Zulässige Werte:

anonymous

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

use-credentials

Die CORS-Anfrage wird mit allen Anmeldeinformationen gesendet (das heißt, Cookies, X.509-Zertifikate und dem Authorization-Header). Wenn der Server nicht zustimmt, Anmeldeinformationen mit der Ursprungsseite zu teilen (indem er den Access-Control-Allow-Credentials: true-Header in der Antwort sendet), markiert der Browser das Bild als verunreinigt und schränkt den Zugriff auf seine Bilddaten ein.

Wenn das Attribut einen ungültigen Wert hat, behandeln Browser es, als wäre der Wert anonymous verwendet worden. Weitere Informationen finden Sie unter CORS settings attributes.

decoding

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

Es ist oft schwierig, merkliche Effekte bei der Verwendung von decoding auf statischen <img>-Elementen wahrzunehmen. Sie werden wahrscheinlich zunächst als leere Bilder gerendert, während die Bilddaten (entweder aus dem Netzwerk oder aus dem Cache) abgerufen und dann unabhängig behandelt werden, sodass das "Synchronisieren" von Inhaltsaktualisierungen weniger offensichtlich ist. Die Blockierung des Renderns während des Decodierens, obwohl oft ziemlich klein, kann jedoch gemessen werden — auch wenn es schwierig ist, es mit dem menschlichen Auge zu beobachten. Siehe What does the image decoding attribute actually do? für eine detailliertere Analyse (tunetheweb.com, 2023).

Die Verwendung verschiedener decoding-Typen 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.

Zulässige Werte:

sync

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

async

Decodieren Sie das Bild asynchron, nach dem Rendern und Präsentieren des anderen DOM-Inhalts.

auto

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

elementtiming

Markiert das Bild zur Beobachtung durch die PerformanceElementTiming-API. Der angegebene Wert wird zu einer Kennung für das beobachtete Bildelement. Weitere Informationen finden Sie auf der elementtiming-Attributseite.

fetchpriority

Gibt einen Hinweis auf die zu verwendende relative Priorität beim Abrufen des Bildes. Zulässige Werte:

high

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

low

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

auto

Legen Sie keine Präferenz für die Empfangspriorität fest. Dies ist der Standard. Wird verwendet, wenn kein oder ein ungültiger Wert festgelegt ist.

Weitere Informationen finden Sie unter HTMLImageElement.fetchPriority.

height

Die inhärente Höhe des Bildes in Pixeln. Muss eine Ganzzahl ohne Einheit sein.

Hinweis: Die Einbindung 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 Platz für die Anzeige des Bildes zu reservieren und so Layoutverschiebungen beim Herunterladen und Malen des Bildes auf dem Bildschirm zu reduzieren oder sogar zu verhindern. Die Reduzierung von Layoutverschiebungen ist ein wesentlicher Bestandteil einer guten Benutzererfahrung und Webleistung.

ismap

Dieses Boolean-Attribut zeigt an, dass das Bild Teil einer serverseitigen Karte ist. Wenn ja, 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 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

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

lazy

Das Laden des Bildes wird verzögert, bis es eine berechnete Entfernung vom Viewport erreicht, wie vom Browser definiert. Ziel ist es, das Netzwerk und den Speicherbedarf für die Handhabe des Bildes zu vermeiden, bis es relativ sicher ist, dass es benötigt wird. Dies verbessert in den meisten typischen Anwendungsfällen die Leistung des Inhalts.

Hinweis: Das Laden wird nur verzögert, wenn JavaScript aktiviert ist. Dies ist eine Maßnahme gegen Tracking, da es mittels strategisch platzierter Bilder im Markup einer Seite immer noch möglich wäre, die ungefähre Scrollposition eines Benutzers während einer Sitzung zu erfassen, indem ein Server tracken kann, wie viele Bilder angefordert werden und wann.

Hinweis: Bilder mit loading auf lazy gesetzt, werden niemals geladen, wenn sie keinen sichtbaren Teil eines Elements schneiden, selbst wenn das Laden dazu führen würde, dass sich dies ändert, da nicht geladene Bilder eine Breite und Höhe von 0 haben. Die Angabe von width und height bei verzögert geladenen Bildern behebt dieses Problem und ist eine bewährte Praxis, vom Standard empfohlen. Das trägt auch dazu bei, Layoutverschiebungen zu vermeiden.

referrerpolicy

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

• 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 refererenden Seite begrenzt: 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 begrenzt sein. Navigationen im gleichen Ursprung werden weiterhin den Pfad einschließen.
• same-origin: Ein Referrer wird für gleichartige Ursprünge gesendet, jedoch werden Anfragen über verschiedene Ursprünge keine Referrer-Informationen enthalten.
• strict-origin: Nur den Ursprung des Dokuments als Referrer senden, wenn das Protokoll-Sicherheitsniveau gleich bleibt (HTTPS→HTTPS), jedoch nicht an ein weniger sicheres Ziel senden (HTTPS→HTTP).
• strict-origin-when-cross-origin (Standard): Senden Sie eine vollständige URL bei Anfragen mit gleichem Ursprung, senden Sie nur den Ursprung, wenn das Protokoll-Sicherheitsniveau gleich bleibt (HTTPS→HTTPS) und senden Sie keinen Header an ein weniger sicheres Ziel (HTTPS→HTTP).
• unsafe-url: Der Referrer wird den Ursprung und den Pfad einschließen (aber nicht das Fragment, Passwort oder Benutzername). 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 Kommata getrennte Werte, die Quellgrößen oder das auto-Schlüsselwort sein können.

Eine Quellgröße besteht aus:

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

Medienbedingungen beschreiben Eigenschaften des Viewports, nicht des Bildes. Zum Beispiel schlägt (height <= 500px) 1000px vor, eine Bildquelle von 1000px Breite zu verwenden, wenn die Viewport-Höhe 500px oder weniger beträgt. Da ein Quellgrößen-Descriptor die Breite angibt, die während des Layouts für das Bild verwendet werden soll, basiert die Medienbedingung typischerweise (aber nicht zwingend) auf der Breite.

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

Ein Quellgrößenwert kann jede nicht-negative Länge sein. Es dürfen keine CSS-Funktionen außer den Mathe-Funktionen verwendet werden. Einheiten werden auf die gleiche Weise wie Medienabfragen interpretiert, was bedeutet, dass alle relativen Längeneinheiten relativ zur Dokumentwurzel sind, nicht zum <img>-Element. Beispielsweise ist ein em-Wert relativ zur Schriftgröße der Wurzel, nicht zur Schriftgröße des Bildes. Prozentwerte sind nicht erlaubt.

Das auto-Schlüsselwort kann die gesamte Liste der Größen oder den ersten Eintrag in der Liste ersetzen. Es ist nur gültig, wenn es mit loading="lazy" kombiniert wird, und löst die konkrete Größe des Bildes auf. Da die intrinsische Größe des Bildes noch nicht bekannt ist, sollten width- und height-Attribute (oder CSS-Äquivalente) ebenfalls angegeben werden, um zu verhindern, dass der Browser die Standard-Bildbreite von 300px annimmt. Für eine bessere Abwärtskompatibilität mit Browsern, die auto nicht unterstützen, können Sie nach auto in dem sizes-Attribut Fallback-Größen hinzufügen:

html

<img
  loading="lazy"
  width="200"
  height="200"
  sizes="auto, (max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"
  srcset="
    swing-200.jpg   200w,
    swing-400.jpg   400w,
    swing-800.jpg   800w,
    swing-1600.jpg 1600w
  "
  src="swing-400.jpg"
  alt="Kettlebell Swing" />

src

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

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, gefolgt von einem Leerzeichen und einer der folgenden Möglichkeiten:
   • Einer Breitenbeschreibung (ein positiver Ganzzahlwert direkt gefolgt von w). Die Breitenbeschreibung wird durch die im sizes-Attribut angegebene Quellgröße geteilt, um die tatsächliche Pixeldichte zu berechnen.
   • Einer Pixeldichtebeschreibung (eine positive Gleitkommazahl direkt gefolgt von x).

Wenn keine Beschreibung angegeben ist, wird der Quelle der Standard-Descriptor 1x zugewiesen.

Es ist nicht korrekt, Breitenbeschreibungen und Pixeldichtebeschreibungen in demselben srcset-Attribut zu mischen. Doppelte Beschreibungen (beispielsweise zwei Quellen im selben srcset, die beide mit 2x beschrieben sind) sind ebenfalls ungültig.

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

Der User-Agent wählt nach eigenem Ermessen eine der verfügbaren Quellen aus. Dies bietet ihm erheblich Handlungsspielraum, ihre Auswahl basierend auf Benutzerpräferenzen oder Bandbreitenbedingungen zuzuschneiden. Siehe unser Responsive images-Tutorial für ein Beispiel.

width

Die inhärente Breite des Bildes in Pixeln. Muss eine Ganzzahl ohne Einheit sein.

usemap

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

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

Veraltete Attribute

align Veraltet

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

hspace Veraltet

Die Anzahl der Pixel Weißraum links und rechts vom Bild. Verwenden Sie stattdessen die margin-CSS-Eigenschaft.

longdesc Veraltet

Ein Link zu einer detaillierteren Beschreibung des Bildes. Mögliche Werte sind eine URL oder eine Element- id.

Hinweis: Dieses Attribut wird im 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 stattdessen das id-Attribut.

vspace Veraltet

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

Styling mit CSS

<img> ist ein ersetztes Element; es hat standardmäßig einen display-Wert von inline, aber seine Standardmaße sind 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 einem Bild setzen.

<img> hat keine Grundlinie, sodass, wenn Bilder in einem Inline-Formatierungskontext mit vertical-align: baseline verwendet werden, der Boden des Bildes auf der Text-Basislinie 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öße des Bildes innerhalb der Box anzupassen (zum Beispiel, ob das Bild die Box füllen oder einpassen sollte, auch wenn Zuschneiden erforderlich ist).

Je nach Typ kann ein Bild eine inhärente Breite und Höhe haben. Für einige Bildtypen sind jedoch keine intrinsischen Dimensionen erforderlich. SVG-Bilder beispielsweise haben keine intrinsischen Dimensionen, wenn ihr Root- <svg>-Element keine width- oder height-Angaben aufweist.

Barrierefreiheit

Bedeutungsvolle alternative Beschreibungen erstellen

Der Wert eines alt-Attributs sollte einen klaren und prägnanten Textersatz für den Inhalt des Bildes bieten. Er sollte nicht das Vorhandensein des Bildes selbst oder den Dateinamen des Bildes beschreiben. Wenn das alt-Attribut bewusst weggelassen wird, weil das Bild kein Text-Äquivalent hat, überlegen Sie, alternative Methoden zu verwenden, um das zu präsentieren, was das Bild vermitteln soll.

Nicht tun

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

Tun

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

Ein wichtiger Barrierefreiheits-Test besteht darin, den alt-Attributwert zusammen mit dem vorausgehenden Text zu lesen, um festzustellen, ob er dieselbe Bedeutung wie das Bild vermittelt. Zum Beispiel, wenn das Bild dem Satz "Auf meinen Reisen sah ich ein niedliches kleines Tierchen:" voranstand, könnte das Nicht tun-Beispiel von einem Bildschirmlesegerät als "Auf meinen Reisen sah ich ein niedliches kleines Tierchen: Bild" gelesen werden, was keinen Sinn ergibt. Das Tun-Beispiel könnte von einem Bildschirmlesegerät als "Auf meinen Reisen sah ich ein niedliches kleines Tierchen: Ein Pinguin am Strand." gelesen werden, was Sinn macht.

Bei Bildern, die eine Aktion auslösen, zum Beispiel Bildern, die in ein <a>- oder <button>-Element eingebettet sind, sollten Sie die ausgelöste Aktion im alt-Attributwert 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 ein title-Attribut einzufügen; dies kann bei Bedarf von Bildschirmlesegeräten gelesen werden.

Wenn auf einem Bild kein alt-Attribut 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 Decision Tree • Bilder • WAI Web Accessibility Tutorials
• Alt-Texte: Der ultimative Leitfaden — Axess Lab
• Wie man großartige Alt-Texte gestaltet: Eine Einführung | Deque
• MDN Das Verständnis der WCAG, Richtlinie 1.1 Erklärungen
• Verständnis des Erfolgskriteriums 1.1.1 | W3C Understanding WCAG 2.0

Identifizieren von SVG als Bild

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 assistive Technologien SVG korrekt als Bildinhalte ankündigen.

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

Das title-Attribut

Das title-Attribut ist kein akzeptabler Ersatz für das alt-Attribut. Vermeiden Sie außerdem, den Wert des alt-Attributs in einem title-Attribut auf demselben Bild zu duplizieren. Dies könnte dazu führen, dass einige Bildschirmleser denselben Text zweimal ankündigen, was verwirrend sein kann.

Das title-Attribut sollte auch nicht als ergänzende Beschriftungsinformationen verwendet werden, um die alt-Beschreibungen 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 angezeigt, der kurz nach dem Bewegen des Cursors über das Bild erscheint. Während dies dem Benutzer zusätzliche Informationen bieten kann, sollten Sie nicht annehmen, dass der Benutzer es jemals sehen wird: Der Benutzer verfügt möglicherweise nur über eine Tastatur oder einen Touchscreen. Wenn Sie Informationen haben, die für den Benutzer besonders wichtig oder wertvoll sind, stellen Sie diesen stattdessen inline mit einer der oben genannten Methoden dar, anstatt title zu verwenden.

• Verwendung des HTML-title-Attributs – aktualisiert | The Paciello Group

Beispiele

Alternativer Text

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

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

Bildlink

Dieses Beispiel baut auf dem vorherigen auf und zeigt, wie man das Bild zu einem Link macht. Um dies zu tun, betten Sie das <img>-Tag in das <a>-Element. Der alternative Text sollte die Ressource beschreiben, auf die der Link verweist, als würden Sie einen Textlink verwenden.

<a href="https://developer.mozilla.org">
  <img
    src="/shared-assets/images/examples/favicon144.png"
    alt="Visit the MDN site" />
</a>

Verwendung des srcset-Attributs

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

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

Verwendung der srcset- und sizes-Attribute

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

Sicherheits- und Datenschutzbedenken

Obwohl <img>-Elemente harmlose Anwendungen haben, können sie unerwünschte Konsequenzen für die Sicherheit und den Datenschutz der Benutzer haben. Siehe Referer-Header: Datenschutz- und Sicherheitsbedenken für weitere Informationen und Abhilfemaßnahmen.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <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
• Bilddateityp- und Format-Leitfaden
• Responsive images