<img>: Das Bildeinbettungselement

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 erforderlich, wenn das srcset-Attribut verfügbar ist. Allerdings muss mindestens eines der src- oder srcset-Attribute angegeben werden.
• Das alt-Attribut enthält einen textuellen Ersatz für das Bild, welches verpflichtend ist und für Barrierefreiheit äußerst nützlich ist — Bildschirmlesegeräte lesen den Attributwert vor, damit die Nutzer wissen, was das Bild bedeutet. Alternativtext wird auch auf der Seite angezeigt, wenn das Bild aus irgendeinem Grund nicht geladen werden kann: beispielsweise bei Netzwerkfehlern, Inhaltsblockierung oder nicht mehr vorhandenen Links.

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

• Referrer/CORS-Kontrolle 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, damit es Platz einnehmen kann, bevor es geladen wird, um Layout-Verschiebungen des Inhalts zu reduzieren.
• Responsive Bildhinweise mit sizes und srcset (siehe auch das <picture>-Element und unser Leitfaden für responsive Bilder).

Unterstützte Bildformate

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

Die Bilddateiformate, die im Internet am häufigsten 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 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 (leicht bessere Qualität als JPEG).
• SVG (Scalable Vector Graphics) — Vektorbildformat. Verwenden Sie es für Bilder, die in verschiedenen Größen genau 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 für Stand- und animierte Bilder viel besser performen als PNG, JPEG, GIF.

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

Fehler beim Laden von Bildern

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

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

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 Reihe von Situationen, in denen ein Browser möglicherweise keine Bilder anzeigt, wie zum Beispiel:

• Nicht-visuelle Browser (wie diejenigen, die von Menschen mit Sehbehinderungen verwendet werden)
• Der Benutzer entscheidet sich dafür, 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 bereitstellen.

Die Festlegung dieses Attributs auf einen leeren String (alt="") bedeutet, dass dieses Bild nicht ein wesentlicher Bestandteil des Inhalts ist (es ist Dekoration oder ein Tracking-Pixel) und dass nicht-visuelle Browser es möglicherweise von der Darstellung auslassen. Visuelle Browser verbergen auch das gebrochene Bildsymbol, wenn das alt-Attribut leer ist und das Bild nicht angezeigt werden konnte.

Dieses Attribut wird auch verwendet, wenn man das Bild in Text kopiert und einfügt oder ein verlinktes Bild zu einem Lesezeichen speichert.

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-Header in der Antwort auszulösen, um eine bildbasierte Attributionsquelle oder einen Attributionstrigger zu registrieren, je nachdem. 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 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 Attributionsquelle oder -auslösung auf demselben Server durchführen. Bei der Registrierung eines Attributionstriggers ist diese Eigenschaft optional und ein Boolean-Wert wird verwendet, wenn sie weggelassen wird.
• Wert mit einer oder mehreren URLs, 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 möchten die Registrierung der Attributionsquelle nur auf einem anderen Server durchführen. 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(s) angegebene(n) URL(s) in attributionSrc zusätzlich zum Ursprungsserver gesendet. Diese URLs können dann mit einem Attribution-Reporting-Register-Source- oder Attribution-Reporting-Register-Trigger-Header wie erforderlich antworten, um die Registrierung abzuschließen.

Hinweis: Die Angabe mehrerer URLs bedeutet, dass mehrere Attributionsquellen auf derselben Funktion registriert werden können. Sie könnten zum Beispiel verschiedene Kampagnen haben, deren Erfolg Sie messen möchten, was das Erstellen unterschiedlicher Berichte über unterschiedliche Daten beinhaltet.

crossorigin

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

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

Wenn das crossorigin-Attribut angegeben ist, wird eine CORS-Anfrage gesendet (mit dem Origin-Anforderungs-Header); aber wenn der Server nicht darauf eingeht, den Zugriff auf die Bilddaten durch die Ursprungsseite zuzulassen (indem er keinen Access-Control-Allow-Origin-Antwortheader sendet oder indem er die Ursprungsseite nicht in den Access-Control-Allow-Origin-Antwortheader aufnimmt, den er sendet), blockiert der Browser das Laden des Bildes und protokolliert einen CORS-Fehler in der Entwicklerkonsole.

