<img>: Das Bild-Einbettungselement

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 srcset Attribut verfügbar ist. Es muss jedoch mindestens eines der Attribute src oder srcset angegeben werden.
• Das alt Attribut enthält eine textuelle Ersatzbeschreibung für das Bild, die obligatorisch und äußerst nützlich für die Barrierefreiheit ist — Bildschirmleser lesen den Attributwert vor, damit Nutzer wissen, was das Bild bedeutet. Alternativtext wird auch auf der Seite angezeigt, wenn das Bild aus irgendeinem Grund nicht geladen werden kann: zum Beispiel bei Netzwerkfehlern, Inhaltsblockierung oder Link-Verfall.

Es gibt viele andere Attribute, um verschiedene Zwecke zu erfüllen:

• 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, sodass es vor dem Laden Platz beansprucht, um Layoutverschiebungen zu minimieren.
• Responsive Bildhinweise mit sizes und srcset (siehe auch das <picture> Element und unser Responsive Images Tutorial).

Unterstützte Bildformate

Der HTML-Standard gibt nicht an, welche Bildformate unterstützt werden sollen, sodass User Agents unterschiedliche Formate unterstützen können.

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 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 Kompression standbilder (derzeit das beliebteste Format).
• PNG (Portable Network Graphics) — Gute Wahl für verlustfreie Kompression von Standbildern (leicht bessere Qualität als JPEG).
• SVG (Scalable Vector Graphics) — Vektorbildformat. Verwenden Sie es für Bilder, die in unterschiedlichen Größen genau 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 bei Stand- und animierten Bildern viel besser abschneiden als PNG, JPEG, GIF.

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

Bild Ladefehler

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 die gleiche wie die URL der Seite, die der Benutzer momentan angezeigt bekommt.
• Das Bild ist in einer Weise beschädigt, die es unmöglich macht, es zu laden.
• Die Metadaten des Bildes sind so beschädigt, dass es unmöglich ist, seine Abmessungen zu erhalten, und es wurden in den Attributen des <img> Elements keine Dimensionen angegeben.
• Das Bild ist in einem vom user agent nicht unterstützten Format.

Attribute

Dieses Element enthält die globalen Attribute.

alt

Definiert Text, der das Bild auf der Seite ersetzen kann.

Hinweis: Browser zeigen nicht immer Bilder an. Es gibt eine Anzahl von Situationen, in denen ein Browser Bilder möglicherweise nicht anzeigt, wie zum Beispiel:

• Nicht-visuelle Browser (wie diejenigen, die 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 wann immer möglich einen nützlichen Wert für alt angeben.

Die Einstellung dieses Attributs auf einen leeren String (alt="") zeigt an, dass dieses Bild kein Schlüsselteil des Inhalts ist (es handelt sich um Dekoration oder ein Tracking-Pixel), und dass nicht-visuelle Browser es beim Rendern auslassen können. Visuelle Browser werden das kaputte Bilder-Symbol ebenfalls 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 verlinktes Bild als Lesezeichen gespeichert wird.

attributionsrc Experimentell

Gibt an, dass Sie möchten, dass der Browser einen Attribution-Reporting-Eligible Header zusammen mit der Bildanfrage sendet.

Serverseitig 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 Attribution Trigger 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 Quellen- oder Triggerereignis wird ausgelöst, sobald der Browser die Antwort mit der Bilddatei erhält.

Hinweis: Siehe die Attribution Reporting API für weitere Details.

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

• Boolean, d.h. nur der Name attributionsrc. Dies gibt an, dass Sie möchten, dass der Attribution-Reporting-Eligible Header an denselben Server gesendet wird, zu dem das src Attribut zeigt. Dies ist in Ordnung, wenn Sie die Registrierung der Attributionsquelle oder des Triggers auf demselben Server verwalten. Beim Registrieren eines Attribution Triggers ist diese Eigenschaft optional, und wenn sie weggelassen wird, wird ein boolescher Wert verwendet.
• 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 vorliegt oder Sie die Registrierung der Attributionsquelle auf einem anderen Server verwalten möchten. In diesem Fall können Sie eine oder mehrere URLs als den Wert von attributionsrc angeben. Wenn die Ressourcenanforderung erfolgt, wird der Attribution-Reporting-Eligible Header an die in attributionSrc angegebenen URL(s) zusätzlich zum Ursprung der Ressource gesendet. Diese URLs können dann mit einem Attribution-Reporting-Register-Source oder Attribution-Reporting-Register-Trigger Header wie gewünscht antworten, um die Registrierung abzuschließen.

Hinweis: Die Angabe mehrerer URLs bedeutet, dass mehrere Attributionsquellen für dasselbe Merkmal registriert werden können. Sie könnten zum Beispiel verschiedene Kampagnen haben, deren Erfolg Sie messen möchten, was die Erstellung unterschiedlicher Berichte über unterschiedliche Daten erfordert.

crossorigin

Gibt an, ob das Abrufen des Bildes unter Verwendung einer CORS-Anfrage durchgeführt werden muss. Bilddaten aus einem CORS-fähigen Bild, das als Ergebnis einer CORS-Anfrage zurückgegeben wird, können im <canvas> Element wiederverwendet werden, ohne als "verunreinigt" markiert zu werden.

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

Wenn das crossorigin Attribut angegeben ist, wird eine CORS-Anfrage gesendet (mit dem Origin Anforderungsheader); aber wenn der Server nicht der herkunftsübergreifenden Zugriff auf die Bilddaten durch die Ursprungsseite zustimmt (indem er keinen Access-Control-Allow-Origin Antwortheader sendet oder die Ursprungsseite nicht in einen gesendeten Access-Control-Allow-Origin Antwortheader einbezieht), blockiert der Browser das Bild daran, geladen zu werden, und protokolliert einen CORS-Fehler in der Entwicklerwerkzeug-Konsole.

Zulässige Werte:

anonymous

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

use-credentials

Die CORS-Anfrage wird mit allen Anmeldeinformationen gesendet (d.h. Cookies, X.509-Zertifikate und der Authorization Anforderungsheader). Wenn der Server nicht der geteilten Verwendung von Anmeldeinformationen mit der Ursprungsseite zustimmt (durch das Senden des Access-Control-Allow-Credentials: true Antwortheaders), 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 so, als ob der Wert anonymous verwendet wurde. Siehe CORS-Einstellungsattribute für weitere Informationen.

decoding

Dieses Attribut gibt dem Browser einen Hinweis, ob es das Bilddekodieren zusammen mit dem Rendern der anderen DOM-Inhalte in einem einzigen Darstellungsprozess durchführen soll, der "korrekter" aussieht (sync), oder zuerst die anderen DOM-Inhalte rendern und darstellen soll und dann das Bild dekodieren und später darstellen soll (async). In der Praxis bedeutet async, dass der nächste Paint nicht auf die Bilddekodierung wartet.

Es ist oft schwierig, einen merkbaren Effekt bei der Verwendung von decoding auf statischen <img> Elementen wahrzunehmen. Diese werden wahrscheinlich zunächst als leere Bilder gerendert, während die Bilddateien abgerufen (entweder aus dem Netzwerk oder aus dem Cache) und dann unabhängig verarbeitet werden, sodass das "Synchronisieren" von Inhaltsaktualisierungen weniger offensichtlich ist. Das Blockieren des Renderns während der Dekodierung, obwohl oft sehr klein, kann gemessen werden — auch wenn es mit dem menschlichen Auge schwierig zu beobachten ist. Siehe Was macht das Bilddekodierungsattribut eigentlich? für eine detailliertere Analyse (tunetheweb.com, 2023).

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

Zulässige Werte:

sync

Dekodiere das Bild synchron zusammen mit dem Rendern der anderen DOM-Inhalte und stelle alles zusammen dar.

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 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 einem Bezeichner für das beobachtete Bild. Siehe auch die elementtiming Attributseite.

fetchpriority

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

high

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

low

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

auto

Keine Präferenz für die Abrufpriorität angeben. 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 Pixeln. Muss eine ganze Zahl ohne Einheit sein.

Hinweis: Die Angabe 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 dem Bildschirm angezeigt wird. Eine Verringerung der Layoutverschiebung ist ein wichtiger Bestandteil einer guten Benutzererfahrung und Web-Performance.

ismap

Dieses Boolesche Attribut zeigt an, dass das Bild Teil einer serverseitigen Karte ist. In diesem Fall werden die Koordinaten, auf die der Benutzer auf dem 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 bietet Benutzern ohne Zeigergeräte eine alternative Möglichkeit.

loading

Gibt an, wie der Browser das Bild laden soll:

eager

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

lazy

Verzögert das Laden des Bildes, bis es eine berechnete Entfernung vom Ansichtsfenster erreicht hat, wie vom Browser definiert. Ziel ist es, die benötigte Netzwerk- und Speicherbandbreite zu vermeiden, bis relativ sicher ist, dass das Bild benötigt wird. Dies verbessert in den meisten typischen Anwendungsfällen die Leistung des Inhalts.

Hinweis: Laden wird nur verzögert, wenn JavaScript aktiviert ist. Dies ist eine Anti-Tracking-Maßnahme, da wenn ein User Agent Lazy Loading unterstützt, wenn das Skripting deaktiviert ist, es 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 dem loading Attribut auf lazy werden niemals geladen, wenn sie keinen sichtbaren Teil eines Elements schneiden, selbst wenn das Laden dieser Teile das ändern würde, da nicht geladenen Bildern eine width und height von 0 zugewiesen werden. Die Angabe von width und height bei Lazy Loaded Images behebt dieses Problem und ist eine empfohlene Best Practice, die von der Spezifikation empfohlen wird. Dies hilft auch, Layoutverschiebungen zu verhindern.

referrerpolicy

Eine Zeichenkette, die 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 Origins ohne TLS (HTTPS) gesendet.
• origin: Der gesendete Referrer wird auf die Herkunft der verweisenden Seite beschränkt: ihr Schema, Host und Port.
• origin-when-cross-origin: Der an andere Origins gesendete Referrer wird auf das Schema, den Host und den Port beschränkt. Navigationen auf derselben Origin enthalten weiterhin den Pfad.
• same-origin: Ein Referrer wird für dieselbe Origin gesendet, aber Cross-Origin-Anfragen enthalten keine Referrer-Informationen.
• strict-origin: Sendet nur die Herkunft des Dokuments als Referrer, wenn sich das Sicherheitsniveau des Protokolls nicht ändert (HTTPS→HTTPS), wird jedoch nicht an einen weniger sicheren Ort gesendet (HTTPS→HTTP).
• strict-origin-when-cross-origin (Standard): Sendet die vollständige URL bei einer same-origin Anfrage, sendet nur die Herkunft, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPS→HTTPS), und sendet keinen Header an eine weniger sichere Ziel (HTTPS→HTTP).
• unsafe-url: Der Referrer enthält die Herkunft und den Pfad (aber nicht den Fragment, Passwort oder Benutzername). Dieser Wert ist unsicher, weil er Ursprünge und Pfade von TLS-geschützten Ressourcen zu unsicheren Origins bringt.

