<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 zum Bild, das eingebettet werden soll. 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 zwingend erforderlich und äußerst nützlich für die Barrierefreiheit ist — Bildschirmlesegeräte lesen den Attributwert vor, damit ihre 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, Inhaltssperrungen oder Linkverfall.

Es gibt viele andere 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 beansprucht, bevor es geladen wird, um Layoutverschiebungen zu entschärfen.
• Hinweise zu responsiven Bildern mit sizes und srcset (siehe auch das <picture>-Element und unser Leitfaden für responsive Bilder).

Unterstützte Bildformate

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

Die am häufigsten auf dem Web verwendeten Bilddateiformate sind:

• APNG (Animated Portable Network Graphics) — Eine gute Wahl für verlustfreie Animationssequenzen (GIF ist weniger performant).
• AVIF (AV1 Image File Format) — Eine gute Wahl für sowohl Bilder als auch animierte Bilder aufgrund hoher Leistung.
• GIF (Graphics Interchange Format) — Eine gute Wahl für einfache Bilder und Animationen.
• JPEG (Joint Photographic Expert Group image) — Eine gute Wahl für verlustbehaftete Kompression von Standbildern (derzeit das beliebteste Format).
• PNG (Portable Network Graphics) — Eine 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 dargestellt 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 stehende als auch animierte Bilder viel besser als PNG, JPEG und GIF performen.

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

Bildladefehler

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

• Die Attribute src oder srcset sind leer ("") oder null.
• Die src URL ist dieselbe wie die URL der Seite, auf der sich der Benutzer gerade befindet.
• Das Bild ist in irgendeiner Weise beschädigt, sodass es nicht geladen werden kann.
• Die Metadaten des Bildes sind in einer Weise beschädigt, dass es unmöglich ist, seine Abmessungen zu erfassen, und es waren keine Abmessungen in den Attributen des <img>-Elements angegeben.
• Das Bild ist in einem Format, das durch den User Agent 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, z. B.:

• Nicht-visuelle Browser (wie z. B. von Menschen mit Sehbehinderungen verwendet)
• Der Benutzer entscheidet sich, Bilder nicht anzuzeigen (Bandbreitenersparnis, Datenschutzgründe)
• Das Bild ist ungültig oder ein nicht unterstützter Typ

In diesen Fällen kann der Browser das Bild durch den Text im alt-Attribut des Elements ersetzen. Aus diesen und anderen Gründen sollten Sie, wann immer möglich, einen nützlichen Wert für alt bereitstellen.

Wenn Sie dieses Attribut auf einen leeren String (alt="") setzen, zeigt dies 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 vom Rendern auslassen. Visuelle Browser werden auch das kaputte Bildsymbol ausblenden, wenn das alt-Attribut leer ist und das Bild nicht angezeigt wird.

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

attributionsrc Veraltet

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 Quell- oder Trigger-Ereignis 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 den Attribution-Reporting-Eligible-Header an denselben Server senden möchten, auf den das src-Attribut verweist. Dies ist in Ordnung, wenn Sie die Registrierung der Attributionsquelle oder des Triggers auf demselben Server verwalten. 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 wenn Sie die Registrierung der Attributionsquelle 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 URL(s) zusätzlich zum Ursprungsserver der Ressource gesendet. Diese URLs können dann entsprechend 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 auf derselben Funktion registriert werden können. Zum Beispiel könnten Sie verschiedene Kampagnen haben, deren Erfolg Sie messen möchten, was die Erstellung unterschiedlicher Berichte zu unterschiedlichen Daten umfasst.

crossorigin

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

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

Wenn das crossorigin-Attribut angegeben ist, wird eine CORS-Anforderung gesendet (mit dem Origin-Header); wenn der Server jedoch nicht aktiv die Bereitstellung von plattformübergreifendem Zugriff auf die Bilddaten durch die Ursprungssite ermöglicht (durch das Fehlen eines Access-Control-Allow-Origin-Antwortheaders oder das Nicht-Einschließen des Ursprungs der Website in einen vorhandenen Access-Control-Allow-Origin-Antwortheader), blockiert der Browser das Laden des Bildes und protokolliert einen CORS-Fehler in der Entwicklerkonsole.

Zulässige Werte:

anonymous

Eine CORS-Anforderung wird ohne Anmeldedaten gesendet (d.h. ohne Cookies, X.509-Zertifikate oder den Authorization-Anforderungsheader).

use-credentials

