<img>: Das 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 srcset-Attribut verfügbar ist. Es muss jedoch mindestens eines der src- oder srcset-Attribute angegeben werden.
• Das alt-Attribut enthält einen textuellen Ersatz für das Bild, was verpflichtend und unglaublich nützlich für die Barrierefreiheit ist — Bildschirmlesegeräte lesen den Attributwert laut vor, damit ihre Nutzer wissen, was das Bild bedeutet. Der Alt-Text wird auch auf der Seite angezeigt, wenn das Bild aus irgendeinem Grund nicht geladen werden kann: z. B. Netzwerkfehler, Inhaltsblockierung oder Link-Verfall.

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

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 im Web verwendeten Bilddateiformate sind:

• APNG (Animated Portable Network Graphics) — Gute Wahl für verlustfreie Animationssequenzen (GIF ist weniger leistungsfähig)
• 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 von Standbildern (derzeit am beliebtesten).
• PNG (Portable Network Graphics) — Gute Wahl für verlustfreie Kompression von Standbildern (etwas bessere Qualität als JPEG).
• SVG (Scalable Vector Graphics) — Vektorbildformat. Verwendung für Bilder, die genau in verschiedenen Größen 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 viel besser abschneiden als PNG, JPEG, GIF.

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

Bildladefehler

Wenn beim Laden oder Rendern eines Bildes ein Fehler auftritt und ein onerror-Ereignishandler für das error-Ereignis eingerichtet 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 mit der URL der Seite identisch, auf der sich der Benutzer derzeit befindet.
• Das Bild ist in irgendeiner Weise beschädigt, was das Laden verhindert.
• Die Metadaten des Bildes sind so beschädigt, dass seine Abmessungen nicht abgerufen werden können und keine Abmessungen in den Attributen des <img>-Elements angegeben wurden.
• Das Bild ist in einem von dem User Agent nicht unterstützten Format.

Attribute

Dieses Element beinhaltet 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 z. B.:

• 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 nach Möglichkeit einen nützlichen Wert für alt angeben.