sizes

Ein oder mehrere Werte, getrennt durch Kommata, die Quellengrößen oder das auto Schlüsselwort sein können.

Eine Quellengröße besteht aus:

1. Einer Medienbedingung, die für den letzten Eintrag in der Liste weggelassen wird.
2. Einem Quellengrößenwert.

Medienbedingungen beschreiben Eigenschaften des Ansichtsfensters, nicht des Bildes. Zum Beispiel schlägt (height <= 500px) 1000px vor, eine Bildquelle mit 1000px Breite zu verwenden, wenn die Ansichtshöhe 500px oder weniger beträgt. Da eine Quellgrößenbeschreibung die Breite angibt, die für das Bild während des Layouts verwendet werden soll, basiert die Medienbedingung typischerweise (aber nicht notwendigerweise) auf der Breite.

Quellengrößenwerte geben die beabsichtigte Darstellungsgröße des Bildes an. User agents verwenden die aktuelle Quellengröße, um eine der vom srcset Attribut bereitgestellten Quellen auszuwählen, wenn diese Quellen mit Breiten (w) Deskriptoren beschrieben sind. Die ausgewählte Quellgröße wirkt sich auf die intrinsische Größe des Bildes aus (die Anzeigengröße des Bildes ohne CSS Styling). Wenn das srcset Attribut fehlt oder keine Werte mit einem Breiten-Deskriptor enthält, hat das sizes Attribut keine Wirkung.