Die CORS-Anforderung wird mit allen enthaltenen Anmeldedaten gesendet (d.h. Cookies, X.509-Zertifikate und der Authorization-Anforderungsheader). Wenn der Server nicht aktiv die Bereitstellung von Anmeldedaten mit der Ursprungssite ermöglicht (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 wäre der anonymous-Wert verwendet worden. Siehe CORS-Einstellungen Attribute für weitere Informationen.

decoding

Dieses Attribut bietet dem Browser einen Hinweis darauf, ob die Bilddekodierung zusammen mit dem Rendern der anderen DOM-Inhalte in einem einzigen Präsentationsschritt durchgeführt werden soll, der mehr "korrekt" aussieht (sync), oder ob die anderen DOM-Inhalte zuerst gerendert und präsentiert und das Bild danach dekodiert und später präsentiert werden soll (async). In der Praxis bedeutet async, dass das nächste Rendering nicht auf die Dekodierung des Bildes wartet.

Es ist oft schwierig, einen merklichen Effekt bei der Verwendung von decoding auf statischen <img>-Elementen zu erkennen. 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. Daher ist die „Synchronisierung“ von Inhaltsaktualisierungen weniger offensichtlich. Das Blockieren des Renderns während der Dekodierung, auch wenn es oft sehr klein ist, kann jedoch gemessen werden — auch wenn es schwierig ist, es mit dem menschlichen Auge zu erkennen. Siehe Was macht das Bilddekodierungsattribut tatsächlich? für eine detailliertere Analyse (tunetheweb.com, 2023).

Die Verwendung unterschiedlicher decoding-Typen kann zu deutlicheren 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

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

async

Dekodieren Sie 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-Element. Siehe auch die Seite elementtiming.

fetchpriority

Bietet einen Hinweis auf die relative Priorität, die beim Abrufen des Bildes verwendet werden soll. Zulässige Werte:

high

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

low

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

auto

Legen Sie 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.

height

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

Hinweis: Das Hinzufügen von height und width ermöglicht es dem Browser, das Aspektverhältnis des Bildes vor dem Laden zu berechnen. Dieses Aspektverhältnis wird verwendet, um den Platz zu reservieren, der für die Anzeige des Bildes benötigt wird, und reduziert oder verhindert sogar einen Layoutwechsel, wenn das Bild heruntergeladen und auf den Bildschirm gemalt wird. Die Reduzierung von Layoutverschiebungen ist ein wesentlicher Bestandteil einer guten Benutzererfahrung und Webperformance.

ismap

Dieses boolesche Attribut gibt 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 zulässig, wenn das <img>-Element ein Nachkomme eines <a>-Elements mit einem gültigen href Attribut ist. Dies bietet Nutzern 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 sich das Bild derzeit innerhalb des sichtbaren Ansichtsfensters befindet oder nicht (dies ist der Standardwert).

lazy

Verzögert das Laden des Bildes, bis es eine berechnete Entfernung vom Ansichtsfenster erreicht, wie vom Browser definiert. Ziel ist es, das für die Verarbeitung des Bildes erforderliche Netzwerk und den Speicherbedarf so lange wie möglich zu vermeiden, bis sicher ist, dass es benötigt wird. Dies verbessert in den meisten typischen Anwendungsfällen die Leistung des Inhalts im Allgemeinen.

Während explizite width und height Attribute für alle Bilder empfohlen werden, um Layoutverschiebungen zu vermeiden, sind sie besonders wichtig für verzögert geladene. Verzögert geladene Bilder werden nie geladen, wenn sie nicht einen sichtbaren Teil eines Elements schneiden, selbst wenn das Laden dieser Bilder dies ändern würde, da ungeladene Bilder eine width und height von 0 haben. Es führt zu einer noch störenderen Benutzererfahrung, wenn der im Ansichtsfenster sichtbare Inhalt inmitten des Lesens neu angeordnet wird.

Das load Ereignis wird ausgelöst, nachdem eifrig geladene Bilder geladen und verarbeitet wurden, aber bevor verzögert geladene geladen werden, selbst wenn die sofort nach dem initialen Laden der Seite verzögert geladenen Bilder sich innerhalb des sichtbaren Ansichtsfensters befinden. Diese Bilder werden immer noch geladen, sobald das Layout abgeschlossen ist; sie beeinflussen jedoch nicht das Timing des load-Ereignisses. Das bedeutet, dass wenn load ausgelöst wird, es möglich ist, dass verzögert geladene Bilder im sichtbaren Ansichtsfenster noch nicht sichtbar sind.

Das Laden wird nur verzögert, wenn JavaScript aktiviert ist. Dies ist eine Anti-Tracking-Maßnahme, da Benutzer-Agents die verzögerte Ladefunktion bei deaktiviertem Skripting nicht unterstützen würden, würde es immer noch möglich sein, die ungefähre Scrollposition eines Benutzers während einer Sitzung zu verfolgen, indem strategisch Bilder in der Markup-Seite platziert werden, damit ein Server nachverfolgen kann, wie viele Bilder angefordert werden und wann.

referrerpolicy

Ein String, der angibt, welcher 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 wird auf den Ursprung der verweisenden Seite beschränkt: sein Schema, Host und Port.
• origin-when-cross-origin: Der Referrer, der an andere Ursprünge gesendet wird, wird auf das Schema, den Host und den Port beschränkt. Navigationen im gleichen Ursprung enthalten nach wie vor den Pfad.
• same-origin: Ein Referrer wird für den gleichen Ursprung gesendet, bei plattformübergreifenden Anfragen wird jedoch keine Referrer-Information gesendet.
• strict-origin: Nur den Ursprung des Dokuments als Referrer senden, wenn das Sicherheitslevel des Protokolls gleich bleibt (HTTPS→HTTPS), aber nicht an ein weniger sicheres Ziel senden (HTTPS→HTTP).
• strict-origin-when-cross-origin (Standard): Eine vollständige URL senden, wenn eine Anfrage mit dem gleichen Ursprung durchgeführt wird, nur den Ursprung senden, wenn das Sicherheitslevel des Protokolls gleich bleibt (HTTPS→HTTPS), und kein Header an ein weniger sicheres Ziel (HTTPS→HTTP) senden.
• unsafe-url: Der Referrer wird den Ursprung und den Pfad enthalten (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 Kommata getrennte Werte, die Quellgrößen oder das auto-Schlüsselwort sein können. Die Spezifikation erfordert, dass das sizes-Attribut nur vorhanden ist, wenn srcset Breitenbeschreibungen verwendet.

Eine Quellgröße besteht aus:

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

Medienbedingungen beschreiben Eigenschaften des Ansichtsfensters, nicht des Bildes. Zum Beispiel empfiehlt (height <= 500px) 1000px die Verwendung einer Bildquelle mit einer Breite von 1000px, wenn die Ansichtsfenster-Höhe 500px oder weniger beträgt. Da eine Quellgrößenbeschreibung die in das Layout zu verwendende Bildbreite angibt, basiert die Medienbedingung typischerweise (aber nicht notwendigerweise) auf der Breite.

Quellgrößenwerte spezifizieren die beabsichtigte Anzeigegröße des Bildes. User Agents verwenden die aktuelle Quellgröße, um eine der vom srcset-Attribut bereitgestellten Quellen auszuwählen, wenn diese Quellen unter Verwendung von Breitenbeschreibungen (w) beschrieben werden. Die ausgewählte Quellgröße beeinflusst die intrinsische Größe des Bildes (die Anzeigengröße des Bildes, wenn keine CSS-Styling angewendet wird).

Ein Quellgrößenwert kann eine beliebige nicht-negative Länge sein. Er darf keine CSS-Funktionen verwenden, außer den Mathe-Funktionen. Einheiten werden auf die gleiche Weise wie bei Medienabfragen interpretiert, was bedeutet, dass alle relativen Längeneinheiten relativ zur Dokumentwurzel und nicht zum <img>-Element sind. Zum Beispiel ist ein em-Wert relativ zur Basis-Schriftgröße, nicht zur Schriftgröße des Bildes. Prozentwerte sind nicht zulässig. Wenn das sizes-Attribut nicht vorhanden ist, hat es standardmäßig den Wert 100vw (die Ansichtsfensterbreite).

Das auto-Schlüsselwort kann die gesamte Größtenliste oder den ersten Eintrag in der Liste ersetzen. Es ist nur gültig in Kombination mit loading="lazy" 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 Standard-Bildbreite von 300px annimmt. Für eine bessere Rückwärtskompatibilität mit Browsern, die auto nicht unterstützen, können Sie nach auto im sizes-Attribut Fallback-Größen angeben:

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. Mindestens eines der Attribute src und srcset wird für ein <img>-Element benötigt. Wenn srcset angegeben ist, wird src auf eine der beiden Arten verwendet:

• als Fallback für Browser, die srcset nicht unterstützen.
• wenn srcset den "x"-Descriptor verwendet, dann entspricht src der Quelle mit dem Dichte-Descriptor 1x; das heißt, das im src-Attribut angegebene Bild wird auf Bildschirmen mit niedriger Dichte verwendet (wie typische 72 DPI oder 96 DPI Displays).

srcset

Einer oder mehrere durch Kommata getrennte Strings, die mögliche Bildquellen für den User Agent angeben.

Jeder String besteht aus:

1. Einer URL zu einem Bild
2. Optional, gefolgt von einem Leerzeichen, gefolgt von einem von:
   • einem Breitenbeschreiber (einer ganzen positiven Zahl, gefolgt von w). Er muss die intrinsische Breite des referenzierten Bildes entsprechen. Der Breitenbeschreiber wird durch die im sizes-Attribut angegebene Quellgröße geteilt, um die effektive Pixeldichte zu berechnen. Um beispielsweise eine Bildressource bereitzustellen, die verwendet werden soll, wenn der Renderer ein 450 Pixel breites Bild benötigt, verwenden Sie den Breitenbeschreiber 450w. Wenn ein srcset "w"-Beschreiber enthält, verwendet der Browser diese Beschreiber zusammen mit dem sizes-Attribut, um eine Ressource auszuwählen.
   • einem Pixeldichtebeschreiber (eine positive Fließkommazahl, gefolgt von x). Er gibt die Bedingung an, unter der die entsprechende Bildressource als Pixeldichte des Displays verwendet werden soll. Um ein Bild in doppelt so hoher Standarddichte bereitzustellen, verwenden Sie 2x oder 2.0x.

Wenn kein Beschreiber angegeben ist, wird der Quelle der Standardbeschreiber 1x zugewiesen. Es ist nicht korrekt, in einem srcset-Attribut Breitenbeschreibern und Pixeldichtebeschreiber zu mischen. Doppelte Beschreiber (zum Beispiel zwei Quellen im gleichen srcset, die beide mit 2x beschrieben werden) sind ebenfalls ungültig.

Leerzeichen, außer dem Leerzeichen, das die URL von dem entsprechenden Bedingungsbeschreiber trennt, werden ignoriert; das umfasst führende und nachfolgende Leerzeichen sowie Leerzeichen vor oder nach jedem Komma. Wenn jedoch ein Bildkandidat-String keine Beschreibungen und kein Leerzeichen nach der URL enthält, muss der folgende Bildkandidat-String, falls vorhanden, mit einem oder mehreren Leerzeichen beginnen, andernfalls wird das Komma als Teil der URL betrachtet.

Wenn das srcset-Attribut des <img>-Elements x-Beschreiber verwendet, betrachten Browser auch die URL im src-Attribut (falls vorhanden) als Kandidaten und weisen ihr den Standardbeschreiber 1x zu. Wenn das srcset-Attribut hingegen Breitenbeschreiber verwendet, wird src nicht berücksichtigt, und stattdessen wird das sizes-Attribut herangezogen.

Der User Agent wählt nach eigenem Ermessen aus den verfügbaren Quellen aus. Dies bietet ihnen erhebliche Freiheit, ihre Auswahl basierend auf Präferenzen der Benutzer oder Bandbreite-Bedingungen zuzuschneiden. Siehe unser Leitfaden für responsive Bilder für ein Beispiel.

width

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

usemap

Der partielle URL (beginnend mit #) einer Bildkarte, die mit dem Element verknüpft 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 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 Standard; 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 stattdessen die border-CSS-Eigenschaft.

hspace Veraltet

Die Anzahl von Pixeln weißem Raum links und rechts vom Bild. Verwenden Sie stattdessen die margin-CSS-Eigenschaft.

longdesc Veraltet

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

Hinweis: Dieses Attribut wird im HTML-Standard als obsolet angesehen. Seine Zukunft ist ungewiss; 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 von Pixeln weißem Raum oben und unten vom 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 Standardabmessungen werden von den intrinsischen Werten des eingebetteten Bildes definiert, als wäre es inline-block. Sie können Eigenschaften wie border/border-radius, padding/margin, width, height usw. auf ein Bild anwenden.

<img> hat keine Basislinie, daher wird das Bild, wenn es in einem Inline-Formatierungskontext mit vertical-align: baseline verwendet wird, auf der Textbasislinie positioniert.

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üllt oder sogar wenn dafür Beschneiden erforderlich ist).

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

Barrierefreiheit

Sinnvolle Alternativbeschreibungen erstellen

Der Wert eines alt-Attributs sollte einen klaren und prägnanten Textersatz für den Inhalt des Bildes bieten. Es sollte weder die Präsenz des Bildes selbst beschreiben noch den Dateinamen des Bildes. Wenn das alt-Attribut absichtlich weggelassen wird, weil das Bild kein textliches Äquivalent hat, sollten Sie alternative Methoden in Betracht ziehen, um das zu präsentieren, was das Bild kommunizieren möchte.

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 dem vorausgehenden Textinhalt zu lesen, um zu sehen, ob er die gleiche Bedeutung wie das Bild vermittelt. Wenn das Bild zum Beispiel durch den Satz "Auf meinen Reisen habe ich ein süßes kleines Tier gesehen:" vorangegangen wird, könnte das Nicht tun-Beispiel von einem Bildschirmleser als "Auf meinen Reisen habe ich ein süßes kleines Tier gesehen: Bild" vorgelesen werden, was keinen Sinn ergibt. Das Tun-Beispiel könnte von einem Bildschirmleser als "Auf meinen Reisen habe ich ein süßes kleines Tier gesehen: Ein Pinguin am Strand." vorgelesen werden, was Sinn ergibt.

Für Bilder, die eine Aktion auslösen, zum Beispiel Bilder, die in ein <a>- oder <button>-Element eingebettet sind, sollten Sie in Erwägung 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 rechts" verwenden. Sie könnten auch erwägen, eine optionale weitere Beschreibung in einem title-Attribut hinzuzufügen; dies kann von Bildschirmlesegeräten gelesen werden, wenn der Benutzer dies wünscht.

Wenn ein alt-Attribut bei einem Bild fehlt, können einige Bildschirmlesegeräte stattdessen den Dateinamen des Bildes ankündigen. Dies kann verwirrend sein, wenn der Dateiname den Bildinhalt nicht repräsentiert.

• An alt Decision Tree • Images • WAI Web Accessibility Tutorials
• Alt-texts: The Ultimate Guide — Axess Lab
• How to Design Great Alt Text: An Introduction | Deque
• MDN Understanding WCAG, Guideline 1.1 explanations
• Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0

SVG als Bild identifizieren

Aufgrund eines VoiceOver-Bugs gibt VoiceOver SVG-Bilder nicht korrekt als Bilder an. Fügen Sie allen <img>-Elementen mit SVG-Quelldateien role="img" hinzu, um sicherzustellen, dass unterstützende Technologien das SVG korrekt als Bildinhalt 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. Außerdem sollten Sie vermeiden, den Wert des alt-Attributs in einem title-Attribut zu duplizieren, das auf demselben Bild deklariert ist. Dies kann dazu führen, dass einige Bildschirmlesegeräte denselben Text zweimal ankündigen, was zu einer verwirrenden Erfahrung führt.

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

Der Wert des title-Attributs wird dem Benutzer in der Regel als Tooltip angezeigt, der kurz darauf erscheint, nachdem der Cursor auf dem Bild anhält. Während dies dem Benutzer zusätzliche Informationen bieten kann, sollten Sie nicht davon ausgehen, dass der Benutzer es jemals sieht: Der Benutzer könnte nur über eine Tastatur oder einen Touchscreen verfügen. Wenn Sie Informationen haben, die besonders wichtig oder wertvoll für den Benutzer sind, präsentieren Sie sie inline mit einer der oben genannten Methoden anstelle der Verwendung des title-Attributs.

• Using the HTML title attribute – updated | The Paciello Group

Beispiele

Alternativer Text

Das folgende Beispiel bettet ein Bild in die Seite ein und enthält einen Alternativtext 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 das Bild in einen Link verwandelt wird. Um dies zu tun, verschachteln Sie das <img>-Tag im <a>. Sie sollten den Alternativtext so gestalten, dass er die Ressource beschreibt, auf die der Link zeigt, als ob Sie stattdessen 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 hinzu; diese wird stattdessen auf hochauflösenden Geräten geladen, anstatt des Bildes im src-Attribut. Das Bild, das im src-Attribut referenziert wird, wird als 1x-Kandidat in User Agents, die srcset unterstützen, gewertet.

<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-Beschreiber enthalten sind. Wenn die Medienbedingung (width <= 600px) übereinstimmt, wird das 200 Pixel breite Bild geladen (dasjenige, das am engsten 200px 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 Verwendungszwecke haben, können sie unerwünschte Folgen für die Sicherheit und Privatsphäre 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
• Leitfaden für Bilddateitypen und -formate
• Responsive Bilder