Das Setzen dieses Attributs auf eine leere Zeichenkette (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 vom Rendering ausschließen können. Visuelle Browser verstecken auch das Symbol für das kaputte Bild, wenn das alt-Attribut leer ist und das Bild nicht angezeigt werden konnte.

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

attributionsrc Veraltet

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-Headers in der Antwort auszulösen, um eine bildbasierte Quellen-Zuordnung oder Trigger-Zuordnung zu registrieren. Welcher Antwortheader zurückgesendet werden soll, hängt vom Wert des Attribution-Reporting-Eligible-Headers ab, der die Registrierung ausgelöst hat.

Die entsprechende Quell- oder Triggereignis wird ausgelöst, sobald der Browser die Antwort mit der Bilddatei erhält.

Hinweis: Weitere Einzelheiten finden Sie in der Attribution Reporting API.

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

• Boolescher Wert, 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 Quellen- oder Trigger-Zuordnung auf demselben Server verwalten. Bei der Registrierung eines Trigger-Zuordnung ist diese Eigenschaft optional, und ein boolescher Wert wird verwendet, wenn er 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 in Fällen nützlich, in denen die angeforderte Ressource nicht auf einem von Ihnen kontrollierten Server liegt, oder Sie einfach die Registrierung der Quellen-Zuordnung 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 Origin der Ressource an die in attributionsrc angegebene(n) URL(s) gesendet. Diese URLs können dann als Reaktion mit einem Attribution-Reporting-Register-Source- oder Attribution-Reporting-Register-Trigger-Header antworten, wie angemessen, um die Registrierung abzuschließen.

Hinweis: Das Angeben 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 das Generieren unterschiedlicher Berichte über unterschiedliche Daten beinhaltet.

crossorigin

Gibt an, ob das Abrufen des Bildes mit einer CORS-Anfrage erfolgen muss. Bilddaten aus einem CORS-fähigen Bild, das aus einer CORS-Anfrage zurückgegeben wird, 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-Anfrage gesendet (ohne den Origin-Header der Anfrage), und der Browser markiert das Bild als verfälscht und beschränkt den Zugriff auf seine Bilddaten, wodurch seine Verwendung in <canvas>-Elementen verhindert wird.

Wenn das crossorigin-Attribut angegeben ist, wird eine CORS-Anfrage gesendet (mit dem Origin-Header der Anfrage); wenn jedoch der Server nicht die Teilnahme am Cross-Origin-Zugriff auf die Bilddaten durch die Ursprungsseite erlaubt (indem er keinen Access-Control-Allow-Origin-Antwortheader sendet oder den Origin der Seite in keinem Access-Control-Allow-Origin-Antwortheader einfügt, den er sendet), blockiert der Browser das Laden des Bildes und protokolliert einen CORS-Fehler in der Devtools-Konsole.

Erlaubte Werte:

anonymous

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

use-credentials

Die CORS-Anfrage wird mit allen Anmeldeinformationen gesendet (d.h. Cookies, X.509-Zertifikate und der Authorization-Header der Anfrage). Wenn der Server nicht der Freigabe von Anmeldeinformationen mit der Ursprungsseite zustimmt (indem er den Antwortheader Access-Control-Allow-Credentials: true zurücksendet), markiert der Browser das Bild als verfälscht und beschränkt den Zugriff auf seine Bilddaten.

Wenn das Attribut einen ungültigen Wert hat, behandeln Browser es so, als ob der Wert anonymous verwendet worden wäre. Weitere Informationen finden Sie in den CORS-Einstellung-Attributen.

decoding

Dieses Attribut gibt dem Browser einen Hinweis darauf, ob das Bilddekodieren zusammen mit dem Rendern der anderen DOM-Inhalte in einem einzigen Präsentationsschritt erfolgen sollte, der "korrekter" aussieht (sync), oder ob die anderen DOM-Inhalte zuerst gerendert und präsentiert werden sollen und das Bild dann später dekodiert und präsentiert wird (async). In der Praxis bedeutet async, dass das nächste Bild nicht darauf wartet, dass das Bild dekodiert wird.

Es ist oft schwierig, einen bemerkbaren Effekt beim Gebrauch 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 verarbeitet werden, sodass das "Synchronisieren" von Inhaltsaktualisierungen weniger offensichtlich ist. Jedoch kann die Blockierung des Renderns während des Dekodierungsprozesses, obwohl oft sehr klein, gemessen — selbst wenn es mit dem menschlichen Auge schwer zu beobachten ist. Siehe Was macht das Image Decoding-Attribut tatsächlich? für eine detaillierte Analyse (tunetheweb.com, 2023).

Der Einsatz verschiedener decoding-Typen kann zu spürbareren Unterschieden führen, wenn <img>-Elemente dynamisch über JavaScript in den DOM eingefügt werden — siehe HTMLImageElement.decoding für weitere Details.

Erlaubte 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 am besten für den Benutzer ist. Dies ist der Standardwert.

elementtiming

Markiert das Bild zur Beobachtung durch die PerformanceElementTiming-API. Der angegebene Wert wird zu einem Identifikator für das beobachtete Bildelement. Siehe auch die elementtiming-Attributseite.

fetchpriority

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

high

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

low

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

auto

Keine Präferenz für die Abrufpriorität setzen. Dies ist der Standard. Er wird verwendet, wenn kein Wert oder ein ungültiger Wert festgelegt ist.

height

Die intrinsische Höhe des Bildes in Pixel. Muss eine ganze Zahl ohne Einheit sein.

Hinweis: Wenn Sie height und width einschließen, kann das Seitenverhältnis des Bildes vom Browser vor dem Laden des Bildes berechnet werden. Dieses Seitenverhältnis wird verwendet, um den Platz zu reservieren, der für die Anzeige des Bildes benötigt wird, und so eine Layout-Verschiebung zu reduzieren oder sogar zu verhindern, wenn das Bild heruntergeladen und auf den Bildschirm gemalt wird. Das Reduzieren von Layout-Verschiebungen ist ein wesentlicher Bestandteil einer guten Benutzererfahrung und Web-Performance.

ismap

Dieses boolesche Attribut gibt an, dass das Bild Teil einer serverseitigen Karte ist. Wenn ja, werden die Koordinaten, an denen der Nutzer auf das Bild geklickt hat, an den Server gesendet.

Hinweis: Dieses Attribut ist nur zulässig, wenn das <img>-Element ein Nachfahre eines <a>-Elements mit einem gültigen href-Attribut ist. Dies bietet Benutzern ohne Zeigegeräte ein Ausweichziel.

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

Verzögert das Laden des Bildes, bis es eine berechnete Distanz zum Viewport erreicht, wie vom Browser definiert.

Lazy-Loading vermeidet den Netzwerk- und Speicherbandbreitenbedarf zum Handling des Bildes, bis es vernünftigerweise als benötigt angesehen wird. Dies verbessert die Leistung in den meisten typischen Anwendungsfällen.

Obwohl explizite width- und height-Attribute für alle Bilder empfohlen werden, um Layout-Verschiebungen zu vermeiden, sind sie besonders wichtig für lazy-geladene Bilder. Lazy-geladene Bilder werden niemals geladen, wenn sie keinen sichtbaren Teil eines Elements schneiden, sogar wenn das Laden sie ändern würde, weil ungeladene Bilder eine width und height von 0 haben. Dies führt zu einer noch störenderen Benutzererfahrung, wenn der im Viewport sichtbare Inhalt unterbrochen wird, während er gelesen wird.

Lazy-geladene Bilder, die sich im visuellen Viewport befinden, sind möglicherweise noch nicht sichtbar, wenn das Window-Ereignis load ausgelöst wird. Dies liegt daran, dass das Ereignis basierend auf eager-geladenen Bildern ausgelöst wird — lazy-geladene Bilder werden nicht berücksichtigt, selbst wenn sie sich während des initialen Seitenladevorgangs im visuellen Viewport befinden.

Das Laden wird nur verzögert, wenn JavaScript aktiviert ist. Dies ist eine Maßnahme gegen Tracking, da, wenn ein Benutzeragent Lazy-Loading unterstützte, wenn Scripting deaktiviert ist, es für eine Seite immer noch möglich wäre, die ungefähre Scroll-Position eines Benutzers während einer Sitzung zu verfolgen, indem strategisch Bilder im Markup der Seite platziert werden, sodass ein Server verfolgen kann, wie viele Bilder angefordert werden und wann.

referrerpolicy

Eine Zeichenkette, die angibt, welche Referrer beim Abrufen der Ressource verwendet werden sollen:

• 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 den Origin der verweisenden Seite beschränkt: sein Schema, Host und Port.
• origin-when-cross-origin: Der Referrer, der an andere Origins gesendet wird, wird auf das Schema, den Host und den Port beschränkt. Navigationen im gleichen Origin beinhalten weiterhin den Pfad.
• same-origin: Ein Referrer wird für gleiche Origins gesendet, aber Cross-Origin-Anfragen enthalten keine Referrer-Informationen.
• strict-origin: Senden Sie nur den Origin des Dokuments als Referrer, wenn das Protokoll-Sicherheitsniveau gleich bleibt (HTTPS→HTTPS), aber senden Sie ihn nicht an eine weniger sichere Zieladresse (HTTPS→HTTP).
• strict-origin-when-cross-origin (Standard): Senden Sie eine vollständige URL, wenn Sie eine gleiche-Origins-Anfrage machen, senden Sie nur den Origin, wenn das Protokoll-Sicherheitsniveau gleich bleibt (HTTPS→HTTPS) und senden Sie keinen Header an eine weniger sichere Zieladresse (HTTPS→HTTP).
• unsafe-url: Der Referrer enthält den Origin und den Pfad (aber nicht das Fragment, das Passwort oder den Benutzernamen). Dieser Wert ist unsicher, da er Origins und Pfade von TLS-geschützten Ressourcen an unsichere Origins leakt.

sizes

Ein oder mehrere durch Kommas getrennte Werte, die Quellengrößen oder das auto-Schlüsselwort sein können. Die Spezifikation erfordert, dass das sizes-Attribut nur vorhanden ist, wenn srcset Breitenbeschreiber verwendet.

Eine Quellengröße besteht aus:

1. Einer Medienbedingung, ausgelassen für das letzte Element in der Liste.
2. Einem Quellengröß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 Quellengrößenbeschreiber die Breite angibt, die für das Bild während des Layouts verwendet werden soll, basiert die Medienbedingung typischerweise (aber nicht notwendigerweise) auf der width.

Quellengrößenwerte geben die beabsichtigte Displaygröße des Bildes an. User Agents verwenden die aktuelle Quellengröße, um eine der von dem srcset-Attribut bereitgestellten Quellen auszuwählen, wenn diese Quellen mit Breiten (w) Beschreibern beschrieben werden. Die ausgewählte Quellengröße beeinflusst die intrinsische Größe des Bildes (die Maßgröße des Bildes, wenn keine CSS-Stilisierung angewendet wird).

Ein Quellengrößenwert kann jede nicht-negative Länge sein. Es darf keine CSS-Funktionen außer den Mathematikfunktionen verwenden. Einheiten werden genauso interpretiert wie Medien-Abfragen, was bedeutet, dass alle relativen Längenmaße relativ zum Dokumentstamm statt dem <img>-Element sind. Zum Beispiel ist ein em-Wert relativ zur Schriftgröße des Stamms, nicht zur Schriftgröße des Bildes. Prozentwerte sind nicht erlaubt. Wenn das sizes-Attribut nicht bereitgestellt wird, hat es einen Standardwert von 100vw (der Viewportbreite).

Das auto-Schlüsselwort kann die ganze 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 zur konkreten Größe des Bildes aufgelöst. Da die intrinsische Größe des Bildes noch nicht bekannt ist, sollten auch width und height-Attribute (oder CSS-Äquivalente) angegeben werden, um zu verhindern, dass der Browser 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 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 von src und srcset ist für ein <img>-Element erforderlich. Wenn srcset angegeben ist, wird src in einer von zwei Arten verwendet:

• als Fallback für Browser, die srcset nicht unterstützen.
• wenn srcset den "x"-Beschreiber verwendet, dann ist src äquivalent zu einer Quelle mit dem Dichtebeschreiber 1x; das bedeutet, das durch src angegebene Bild wird auf Bildschirmen mit niedriger Dichte verwendet (wie typischen 72 DPI oder 96 DPI Displays).

srcset

Eine oder mehrere durch Kommas getrennte Zeichenfolgen, die mögliche Bildquellen für den User Agent anzeigen, die verwendet werden sollen.

Jede Zeichenfolge besteht aus:

1. Einer URL zu einem Bild
2. Optional, Leerzeichen gefolgt von einem von:
   • Einem Breitenbeschreiber (eine positive ganze Zahl direkt gefolgt von w). Es muss der intrinsischen Breite des referenzierten Bildes entsprechen. Der Breitenbeschreiber wird durch die Quellengröße, die im sizes-Attribut angegeben ist, geteilt, um die effektive Pixel-Dichte zu berechnen. Um beispielsweise eine Bildressource bereitzustellen, die verwendet werden soll, wenn der Renderer ein Bild mit einer Breite von 450 Pixeln benötigt, verwenden Sie den Breitenbeschreiber 450w. Wenn ein srcset "w"-Beschreiber enthält, verwenden Browser diese Beschreiber zusammen mit dem sizes-Attribut, um eine Ressource auszuwählen.
   • Einem Pixel-Dichte-Beschreiber (eine positive Gleitkommazahl direkt gefolgt von x). Er gibt die Bedingung an, unter der die entsprechende Bildressource als Dichte des Displays verwendet werden soll. Um beispielsweise eine Bildressource bereitzustellen, die verwendet werden soll, wenn die Dichte des Displays doppelt so hoch wie die Standarddichte ist, verwenden Sie den Pixel-Dichte-Beschreiber 2x oder 2.0x.

Wenn kein Beschreiber angegeben ist, wird die Quelle dem Standardbeschreiber 1x zugewiesen. Es ist unkorrekt, Breitenbeschreiber und Pixel-Dichte-Beschreiber im gleichen srcset-Attribut zu mischen. Doppelte Beschreiber (beispielsweise zwei Quellen im selben srcset, die beide mit 2x beschrieben werden) sind auch ungültig.

Leerzeichen, außer die Leerzeichen, die die URL und den entsprechenden Bedingungsbeschreiber trennen, werden ignoriert; dies schließt sowohl führende als auch nachlaufende Leerzeichen ein, ebenso wie Leerzeichen vor oder nach jedem Komma. Wenn jedoch eine Bildkandidatenzeichenfolge keine Beschreiber und keine Leerzeichen nach der URL enthält, muss die folgende Bildkandidatenzeichenfolge, wenn es eine gibt, mit einem oder mehreren Leerzeichen beginnen, oder das Komma wird als Bestandteil der URL angesehen.

Wenn das srcset-Attribut des <img>-Elements x-Beschreiber verwendet, betrachten Browser auch die URL im src-Attribut (wenn vorhanden) als Kandidat und ordnen ihm den Standardbeschreiber 1x zu. Auf der anderen Seite, wenn das srcset-Attribut Breitenbeschreiber verwendet, wird src nicht berücksichtigt, und das sizes-Attribut wird stattdessen verwendet.

Der Benutzeragent wählt nach eigenem Ermessen eine der verfügbaren Quellen aus. Dies gibt ihnen erheblichen Spielraum in der Auswahl basierend auf Dingen wie Benutzereinstellungen oder Bandbreiten-Bedingungen. Siehe unser Responsive Images-Leitfaden für ein Beispiel.

width

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

usemap

Die partielle URL (beginnend mit #) einer Bildkarte, die mit dem Element assoziiert ist.

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

Veraltete Attribute

align Veraltet

Richtet das Bild im Kontext seiner Umgebung aus. Verwenden Sie die float- und/oder vertical-align-CSS-Eigenschaften anstelle dieses Attributs. Erlaubte Werte:

top

Gleichwertig mit vertical-align: top oder vertical-align: text-top

middle

Gleichwertig mit vertical-align: -moz-middle-with-baseline

bottom

Der Standard, gleichwertig mit vertical-align: unset oder vertical-align: initial

left

Gleichwertig mit float: left

right

Gleichwertig mit float: right

border Veraltet

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

hspace Veraltet

Die Anzahl der Pixel von weißem Raum links und rechts des Bildes. 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 in der HTML-Spezifikation als veraltet angesehen. Es hat eine ungewisse Zukunft; Autoren sollten eine WAI-ARIA-Alternative wie aria-describedby oder aria-details verwenden.

name Veraltet

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

vspace Veraltet

Die Anzahl der Pixel von weißem Raum oberhalb und unterhalb des Bildes. 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 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 ein Bild anwenden.

<img> hat keine Basislinie, daher platzieren bei der Verwendung von Bildern in einem Inline-Formatierungskontext mit vertical-align: baseline Browser den unteren Rand des Bildes auf der Textbasislinie.

Sie können die Eigenschaft object-position verwenden, um das Bild innerhalb der Elementbox zu positionieren, und die Eigenschaft object-fit, um die Größe des Bildes innerhalb der Box anzupassen (zum Beispiel, ob das Bild die Box füllen soll, auch wenn Zuschneiden 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 zum Beispiel keine intrinsischen Abmessungen, wenn ihr Root-<svg>-Element keine width oder height auf sich gesetzt hat.

Barrierefreiheit

Bedeutungsvolle Alternativbeschreibungen verfassen

Der Wert eines alt-Attributs sollte eine klare und prägnante textuelle Ersatzbeschreibung für den Inhalt des Bildes liefern. Es sollte nicht das Vorhandensein des Bildes selbst oder den Dateinamen des Bildes beschreiben. Wenn das alt-Attribut absichtlich weggelassen wird, da das Bild keine textuelle Entsprechung hat, ziehen Sie alternative Methoden in Betracht, um zu präsentieren, was das Bild zu kommunizieren versucht.

Nicht machen

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

So machen

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

Ein wichtiger Barrierefreiheitstest ist, den Inhalt des alt-Attributs zusammen mit dem vorhergehenden textuellen Inhalt zu lesen, um zu sehen, ob es den gleichen Sinn wie das Bild vermittelt. Zum Beispiel, wenn das Bild von dem Satz "Auf meinen Reisen habe ich ein süßes kleines Tier gesehen:" vorangestellt wurde, könnte das Nicht machen-Beispiel von einem Bildschirmlesegerät als "Auf meinen Reisen habe ich ein süßes kleines Tier gesehen: Bild" gelesen werden, was keinen Sinn ergibt. Das So machen-Beispiel könnte von einem Bildschirmlesegerät als "Auf meinen Reisen habe ich ein süßes kleines Tier gesehen: Ein Pinguin am Strand." gelesen werden, was Sinn ergibt.

Für Bilder, die verwendet werden, um eine Aktion auszulösen, beispielsweise Bilder, die in einem <a>- oder <button>-Element verschachtelt sind, ziehen Sie in Erwägung, die ausgelöste Aktion innerhalb des alt-Attributswerts zu beschreiben. Zum Beispiel könnten Sie alt="nächste Seite" anstelle von alt="Pfeil rechts" schreiben. Sie könnten auch in Erwägung ziehen, eine optionale zusätzliche Beschreibung innerhalb eines title-Attributs hinzuzufügen; dies kann von Bildschirmlesegeräten gelesen werden, wenn der Benutzer es anfordert.

Wenn ein alt-Attribut nicht auf ein Bild vorhanden ist, können einige Bildschirmlesegeräte stattdessen den Dateinamen des Bildes ankündigen. Dies kann eine verwirrende Erfahrung sein, wenn der Dateiname den Inhalt des Bildes 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, Leitfaden 1.1 Erklärungen
• Understanding Success Criterion 1.1.1 | W3C Understanding 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 unterstützende Technologien SVGs 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. Zusätzlich sollten Sie vermeiden, den Wert des alt-Attributs in einem title-Attribut zu duplizieren, das auf dasselbe Bild deklariert wurde. Dies kann dazu führen, dass einige Bildschirmlesegeräte denselben Text zweimal ankündigen und eine verwirrende Erfahrung schaffen.

Das title-Attribut sollte auch nicht als ergänzende Bildunterschrifteninformation 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 üblicherweise als Tooltip präsentiert, der kurz nach dem Bewegen des Cursors über das Bild erscheint. Auch wenn dies zusätzliche Informationen für den Benutzer bereitstellen kann, sollten Sie nicht davon ausgehen, dass der Benutzer es jemals sehen wird: Der Benutzer könnte nur eine Tastatur oder einen Touchscreen haben. Wenn Sie besonders wichtige oder wertvolle Informationen für den Benutzer haben, präsentieren Sie diese inline unter Verwendung einer der oben genannten Methoden anstelle von title.

• Using the HTML title attribute – updated | Vispero

Beispiele

Alternative Text

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

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

Bildlink

Dieses Beispiel baut auf dem vorherigen auf und zeigt, wie das Bild in einen Link verwandelt werden kann. Verschachteln Sie dazu das <img>-Tag innerhalb des <a>-Elements. Sie sollten den alternativen Text 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 auf hochauflösenden Geräten anstelle des src-Bildes geladen. Das im src-Attribut angegebene Bild wird als 1x-Kandidat in den User Agents 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 den User Agents, die srcset unterstützen, ignoriert, wenn w-Beschreiber enthalten sind. Wenn die Medienbedingung (width <= 600px) zutrifft, wird das 200 Pixel breite Bild geladen (es ist dasjenige, das am besten mit 200px übereinstimmt), 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 den Datenschutz der Benutzer haben. Siehe Referer-Header: Datenschutz- und Sicherheitsbedenken für weitere Informationen und Maßnahmen.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Die Elemente <picture>, <object> und <embed>
• object-fit, object-position, image-orientation, image-rendering und image-resolution: Bildbezogene CSS-Eigenschaften.
• Die HTMLImageElement-Schnittstelle für dieses Element
• HTML-Bilder
• Leitfaden zu Bilddateitypen und -formaten
• Responsive Images