Ein Quellgrößenwert kann jede nicht-negative Länge sein. Er darf keine CSS-Funktionen außer den Mathematik-Funktionen verwenden. Einheiten werden auf die gleiche Weise wie Medienabfragen interpretiert, was bedeutet, dass sich alle relativen Längeneinheiten auf den Dokumentstamm anstelle des <img> Elements beziehen. Zum Beispiel ist ein em Wert relativ zur Root-Schriftgröße, 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 wird auf die konkrete Größe des Bildes aufgelöst. Da die intrinsische Größe des Bildes noch nicht bekannt ist, sollten auch width und height Attribute (oder deren CSS-Äquivalente) spezifiziert werden, um zu verhindern, dass der Browser die Standardbildbreite von 300px annimmt. Für eine bessere Abwärtskompatibilität mit Browsern, die auto nicht unterstützen, können Sie fallback-Größen nach auto im sizes Attribut einschließen:

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. Erforderlich für das <img> Element. In Browsern, die srcset unterstützen, wird src als Kandidatenbild mit einem Pixeldichte-Deskriptor 1x behandelt, es sei denn, ein Bild mit diesem Pixeldichte-Deskriptor ist bereits in srcset definiert, oder es sei denn, srcset enthält w Deskriptoren.

srcset

Eine oder mehrere durch Kommas getrennte Zeichenfolgen, die mögliche Bildquellen für den User agent angeben, aus denen dieser auswählen kann. Jede Zeichenfolge besteht aus:

1. Einer URL zu einem Bild
2. Optionalen Leerzeichen gefolgt von einem der folgenden:
   • Einem Breiten-Deskriptor (eine positive Ganzzahl direkt gefolgt von w), der durch die Quellgröße, die im sizes Attribut angegeben ist, dividiert wird, um die effektive Pixeldichte zu berechnen.
   • Einem Pixeldichte-Deskriptor (eine positive Fließkommazahl direkt gefolgt von x).

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

