<img> HTML-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;
}

Attribute

Dieses Element umfasst die globalen Attribute.

alt

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

Hinweis: Browser zeigen Bilder nicht immer an. Es gibt eine Reihe von Situationen, in denen ein Browser möglicherweise keine Bilder anzeigt, beispielsweise:

• Nicht-visuelle Browser (wie sie etwa von Menschen mit Sehbeeinträchtigungen verwendet werden)
• Der Benutzer entscheidet sich, keine Bilder anzuzeigen (um Bandbreite zu sparen oder 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. Geben Sie aus diesen und weiteren Gründen nach Möglichkeit einen hilfreichen Wert für alt an.

Wenn Sie dieses Attribut auf eine leere Zeichenfolge setzen (alt=""), zeigt dies an, dass dieses Bild kein wesentlicher Teil des Inhalts ist (es ist Dekoration oder ein Tracking-Pixel) und dass nicht-visuelle Browser es beim Rendern auslassen können. Visuelle Browser verbergen außerdem das Symbol für ein defektes Bild, wenn das alt-Attribut leer ist und das Bild nicht angezeigt werden konnte.

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

attributionsrc

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

Serverseitig wird dies verwendet, um das Senden eines Attribution-Reporting-Register-Source- oder Attribution-Reporting-Register-Trigger-Headers in der Antwort auszulösen, um jeweils eine bildbasierte Attributionsquelle oder einen Attributionstrigger zu registrieren. Welcher Antwort-Header zurückgesendet werden soll, hängt vom Wert des Attribution-Reporting-Eligible-Headers ab, der die Registrierung ausgelöst hat.

Das zugehörige Quell- oder Triggerereignis wird ausgelöst, sobald der Browser die Antwort mit der Bilddatei empfängt.

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

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

• Boolean, d.h. nur der Name attributionsrc. Dies gibt an, dass der Attribution-Reporting-Eligible-Header an denselben Server gesendet werden soll, auf den das src-Attribut verweist. Dies ist geeignet, wenn Sie die Registrierung der Attributionsquelle oder des Triggers auf demselben Server handhaben. Bei der Registrierung eines Attributionstriggers ist diese Eigenschaft optional; wenn sie ausgelassen wird, wird ein boolescher Wert verwendet.
• Ein Wert, der eine oder mehrere URLs enthält, zum Beispiel:

html

<img
  src="image-file.png"
  alt="My image file description"
  attributionsrc="https://a.example/register-source
                     https://b.example/register-source" />

Dies ist in Fällen nützlich, in denen sich die angeforderte Ressource nicht auf einem Server befindet, den Sie kontrollieren, oder wenn Sie die Registrierung der Attributionsquelle lediglich auf einem anderen Server handhaben 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 Ressourcenursprung an die in attributionSrc angegebenen URL(s) gesendet. Diese URLs können dann je nach Bedarf mit einem Attribution-Reporting-Register-Source- oder Attribution-Reporting-Register-Trigger-Header antworten, um die Registrierung abzuschließen.

Hinweis: Durch das Angeben mehrerer URLs können mehrere Attributionsquellen für dasselbe Feature registriert werden. Sie könnten beispielsweise verschiedene Kampagnen haben, deren Erfolg Sie messen möchten und die verschiedene Berichte zu unterschiedlichen Daten erzeugen.

crossorigin

Gibt an, ob das Abrufen des Bildes mittels einer CORS-Anfrage erfolgen muss. Bilddaten aus einem durch CORS aktivierten Bild, das von einer CORS-Anfrage zurückgegeben wird, können im <canvas>-Element wiederverwendet werden, ohne als „tainted“ markiert zu werden.

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

Wenn das crossorigin-Attribut angegeben ist, wird eine CORS-Anfrage gesendet (mit dem Origin-Anfrage-Header). Wenn der Server jedoch keinen ursprungsübergreifenden Zugriff auf die Bilddaten durch die Ursprungswebsite zulässt (indem er keinen Access-Control-Allow-Origin-Antwort-Header sendet oder den Ursprung der Website nicht in einem von ihm gesendeten Access-Control-Allow-Origin-Antwort-Header einschließt), blockiert der Browser das Laden des Bildes und protokolliert einen CORS-Fehler in der DevTools-Konsole.

Zulässige Werte:

anonymous

Eine CORS-Anfrage wird ohne Anmeldedaten gesendet (also ohne Cookies, X.509-Zertifikate oder den Authorization-Anfrage-Header).

use-credentials

Die CORS-Anfrage wird mit allen Anmeldedaten gesendet (also Cookies, X.509-Zertifikaten und dem Authorization-Anfrage-Header). Wenn der Server nicht der Weitergabe von Anmeldedaten an die Ursprungswebsite zustimmt (indem er den Antwort-Header Access-Control-Allow-Credentials: true zurücksendet), markiert der Browser das Bild als tainted und beschränkt den Zugriff auf dessen Bilddaten.

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

decoding

Dieses Attribut gibt dem Browser einen Hinweis darauf, ob er die Bilddekodierung zusammen mit dem Rendern der übrigen DOM-Inhalte in einem einzigen Darstellungsschritt durchführen soll, der „korrekter“ aussieht (sync), oder ob er zunächst die übrigen DOM-Inhalte rendern und darstellen und danach das Bild dekodieren und später darstellen soll (async). In der Praxis bedeutet async, dass der nächste Paint nicht auf die Dekodierung des Bildes wartet.

Bei der Verwendung von decoding für statische <img>-Elemente ist es oft schwierig, einen auffälligen Effekt 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 ohnehin unabhängig verarbeitet, sodass die „Synchronisierung“ von Inhaltsaktualisierungen weniger deutlich ist. Die Blockierung des Renderns während der Dekodierung kann jedoch, obwohl sie oft sehr gering ist, gemessen werden — auch wenn sie mit dem menschlichen Auge schwer zu beobachten ist. Eine ausführlichere Analyse finden Sie unter What does the image decoding attribute actually do? (tunetheweb.com, 2023).

Die Verwendung verschiedener decoding-Typen kann auffälligere Unterschiede ergeben, wenn <img>-Elemente dynamisch per JavaScript in das DOM eingefügt werden — weitere Details finden Sie unter HTMLImageElement.decoding.

Zulässige Werte:

sync

Dekodiert das Bild synchron zusammen mit dem Rendern der übrigen DOM-Inhalte und stellt alles gemeinsam dar.

async

Dekodiert das Bild asynchron, nachdem die übrigen DOM-Inhalte gerendert und dargestellt wurden.

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 Bildelement. Siehe auch die Attributseite elementtiming.

fetchpriority

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

high

Ruft das Bild mit hoher Priorität gegenüber anderen Bildern ab.

low

Ruft das Bild mit niedriger Priorität gegenüber anderen Bildern ab.

auto

Legt keine Präferenz für die Abrufpriorität fest. Dies ist der Standardwert. Er wird verwendet, wenn kein oder ein ungültiger Wert gesetzt ist.

height

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

Hinweis: Durch das Einschließen von height und width kann der Browser das Seitenverhältnis des Bildes berechnen, bevor das Bild geladen wird. Dieses Seitenverhältnis wird verwendet, um den für die Anzeige des Bildes benötigten Platz zu reservieren und dadurch eine Layoutverschiebung beim Herunterladen und Darstellen des Bildes auf dem Bildschirm zu verringern oder sogar zu verhindern. Das Verringern von Layoutverschiebungen ist ein wesentlicher Bestandteil einer guten Benutzererfahrung und der Web-Performance.

ismap

Dieses boolesche Attribut gibt an, dass das Bild Teil einer serverseitigen Map ist. Falls dies der Fall ist, werden die Koordinaten, auf die der Benutzer im Bild geklickt hat, an den Server gesendet.

Hinweis: Dieses Attribut ist nur zulässig, wenn das <img>-Element ein Nachkomme eines <a>-Elements mit einem gültigen href-Attribut ist. Dadurch erhalten Benutzer 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 sich das Bild aktuell im visuellen Viewport befindet oder nicht (dies ist der Standardwert).

lazy

Verzögert das Laden des Bildes, bis es eine vom Browser definierte berechnete Entfernung vom Viewport erreicht.

Lazy Loading vermeidet die Netzwerk- und Speicherbandbreite, die für die Verarbeitung des Bildes erforderlich ist, bis hinreichend sicher ist, dass es benötigt wird. Dies verbessert die Performance in den meisten typischen Anwendungsfällen.

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

Lazy geladene Bilder im visuellen Viewport sind möglicherweise noch nicht sichtbar, wenn das load-Ereignis von Window ausgelöst wird. Dies liegt daran, dass das Ereignis auf eager geladenen Bildern basiert — lazy geladene Bilder werden nicht berücksichtigt, auch wenn sie sich beim anfänglichen Laden der Seite innerhalb des visuellen Viewports befinden.

Das Laden wird nur verzögert, wenn JavaScript aktiviert ist. Dies ist eine Anti-Tracking-Maßnahme, da eine Website andernfalls bei deaktiviertem Scripting weiterhin die ungefähre Scrollposition eines Benutzers während einer Sitzung verfolgen könnte, indem Bilder strategisch im Markup einer Seite platziert werden, sodass ein Server nachverfolgen kann, wie viele Bilder wann angefordert werden.

referrerpolicy

Eine Zeichenfolge, die 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: ihr Schema, Host und Port.
• origin-when-cross-origin: Der an andere Ursprünge gesendete Referrer wird auf Schema, Host und Port beschränkt. Navigationen innerhalb desselben Ursprungs enthalten weiterhin den Pfad.
• same-origin: Für denselben Ursprung wird ein Referrer gesendet, ursprungsübergreifende Anfragen enthalten jedoch keine Referrer-Informationen.
• strict-origin: Sendet den Ursprung des Dokuments nur dann als Referrer, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPS→HTTPS), sendet ihn aber nicht an ein weniger sicheres Ziel (HTTPS→HTTP).
• strict-origin-when-cross-origin (Standard): Sendet bei einer Anfrage mit demselben Ursprung eine vollständige URL, nur den Ursprung, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPS→HTTPS), und keinen Header an ein weniger sicheres Ziel (HTTPS→HTTP).
• unsafe-url: Der Referrer enthält den Ursprung und den Pfad (aber nicht das Fragment, Passwort oder den Benutzernamen). Dieser Wert ist unsicher, da er Ursprünge und Pfade von TLS-geschützten Ressourcen an unsichere Ursprünge preisgibt.

