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

name

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

vspace

Die Anzahl von Pixeln Leerraum oberhalb und unterhalb des Bildes. Verwenden Sie stattdessen die CSS-Eigenschaft margin.

Nutzungshinweise

Sie benötigen für jedes <img>-Element mindestens zwei Attribute. Meistens sind dies src und alt.

• Das src-Attribut enthält den Pfad zu dem Bild, das Sie einbetten möchten. Es ist nicht zwingend erforderlich, wenn das Attribut srcset verfügbar ist. Es muss jedoch mindestens eines der Attribute src oder srcset angegeben werden.
• Das alt-Attribut enthält einen textuellen Ersatz für das Bild, der zwingend erforderlich und für die Barrierefreiheit außerordentlich nützlich ist — Screenreader lesen ihren Benutzern den Attributwert vor, damit sie wissen, was das Bild bedeutet. Alternativtext wird auch auf der Seite angezeigt, wenn das Bild aus irgendeinem Grund nicht geladen werden kann, beispielsweise aufgrund von Netzwerkfehlern, Inhaltsblockierung oder Linkverfall.

Es gibt viele weitere Attribute für verschiedene Zwecke:

• Referrer-/CORS-Steuerung für Sicherheit und Datenschutz: Siehe crossorigin und referrerpolicy.
• Verwenden Sie sowohl width als auch height, um die intrinsische Größe des Bildes festzulegen. Dadurch kann es Platz einnehmen, bevor es geladen wird, um Verschiebungen im Inhaltslayout abzumildern.
• Hinweise für responsive Bilder mit sizes und srcset (siehe auch das <picture>-Element und unser Tutorial Responsive images).

Der Leitfaden zu Bilddateitypen und -formaten enthält Informationen über die unterstützten Bildformate und allgemeine Empfehlungen dazu, wo sie verwendet werden sollten.

Fehler beim Laden von Bildern

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

• Die Attribute src oder srcset sind leer ("") oder null.
• Die src-URL entspricht der 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 so beschädigt, dass seine Dimensionen nicht abgerufen werden können, und in den Attributen des <img>-Elements wurden keine Dimensionen angegeben.
• Das Bild hat ein Format, das vom User Agent nicht unterstützt wird.

Styling mit CSS

<img> ist ein replaced element; standardmäßig hat es einen display-Wert von inline, seine Standarddimensionen werden jedoch 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. für ein Bild festlegen.

<img> hat keine Baseline. Wenn Bilder also in einem Inline-Formatierungskontext mit vertical-align: baseline verwendet werden, wird die Unterkante des Bildes auf der Text-Baseline platziert.

Sie können die Eigenschaft object-position verwenden, um das Bild innerhalb der Box des Elements zu positionieren, und die Eigenschaft object-fit, um die Größe des Bildes innerhalb der Box anzupassen (beispielsweise ob das Bild in die Box passen oder sie ausfüllen soll, auch wenn dafür ein Beschneiden erforderlich ist).

Abhängig von seinem Typ kann ein Bild eine intrinsische Breite und Höhe haben. Für einige Bildtypen sind intrinsische Dimensionen jedoch nicht erforderlich. SVG-Bilder haben beispielsweise keine intrinsischen Dimensionen, wenn ihr Stammelement <svg> kein gesetztes width oder height aufweist.

Barrierefreiheit

Aussagekräftige Alternativbeschreibungen erstellen

Der Wert eines alt-Attributs sollte einen klaren und prägnanten Textersatz für den Inhalt des Bildes bereitstellen. Er sollte weder das Vorhandensein des Bildes selbst noch den Dateinamen des Bildes beschreiben. Wenn das alt-Attribut absichtlich weggelassen wird, weil das Bild kein textuelles Äquivalent hat, ziehen Sie alternative Methoden in Betracht, um zu vermitteln, was das Bild ausdrücken soll.

Nicht

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

Richtig