Es ist nicht korrekt, Breiten-Deskriptoren und Pixeldichte-Deskriptoren im selben srcset Attribut zu mischen. Doppelte Deskriptoren (zum Beispiel zwei Quellen im selben 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, sonst wird das srcset selbst ignoriert.

Der User Agent kann nach eigenem Ermessen eine der verfügbaren Quellen auswählen. Dies gibt ihnen erheblichen Spielraum, ihre Auswahl basierend auf Dingen wie Benutzerpräferenzen oder Bandbreitenbedingungen anzupassen. Siehe unser Responsive Images Tutorial 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 dem Element zugeordnet ist.

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

Veraltete Attribute

align Veraltet

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

hspace Veraltet

Die Anzahl der Pixel des weißen Raums links und rechts vom Bild. Verwenden Sie die margin CSS-Eigenschaft stattdessen.

longdesc Veraltet

Ein Link zu einer ausführlicheren Beschreibung des Bildes. Mögliche Werte sind eine URL oder eine Element-id(/de/docs/Web/HTML/Reference/Global_attributes/id).

Hinweis: Dieses Attribut wird im HTML Standard als veraltet angesehen. Es hat eine unsichere Zukunft; Autoren sollten eine WAI-ARIA Alternative wie aria-describedby oder aria-details verwenden.

name Veraltet

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

vspace Veraltet

Die Anzahl der Pixel des weißen Raums oben und unten vom Bild. Verwenden Sie die margin CSS-Eigenschaft stattdessen.

Styling mit CSS

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

<img> hat keine Baseline, sodass, wenn Bilder in einem Inline-Formatierungskontext 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 Elementbox zu positionieren, und die object-fit Eigenschaft nutzen, um die Größe des Bildes innerhalb der Box anzupassen (zum Beispiel, ob das Bild die Box ausfüllen sollte oder gefüllt werden sollte, selbst wenn Clipping erforderlich ist).

Abhängig von ihrem Typ können Bilder eine intrinsische Breite und Höhe haben. Für einige Bildtypen sind jedoch intrinsische Dimensionen nicht notwendig. SVG Bilder beispielsweise haben keine intrinsischen Dimensionen, wenn sich im <svg>-Element kein width oder height befindet.

Barrierefreiheit

Aussagekräftige alternative Beschreibungen verfassen

Der Wert des alt Attributs sollte eine klare und prägnante Textersetzung für den Inhalt des Bildes bieten. Es sollte nicht die bloße Existenz des Bildes oder den Dateinamen des Bildes beschreiben. Wenn das alt Attribut bewusst weggelassen wird, weil das Bild kein textuelles Äquivalent hat, sollten Sie andere Methoden in Betracht ziehen, um das, was das Bild kommunizieren möchte, darzustellen.

Nicht tun

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

Tun

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

Ein wichtiger Barrierefreiheitstest besteht darin, den Inhalt des alt Attributs zusammen mit vorhergehendem Text laut zu lesen, um zu prüfen, ob er dieselbe Bedeutung wie das Bild vermittelt. Zum Beispiel, wenn dem Bild der Satz "Auf meinen Reisen sah ich ein niedliches kleines Tier:" vorausging, könnte das Nicht tun-Beispiel von einem Bildschirmleser als "Auf meinen Reisen sah ich ein niedliches kleines Tier: Bild" vorgelesen werden, was keinen Sinn ergibt. Das Tun-Beispiel könnte von einem Bildschirmleser 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, wie zum Beispiel Bilder, die in einem <a> oder <button> Element verschachtelt sind, sollten Sie in Betracht ziehen, die ausgelöste Aktion im Wert des alt Attributs zu beschreiben. Sie könnten zum Beispiel 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 Bildschirmlesern auf Anfrage des Benutzers vorgelesen werden.

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

• Ein Alt Entscheidungsbaum • Bilder • WAI Web Accessibility Tutorials
• Alt-Texte: Der ultimative Leitfaden — Axess Lab
• Wie man großartige Alt-Texte gestaltet: Eine Einführung | Deque
• MDN Verständnis der WCAG, Richtlinie 1.1 Erklärungen
• Das Verstehen des Erfolgskriteriums 1.1.1 | W3C Verständnis von WCAG 2.0

SVG als Bild identifizieren

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 Hilfswerkzeuge das SVG als Bildinhalt korrekt 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 Attributes in einem title Attribut auf demselben Bild zu duplizieren. Dies kann dazu führen, dass einige Bildschirmleser denselben Text zweimal ansagen, was zu einer verwirrenden Erfahrung führt.

Das title Attribut sollte auch nicht als ergänzende Beschriftungsinformation zur Begleitung der alt Beschreibung eines Bildes verwendet werden. Wenn ein Bild eine Bildunterschrift benötigt, verwenden Sie die figure und figcaption Elemente.

Der Wert des title Attributs wird Benutzern normalerweise als Tooltip präsentiert, der kurz nach Anhalten des Cursors über dem Bild erscheint. Während dies dem Benutzer eine zusätzliche Information geben kann, sollten Sie nicht davon ausgehen, dass der Benutzer es jemals sehen wird: Der Benutzer könnte nur über Tastatur oder Touchscreen verfügen. Wenn Sie Informationen haben, die besonders wichtig oder wertvoll für den Benutzer sind, präsentieren Sie diese inline mithilfe einer der oben genannten Methoden anstelle von title.

• Das HTML title Attribut verwenden – aktualisiert | Die Paciello Group

Beispiele

Alternativtext

Das folgende Beispiel bettet ein Bild auf der Seite ein und beinhaltet alternativen Text zur Barrierefreiheit.

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

Bildlink

Dieses Beispiel baut auf dem vorherigen auf und zeigt, wie das Bild in einen Link umgewandelt wird. Dazu müssen Sie das <img> Tag innerhalb des <a> Tags verschachteln. Sie sollten den Alternativtext so beschreiben, dass er die Ressource beschreibt, auf die der Link zeigt, als ob Sie einen Textlink verwenden würden.

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

Verwendung des srcset Attributes

In diesem Beispiel fügen wir ein srcset Attribut mit einem Verweis auf eine hochauflösende Version des Logos ein; diese wird statt des src Bildes auf hochauflösenden Geräten geladen. Das Bild, auf das im src Attribut verwiesen wird, 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 Deskriptoren enthalten sind. Wenn die (width <= 600px) Medienbedingung erfüllt ist, wird das 200 Pixel breite Bild geladen (es ist das, welches 200px am nächsten kommt), sonst 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 harmlos wirken, können sie unerwünschte Folgen für die Sicherheit und Privatsphäre der Benutzer haben. Siehe Referer Header: Sicherheits- und Datenschutzbedenken für weitere Informationen und Maßnahmen zur Minderung.

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
• Leitfaden zu Bilddateitypen und -formaten
• Responsive Images