Zulässige Werte:

anonymous

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

use-credentials

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

Wenn das Attribut einen ungültigen Wert hat, behandeln Browser es so, als ob der Wert anonymous verwendet wurde. Weitere Informationen finden Sie unter CORS-Einstellungen für Attribute.

decoding

Dieses Attribut gibt dem Browser einen Hinweis, ob er die Bilddecodierung zusammen mit dem Rendern anderer DOM-Inhalte in einem einzigen Anzeigezyklus, der "korrekter" aussieht (sync), durchführen soll oder ob er andere DOM-Inhalte zuerst rendern und anzeigen soll, bevor er das Bild decodiert und es später anzeigt (async). In der Praxis bedeutet async, dass der nächste Zeichenprozess nicht darauf wartet, dass das Bild decodiert wird.

Es ist oft schwierig, einen merklichen Effekt bei der Verwendung von decoding auf statische <img>-Elemente 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 behandelt werden, sodass die Synchronisation der Inhaltaktualisierungen weniger sichtbar ist. Das Blockieren der Darstellung während die Dekodierung erfolgt, kann jedoch messbar sein, auch wenn es für das menschliche Auge schwer zu erkennen ist. Siehe Was macht das Image-Decoding-Attribut eigentlich? für eine detaillierte Analyse (tunetheweb.com, 2023).

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

Zulässige Werte:

sync

Decodiert das Bild synchron zusammen mit dem Rendern der anderen DOM-Inhalte und zeigt alles zusammen an.

async

Decodiert das Bild asynchron, nach dem Rendern und Darstellen 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 Identifikator für das beobachtete Bild-Element. Siehe auch die Seite zum elementtiming-Attribut.

fetchpriority

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

high

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

low

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

auto

Legt keine Präferenz für die Abrufpriorität fest. 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 Pixel. Muss eine Ganzzahl ohne Einheit sein.

Hinweis: Die Aufnahme 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, wodurch Layout-Verschiebungen beim Herunterladen und Zeichnen des Bildes auf dem Bildschirm reduziert oder sogar verhindert werden können. Die Reduzierung von Layout-Verschiebungen ist ein wesentlicher Bestandteil für eine gute Benutzererfahrung und Web-Performance.

ismap

Dieses Boolean-Attribut gibt an, dass das Bild Teil einer serverseitigen Karte ist. In diesem Fall werden die Koordinaten, an denen der Benutzer auf das 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 bietet Benutzern ohne Zeigevorrichtungen ein Fallback-Ziel.

loading

Gibt an, wie der Browser das Bild laden soll:

eager

Lädt das Bild sofort, unabhängig davon, ob das Bild derzeit innerhalb des sichtbaren Ansichtsfensters liegt (dies ist der Standardwert).

lazy

Verzögert das Laden des Bildes, bis es eine berechnete Entfernung vom Ansichtsfenster erreicht, wie vom Browser definiert. Die Absicht ist es, das Netzwerk und den Speicherbedarf zu vermeiden, um das Bild zu handhaben, bis es wahrscheinlich gebraucht wird. Dies verbessert im Allgemeinen die Leistung der Inhalte in den meisten typischen Anwendungsfällen.

Hinweis: Das Laden wird nur verzögert, wenn JavaScript aktiviert ist. Dies ist eine Anti-Tracking-Maßnahme, da, wenn ein Benutzeragent das verzögerte Laden unterstützen würde, wenn Scripting deaktiviert ist, es immer noch möglich wäre, die ungefähre Bildlaufposition eines Benutzers während einer Sitzung zu verfolgen, indem strategisch Bilder im Markup platziert werden, sodass ein Server nachverfolgen kann, wie viele Bilder angefordert werden und wann.