<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 prüfen, ob er dieselbe Bedeutung wie das Bild vermittelt. Wenn dem Bild beispielsweise der Satz „Auf meinen Reisen sah ich ein niedliches kleines Tier:“ vorangeht, könnte das Nicht-Beispiel von einem Screenreader als „Auf meinen Reisen sah ich ein niedliches kleines Tier: Bild“ gelesen werden, was keinen Sinn ergibt. Das Richtig-Beispiel könnte von einem Screenreader als „Auf meinen Reisen sah ich ein niedliches kleines Tier: Ein Pinguin an einem Strand.“ gelesen werden, was Sinn ergibt.

Bei Bildern, die verwendet werden, um eine Aktion auszulösen, beispielsweise Bilder, die in einem <a>- oder <button>-Element verschachtelt sind, sollten Sie die ausgelöste Aktion im Wert des alt-Attributs beschreiben. Beispielsweise könnten Sie alt="nächste Seite" statt alt="Pfeil nach rechts" schreiben. Sie können auch erwägen, eine optionale weiterführende Beschreibung in einem title-Attribut hinzuzufügen; diese kann auf Wunsch des Benutzers von Screenreadern vorgelesen werden.

Wenn ein alt-Attribut bei einem Bild nicht vorhanden ist, geben einige Screenreader möglicherweise stattdessen den Dateinamen des Bildes aus. Dies kann verwirrend sein, wenn der Dateiname nicht repräsentativ für den Inhalt des Bildes ist.

• 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-Erklärungen zu WCAG, Richtlinie 1.1
• Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0

SVG als Bild identifizieren

Aufgrund eines VoiceOver-Fehlers gibt VoiceOver SVG-Bilder nicht korrekt als Bilder aus. Fügen Sie allen <img>-Elementen mit SVG-Quelldateien role="img" hinzu, um sicherzustellen, dass assistive Technologien das SVG korrekt als Bildinhalt ausgeben.

<img src="mdn.svg" alt="MDN" role="img" />

Das title-Attribut

Das Attribut title ist kein akzeptabler Ersatz für das alt-Attribut. Vermeiden Sie außerdem, den Wert des alt-Attributs in einem für dasselbe Bild deklarierten title-Attribut zu duplizieren. Dies kann dazu führen, dass einige Screenreader denselben Text zweimal ausgeben, was eine verwirrende Erfahrung schafft.

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

Der Wert des title-Attributs wird dem Benutzer in der Regel als Tooltip angezeigt, der kurz erscheint, nachdem sich der Cursor nicht mehr über dem Bild bewegt. Dies kann dem Benutzer zwar zusätzliche Informationen liefern, Sie sollten jedoch nicht davon ausgehen, dass der Benutzer ihn jemals sieht: Der Benutzer verfügt möglicherweise nur über eine Tastatur oder einen Touchscreen. Wenn Sie Informationen haben, die für den Benutzer besonders wichtig oder wertvoll sind, präsentieren Sie sie inline mithilfe einer der oben genannten Methoden, statt title zu verwenden.

• Using the HTML title attribute – updated | Vispero

Beispiele

Alternativtext

Das folgende Beispiel bettet ein Bild in die Seite ein und enthält 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 umgewandelt wird. Verschachteln Sie dazu das <img>-Tag innerhalb des <a>. Der Alternativtext sollte die Ressource beschreiben, auf die der Link verweist, als würden Sie stattdessen einen Textlink verwenden.

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

Das srcset-Attribut verwenden

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

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

Die Attribute srcset und sizes verwenden

Das src-Attribut wird in User Agents, die srcset unterstützen, ignoriert, wenn w-Deskriptoren enthalten sind. Wenn die Media Condition (width <= 600px) zutrifft, wird das 200 Pixel breite Bild geladen (es entspricht 200px am ehesten); 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 harmlose Verwendungsmöglichkeiten 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 Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

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