sizes

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

Quellgröße

Eine Quellgröße besteht aus:

1. Einer Media Condition, die beim letzten Listenelement ausgelassen wird.
2. Einem Quellgrößenwert.

Beispielsweise schlägt die folgende Quellgröße vor, eine 1000px breite Bildquelle zu verwenden, wenn die Breite des Viewports maximal 500px beträgt.

css

(width <= 500px) 1000px

Media Conditions beschreiben Eigenschaften des Viewports, nicht des Bildes. Da ein Quellgrößen-Deskriptor die für das Bild während des Layouts zu verwendende Breite festlegt, basiert die Media Condition typischerweise (aber nicht notwendigerweise) auf width.

Quellgrößenwerte geben die beabsichtigte Anzeigegröße des Bildes an. User Agents verwenden die aktuelle Quellgröße, um eine der durch das srcset-Attribut bereitgestellten Quellen auszuwählen, wenn diese Quellen durch Breiten-Deskriptoren (w) beschrieben werden. Der in sizes definierte Wert w bestimmt die Standard-Layoutbreite des Bildes. Ohne CSS rendert der Browser das Bild in dieser Größe, unabhängig von den physischen Pixeldimensionen der heruntergeladenen Datei.

Ein Quellgrößenwert kann jede nicht negative Länge sein. Er darf keine anderen CSS-Funktionen als die mathematischen Funktionen verwenden. Einheiten werden auf dieselbe Weise wie bei Media Queries interpretiert; das bedeutet, dass sich alle relativen Längeneinheiten auf das Dokument-Stammelement und nicht auf das <img>-Element beziehen. Beispielsweise bezieht sich ein em-Wert auf die Schriftgröße des Stammelements, nicht auf die Schriftgröße des Bildes. Prozentwerte sind nicht zulässig. Wenn das sizes-Attribut nicht angegeben wird, hat es den Standardwert 100vw (die Viewport-Breite).