Hinweis: Bilder mit loading auf lazy werden nie geladen, wenn sie keinen sichtbaren Teil eines Elements schneiden, auch wenn das Laden dieser Bilder das ändern würde, da nicht geladene Bilder eine width und height von 0 haben. Die Angabe von width und height bei Lazy-Loading-Bildern behebt dieses Problem und ist eine bewährte Praxis, empfohlen von der Spezifikation. Dies hilft auch, Layout-Verschiebungen zu vermeiden.

referrerpolicy

Ein String, der angibt, welchen Referrer bei der Anforderung der Ressource verwendet werden soll:

• no-referrer: Der Referer-Header wird nicht gesendet.
• no-referrer-when-downgrade: Der Referer-Header wird nicht an Ursprünge ohne TLS (HTTPS) gesendet.
• origin: Der gesendete Referrer wird auf den Ursprung der verweisenden Seite begrenzt: sein Schema, Hostname und Port.
• origin-when-cross-origin: Der an andere Ursprünge gesendete Referrer wird auf das Schema, den Host und den Port begrenzt. Navigationen auf demselben Ursprung enthalten weiterhin den Pfad.
• same-origin: Ein Referrer wird für same origin gesendet, aber bei Cross-Origin-Anfragen wird keine Referenzinformation enthalten.
• strict-origin: Der Ursprung des Dokuments wird nur dann als Referrer gesendet, wenn das Sicherheitsprotokoll auf demselben Niveau bleibt (HTTPS→HTTPS), jedoch nicht an ein weniger sicheres Ziel (HTTPS→HTTP) gesandt.
• strict-origin-when-cross-origin (Standard): Eine vollständige URL wird gesendet, wenn eine Same-Origin-Anfrage durchgeführt wird, nur der Ursprung wird gesendet, wenn das Protokollsicherheitsniveau gleich bleibt (HTTPS→HTTPS), und es wird kein Header an ein weniger sicheres Ziel gesendet (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 leakt.

sizes

Ein oder mehrere durch Kommas getrennte Werte, die Quellgrößen oder das auto Schlüsselwort sein können.

Eine Quellgröße besteht aus:

1. Einer Medienbedingung, die bei dem letzten Eintrag in der Liste weggelassen werden kann.
2. Einem Quellgrößenwert.

Medienbedingungen beschreiben Eigenschaften des Ansichtsfensters, nicht des Bildes. Beispielsweise schlägt (height <= 500px) 1000px die Verwendung einer Bildquelle von 1000px Breite vor, wenn die Ansichtshöhe 500px oder kleiner ist. Da ein Quellgrößen-Beschreiber die Breite spezifiziert, die beim Layout für das Bild verwendet werden soll, basiert die Medienbedingung typischerweise (aber nicht notwendigerweise) auf der Breite.

Quellgrößenwerte geben die vorgesehene Anzeigengröße des Bildes an. Benutzeragenten verwenden die aktuelle Quellgröße, um eine der Quellen auszuwählen, die im srcset-Attribut bereitgestellt werden, wenn diese Quellen mit Breiten (w) Beschreibern beschrieben sind. Die ausgewählte Quellgröße beeinflusst die intrinsische Größe des Bildes (die Anzeigengröße des Bildes, wenn keine CSS-Stilierung angewendet ist). Wenn das srcset-Attribut nicht vorhanden ist oder keine Werte mit einem Breitenbeschreiber enthält, hat das sizes-Attribut keine Wirkung.

Ein Quellgrößenwert kann jede nicht-negative Länge sein. Es darf keine CSS-Funktionen außer den Mathe-Funktionen verwenden. Einheiten werden auf die gleiche Weise interpretiert wie bei Media Queries, was bedeutet, dass alle relativen Längeneinheiten relativ zur Dokumentwurzel und nicht zum <img>-Element sind. Beispielsweise ist ein em-Wert relativ zur Schriftgröße der Wurzel und 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 in Kombination mit loading="lazy" gültig und wird auf die konkrete Größe des Bildes aufgelöst. 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 Standardbildbreite von 300px annimmt. Für eine bessere Rückwärtskompatibilität mit Browsern, die auto nicht unterstützen, können Sie Fallbackgrößen nach dem auto im sizes-Attribut einfü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. Obligatorisch für das <img>-Element. In Browsern, die srcset unterstützen, wird src wie ein Kandidatenbild mit einem Pixeldichte-Beschreiber von 1x behandelt, es sei denn, ein Bild mit diesem Pixeldichte-Beschreiber ist bereits in srcset definiert oder srcset enthält w-Beschreiber.

srcset

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

1. Einer URL zu einem Bild
2. Optional, einem Leerzeichengefolgt von einem der folgenden:
   • Einem Breitenbeschreiber (eine positive Ganzzahl, gefolgt von w). Der Breitenbeschreiber wird durch die in den sizes-Attribut angegebene Quelgröße geteilt, um die effektive Pixeldichte zu berechnen.
   • Einem Pixeldichte-Beschreiber (eine positive Gleitkommazahl, gefolgt von x).

Wenn kein Beschreiber angegeben ist, wird die Quelle dem Standardbeschreiber von 1x zugeordnet.

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

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

Der Benutzeragent wählt nach eigenem Ermessen eine der verfügbaren Quellen aus. Dies gibt ihm erhebliche Freiheit, seine Auswahl basierend auf Dingen wie Benutzerpräferenzen oder Bandbreitenbedingungen anzupassen. Siehe unser Leitfaden für responsive Bilder für ein Beispiel.

width

Die intrinsische Breite des Bildes in Pixel. Muss eine Ganzzahl 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 in einem <a>- oder <button>-Element enthalten ist.

Veraltete Attribute

align Veraltet

Richtet das Bild mit seinem umgebenden Kontext aus. Verwenden Sie die float- und/oder vertical-align-Eigenschaften CSS anstelle dieses Attributs. Zulässige Werte:

top

Entsprechend vertical-align: top oder vertical-align: text-top

middle

Entsprechend vertical-align: -moz-middle-with-baseline

bottom

Der Standardwert, entsprechend vertical-align: unset oder vertical-align: initial

left

Entsprechend float: left

right

Entsprechend float: right

border Veraltet

Die Breite eines Rahmens um das Bild. Verwenden Sie die border-Eigenschaft CSS stattdessen.

hspace Veraltet

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

longdesc Veraltet

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

Hinweis: Dieses Attribut wird in der HTML-Spezifikation 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 das id-Attribut stattdessen.

vspace Veraltet

Die Anzahl der Pixel weißen Raums oberhalb und unterhalb des Bildes. Verwenden Sie die margin-Eigenschaft CSS stattdessen.

Styling mit CSS

<img> ist ein ersetztes Element; es hat standardmäßig einen display-Wert von inline, 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, etc. auf ein Bild anwenden.

<img> hat keine Grundlinie, daher wird beim Verwenden von Bildern in einem Inline-Formatierungskontext mit vertical-align: baseline das untere Ende des Bildes auf die Textgrundlinie gesetzt.

Sie können die object-position-Eigenschaft verwenden, um das Bild innerhalb des Elementrahmens zu positionieren, und die object-fit-Eigenschaft, um die Größenanpassung des Bildes innerhalb des Rahmens einzustellen (z.B. ob das Bild in den Rahmen passen oder es füllen soll, auch wenn Clipping erforderlich ist).

Je nach Typ kann ein Bild eine intrinsische Breite und Höhe haben. Für einige Bildtypen sind jedoch intrinsische Abmessungen nicht erforderlich. SVG-Bilder haben beispielsweise keine intrinsischen Abmessungen, wenn das root <svg>-Element keine width oder height hat.

Barrierefreiheit

Sinnvolle alternative Beschreibungen verfassen

Der Wert eines alt-Attributs sollte einen klaren und prägnanten Textersatz für den Bildinhalt bereitstellen. Er sollte weder das Vorhandensein des Bildes selbst noch den Dateinamen des Bildes beschreiben. Wenn das alt-Attribut bewusst weggelassen wurde, weil das Bild kein textuelles Äquivalent hat, sollten alternative Methoden in Betracht gezogen werden, um das darzustellen, was das Bild vermitteln soll.

Nicht

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

Machen Sie es so

<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 zu sehen, ob er dieselbe Bedeutung wie das Bild vermittelt. Zum Beispiel, wenn dem Bild der Satz "Auf meinen Reisen sah ich ein niedliches kleines Tier:" vorangestellt wäre, 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 macht. Das Machen Sie es so-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 macht.

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 Wert des alt-Attributs zu beschreiben. Zum Beispiel könnten Sie alt="nächste Seite" anstelle von alt="Pfeil nach rechts" schreiben. Sie könnten auch in Betracht ziehen, eine optionale weitere Beschreibung in einem title-Attribut hinzuzufügen; dies kann von Bildschirmlesegeräten gelesen werden, wenn der Benutzer es anfordert.

Wenn ein alt-Attribut in einem Bild fehlt, geben einige Bildschirmlesegeräte möglicherweise den Dateinamen des Bildes wieder. 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-texts: The Ultimate Guide — Axess Lab
• Wie man tolle Alt-Texte gestaltet: Ein Einleitungsartikel | Deque
• MDN Understanding WCAG, Guideline 1.1 explanations
• Verständnis des Erfolgskriteriums 1.1.1 | W3C Understanding WCAG 2.0

Identifizierung von SVGs als Bild

Aufgrund eines VoiceOver-Bugs gibt VoiceOver SVG-Bilder nicht korrekt als Bilder aus. Fügen Sie role="img" bei allen <img>-Elementen mit SVG-Quelldateien hinzu, um sicherzustellen, dass unterstützende Technologien SVGs 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. Zusätzlich sollte vermieden werden, den Wert des alt-Attributs in einem title-Attribut zu duplizieren, das auf dem gleichen Bild deklariert wurde. Dadurch könnte es passieren, dass einige Bildschirmlesegeräte denselben Text zweimal ankündigen, was eine verwirrende Erfahrung schaffen kann.

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

Der Wert des title-Attributs wird dem Benutzer normalerweise als Tooltip präsentiert, der kurzzeitig erscheint, nachdem der Cursor aufgehört hat, sich über das Bild zu bewegen. Während dies dem Benutzer zusätzliche Informationen liefern kann, sollten Sie nicht davon ausgehen, dass der Benutzer es jemals sehen wird: der Benutzer hat möglicherweise nur eine Tastatur oder einen Touchscreen. Wenn Sie Informationen haben, die besonders wichtig oder wertvoll für den Benutzer sind, präsentieren Sie sie inline mit einer der oben erwähnten Methoden anstelle der Verwendung von title.

• 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 alternativen Text für Barrierefreiheit.

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

Bild-Link

Dieses Beispiel baut auf dem vorherigen auf und zeigt, wie man das Bild in einen Link verwandelt. Dazu wird das <img>-Tag innerhalb des <a>-Elements verschachtelt. Sie sollten den alternativen Text so gestalten, 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-Attributs

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

<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 Benutzeragenten ignoriert, die srcset unterstützen, wenn w-Beschreiber enthalten sind. Wenn die (width <= 600px)-Medienbedingung übereinstimmt, wird das 200 Pixel breite Bild geladen (es ist dasjenige, das 200px am besten 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 unschuldige Verwendungen haben, können sie unerwünschte Folgen für die Sicherheit und Privatsphäre von Benutzern haben. Weitere Informationen und Gegenmaßnahmen finden Sie unter Referer-Header: Datenschutz- und Sicherheitsbedenken.

Technische Übersicht

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 für Bilddateitypen und -formate
• Responsive Bilder