auto

Das Schlüsselwort auto gibt an, dass der Browser die erwartete Layoutbreite des Elements verwenden soll, um das anzuzeigende Bild auszuwählen. Das heißt, er sollte die konkrete Größe des Bildes verwenden, die nach dem Layout berechnet wird, nachdem HTML und CSS angewendet wurden. Dies ist nur in Verbindung mit loading="lazy" gültig, da erwartet wird, dass die Seite bis zum Laden des Bildes bereits CSS- und andere Layoutinformationen hat.

Die Verwendung von auto erspart Ihnen, Ihre Layout-Media-Conditions zweimal angeben zu müssen: einmal für das Layout und einmal für die Auswahl eines geeigneten abzurufenden und anzuzeigenden Bildes.

Wenn auto nicht aufgelöst werden kann — entweder weil der Browser es nicht unterstützt oder weil das Bild noch keine Layoutgröße hat — greift der Browser auf die Quellgrößen in der Liste zurück, um die Breite zu bestimmen, dann auf die für das Element definierten width/height-Attribute und schließlich auf die standardmäßige intrinsische Größe für <img>-Elemente, die im User-Agent-Stylesheet definiert ist (300px mal 150px).

Für eine bessere Abwärtskompatibilität mit Browsern, die auto nicht unterstützen, können Sie nach auto im sizes-Attribut Fallback-Größen einschließen. Sie sollten außerdem die width- und height-Attribute des Elements auf die intrinsischen Dimensionen des größten Bildes in Ihrem srcset setzen, damit der Browser mithilfe des korrekten Seitenverhältnisses Platz reservieren kann:

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. Für ein <img>-Element ist mindestens eines von src und srcset erforderlich. Wenn srcset angegeben ist, wird src auf eine von zwei Arten verwendet:

• als Fallback für Browser, die srcset nicht unterstützen.
• Wenn srcset den „x“-Deskriptor verwendet, entspricht src einer Quelle mit dem Dichte-Deskriptor 1x; das heißt, das durch src angegebene Bild wird auf Bildschirmen mit geringer Pixeldichte verwendet (etwa auf typischen 72-DPI- oder 96-DPI-Displays).

srcset

Eine oder mehrere durch Kommas getrennte Zeichenfolgen, die mögliche Bildquellen für den zu verwendenden User Agent angeben.

Jede Zeichenfolge besteht aus:

1. Einer URL zu einem Bild
2. Optional aus Whitespace, gefolgt von einem der folgenden Elemente:
   • Einem Breiten-Deskriptor (einer positiven Ganzzahl, direkt gefolgt von w). Er muss mit der intrinsischen Breite des referenzierten Bildes übereinstimmen. Der Breiten-Deskriptor 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 Breiten-Deskriptor 450w. Wenn ein srcset „w“-Deskriptoren enthält, verwendet der Browser diese Deskriptoren zusammen mit dem sizes-Attribut, um eine Ressource auszuwählen.
   • Einem Pixeldichte-Deskriptor (einer positiven Gleitkommazahl, direkt gefolgt von x). Er gibt die Bedingung an, unter der die entsprechende Bildressource entsprechend der Pixeldichte des Displays verwendet werden soll. Um beispielsweise eine Bildressource bereitzustellen, die verwendet werden soll, wenn die Pixeldichte doppelt so hoch wie die Standarddichte ist, verwenden Sie den Pixeldichte-Deskriptor 2x oder 2.0x.

Wenn kein Deskriptor angegeben ist, erhält die Quelle den Standard-Deskriptor 1x. Es ist ungültig, Breiten-Deskriptoren und Pixeldichte-Deskriptoren im selben srcset-Attribut zu mischen. Doppelte Deskriptoren (beispielsweise zwei Quellen im selben srcset, die beide mit 2x beschrieben sind) sind ebenfalls ungültig.

Leerzeichen, außer dem Whitespace zwischen der URL und dem zugehörigen Bedingungs-Deskriptor, werden ignoriert; dies umfasst führende und nachfolgende Leerzeichen sowie Leerzeichen vor oder nach jedem Komma. Wenn eine Bildkandidatenzeichenfolge jedoch keine Deskriptoren und keinen Whitespace nach der URL enthält, muss die folgende Bildkandidatenzeichenfolge, sofern vorhanden, mit einem oder mehreren Leerzeichen beginnen, andernfalls wird das Komma als Teil der URL betrachtet.

Wenn das srcset eines <img>-Elements x-Deskriptoren verwendet, berücksichtigen Browser auch die URL im src-Attribut (falls vorhanden) als Kandidaten und weisen ihr den Standard-Deskriptor 1x zu. Wenn das srcset-Attribut dagegen Breiten-Deskriptoren verwendet, wird src nicht berücksichtigt und stattdessen das sizes-Attribut verwendet.

Der User Agent wählt nach eigenem Ermessen eine der verfügbaren Quellen aus. Dadurch hat er erheblichen Spielraum, seine Auswahl anhand von Faktoren wie Benutzereinstellungen oder Bandbreiten-Bedingungen anzupassen. Ein Beispiel finden Sie in unserem Tutorial Responsive images.

width

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

usemap

Die partielle URL (beginnend mit #) einer dem Element zugeordneten Image Map.

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

Veraltete Attribute

align

Richtet das Bild an seinem umgebenden Kontext aus. Verwenden Sie anstelle dieses Attributs die CSS-Eigenschaften float und/oder vertical-align. 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

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

hspace

Die Anzahl von Pixeln Leerraum links und rechts vom Bild. Verwenden Sie stattdessen die CSS-Eigenschaft margin.

longdesc

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

Hinweis: Dieses Attribut gilt in der HTML-Spezifikation als obsolet. Seine Zukunft ist ungewiss; Autoren sollten eine WAI-ARIA-Alternative wie aria-describedby oder aria-details verwenden.