<img>: Das Bild-Einbettungselement

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Das <img>-Element des HTML eingebettet ein Bild in das Dokument.

Probieren Sie es aus

Das obige Beispiel zeigt die Verwendung des <img>-Elements:

  • Das src-Attribut ist erforderlich und enthält den Pfad zum Bild, das Sie einbetten möchten.
  • Das alt-Attribut hält einen textuellen Ersatz für das Bild, der obligatorisch und ungemein nützlich für die Barrierefreiheit ist — Bildschirmlesegeräte lesen den Attributwert ihren Benutzern 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: zum Beispiel bei Netzwerkfehlern, Inhaltsblockierung oder Link-Verlust.

Es gibt viele andere Attribute, um verschiedene Zwecke zu erzielen:

Unterstützte Bildformate

Der HTML-Standard gibt nicht an, welche Bildformate unterstützt werden sollen, sodass User Agents möglicherweise unterschiedliche Formate unterstützen.

Hinweis: Der Leitfaden zu Bilddateitypen und -formaten bietet umfassende Informationen über Bildformate und deren Unterstützung durch Webbrowser. Dieser Abschnitt ist lediglich eine Zusammenfassung!

Die Bilddateiformate, die am häufigsten im Web verwendet werden, sind:

Formate wie WebP und AVIF werden empfohlen, da sie viel besser abschneiden als PNG, JPEG, GIF für sowohl statische als auch animierte Bilder.

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

Bildladefehler

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

  • Das src-Attribut ist leer ("") oder null.
  • Die src-URL ist dieselbe wie die URL der Seite, die der Benutzer gerade betrachtet.
  • Das Bild ist in irgendeiner Weise beschädigt, sodass es nicht geladen werden kann.
  • Die Metadaten des Bildes sind auf eine solche Weise beschädigt, dass es unmöglich ist, seine Dimensionen abzurufen, und es wurden keine Dimensionen in den Attributen des <img>-Elements spezifiziert.
  • Das Bild ist in einem Format, das von dem 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 Bilder nicht anzeigt, wie zum Beispiel:

  • Nicht-visuelle Browser (wie diejenigen, die von Menschen mit Sehbehinderungen verwendet werden)
  • Der Benutzer entscheidet sich dafür, keine Bilder anzuzeigen (um Bandbreite zu sparen, aus Datenschutzgründen)
  • Das Bild ist ungültig oder ein nicht unterstützter Typ.

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

Wenn Sie dieses Attribut auf eine leere Zeichenfolge (alt="") setzen, bedeutet das, 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 werden auch das gebrochene Bildsymbol ausblenden, wenn das alt-Attribut leer ist und das Bild nicht angezeigt werden konnte.

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

attributionsrc Experimentell

Gibt an, dass Sie möchten, dass der Browser einen Attribution-Reporting-Eligible Header zusammen mit der Bildanfrage sendet.

Auf der Serverseite wird dies verwendet, um das Senden eines Attribution-Reporting-Register-Source oder Attribution-Reporting-Register-Trigger Headers in der Antwort auszulösen, um eine bildbasierte Attributionsquelle oder einen Attributionstrigger zu registrieren. Welcher Antwortheader zurückgesandt werden sollte, hängt von dem Wert des Attribution-Reporting-Eligible Headers ab, der die Registrierung ausgelöst hat.

Das entsprechende Quell- oder Triggerevent wird ausgelöst, sobald der Browser die Antwort einschließlich der Bilddatei erhält.

Hinweis: Siehe die Attribution Reporting API für weitere Details.

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

  • Boolesch, d.h. nur der attributionsrc Name. Dies spezifiziert, dass Sie möchten, dass der Attribution-Reporting-Eligible Header zu demselben Server gesendet wird, auf den das src-Attribut verweist. Dies ist in Ordnung, wenn Sie die Attributionsquelle oder -triggeregistrierung auf demselben Server handhaben. Wenn ein Attributionstrigger registriert wird, 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 nützlich in Fällen, wenn die angeforderte Ressource nicht auf einem Server liegt, den Sie kontrollieren, oder Sie möchten die Registrierung der Attributionsquelle auf einem anderen Server handhaben. 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 Ursprungsserver an die im attributionSrc angegebenen URL(s) gesendet. Diese URLs können dann mit einem Attribution-Reporting-Register-Source oder Attribution-Reporting-Register-Trigger Header angemessen reagieren, um die Registrierung abzuschließen.

Hinweis: Das Angeben mehrerer URLs bedeutet, dass mehrere Attributionsquellen auf demselben Merkmal registriert werden können. Sie könnten beispielsweise verschiedene Kampagnen haben, deren Erfolg Sie messen möchten, indem Sie unterschiedliche Berichte über unterschiedliche Daten generieren.

crossorigin

Gibt an, ob das Abrufen des Bildes mithilfe einer CORS-Anfrage erfolgen muss. Bilddaten aus einem CORS-aktivierten Bild, das aus einer CORS-Anfrage zurückgegeben wird, können im <canvas>-Element ohne die Markierung "tainted" wiederverwendet werden.

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

Wenn das crossorigin-Attribut angegeben wird, wird eine CORS-Anfrage gesendet (mit dem Origin Anfrageheader); wenn der Server jedoch nicht optiert, den plattformübergreifenden Zugriff auf die Bilddaten durch die Ursprungsseite zuzulassen (indem er keinen Access-Control-Allow-Origin Antwortheader sendet oder die Ursprungsseite nicht in einen Antwortheader einbezieht, den er sendet), blockiert der Browser das Laden des Bildes und protokolliert einen CORS-Fehler in der Entwicklertools-Konsole.

Zulässige Werte:

anonymous

Eine CORS-Anfrage wird gesendet, bei der Anmeldeinformationen weggelassen werden (d.h. keine Cookies, X.509 Zertifikate oder Authorization Anfrageheader).

use-credentials

Die CORS-Anfrage wird mit allen enthaltenen Anmeldeinformationen gesendet (d.h. Cookies, X.509 Zertifikate und der Authorization Anfrageheader). Wenn der Server nicht optiert, Anmeldeinformationen mit der Ursprungsseite zu teilen (durch Senden des Access-Control-Allow-Credentials: true Antwortheaders), markiert der Browser das Bild als tainted und schränkt den Zugriff auf seine Bilddaten ein.

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

decoding

Dieses Attribut gibt dem Browser einen Hinweis darauf, ob er die Bilddekodierung zusammen mit dem Rendern anderer DOM-Inhalte in einem einzigen Präsentationsschritt durchführen sollte, der "korrekter" aussieht (sync), oder zuerst die anderen DOM-Inhalte rendern und dann das Bild dekodieren und später präsentieren sollte (async). In der Praxis bedeutet async, dass der nächste Anstrich nicht wartet, bis das Bild dekodiert wird.

Es ist oft schwierig, irgendeinen merklichen Effekt beim Verwenden von decoding auf statischen <img>-Elementen zu erkennen. Sie werden wahrscheinlich zunächst als leere Bilder gerendert, während die Bilddateien (entweder aus dem Netz oder aus dem Cache) abgerufen und dann unabhängig gehandhabt werden, sodass die "Synchronisation" von Inhaltsaktualisierungen weniger sichtbar ist. Allerdings kann das Blockieren des Renderns während der Dekodierung, auch wenn es oft recht klein ist, gemessen werden — selbst wenn es mit dem menschlichen Auge schwer zu beobachten ist. Siehe Was macht das Bilddekodierungsattribut tatsächlich? für eine detailliertere Analyse (tunetheweb.com, 2023).

Verwenden von unterschiedlichen decoding-Typen kann zu spürbareren 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

Das Bild synchron zusammen mit dem Rendern anderer DOM-Inhalte dekodieren und alles zusammen präsentieren.

async

Das Bild asynchron dekodieren, nach dem Rendern und der Präsentation der anderen DOM-Inhalte.

auto

Keine Präferenz für den Dekodiermodus; 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

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

Zulässige Werte:

high

Das Bild mit hoher Priorität im Vergleich zu anderen Bildern abrufen.

low

Das Bild mit niedriger Priorität im Vergleich zu anderen Bildern abrufen.

auto

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

Weitere Informationen finden Sie unter HTMLImageElement.fetchPriority.

height

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

Hinweis: Die Angabe von height und width ermöglicht es dem Browser, das Seitenverhältnis des Bildes vor dem Laden zu berechnen. Dieses Seitenverhältnis wird verwendet, um den zum Anzeigen des Bildes benötigten Platz zu reservieren, wodurch oder sogar ein Layout-Versatz vermieden wird, wenn das Bild heruntergeladen und auf den Bildschirm gemalt wird. Das Reduzieren von Layout-Versatz ist ein wichtiger Bestandteil einer guten Benutzererfahrung und Webleistung.

ismap

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

Hinweis: Dieses Attribut ist nur erlaubt, wenn das <img>-Element ein Nachkomme eines <a>-Elements mit einem gültigen href-Attribut ist. Dies gibt Benutzern 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 im sichtbaren Anzeigebereich befindet (dies ist der Standardwert).

lazy

Verweigert das Laden des Bildes, bis es eine berechnete Entfernung vom Anzeigebereich erreicht hat, wie sie vom Browser definiert wird. Die Absicht besteht darin, das Netz und den Speicherbandbreitenbedarf für die Handhabung des Bildes zu vermeiden, bis es relativ sicher ist, dass es benötigt wird. Dies verbessert in den meisten typischen Anwendungsfällen im Allgemeinen die Leistung des Inhalts.

Hinweis: Das Laden wird nur verzögert, wenn JavaScript aktiviert ist. Dies ist eine Anti-Tracking-Maßnahme, da, wenn ein User-Agent das Lazy Loading unterstützt, wenn Skripting deaktiviert ist, es immer noch möglich wäre, die ungefähre Scroll-Position eines Benutzers während einer Sitzung zu verfolgen, indem man strategisch Bilder im Markup einer Seite platziert, damit ein Server verfolgen kann, wie viele Bilder angefordert werden und wann.

Hinweis: Bilder mit loading, das auf lazy gesetzt ist, werden niemals geladen, wenn sie nicht mit einem sichtbaren Teil eines Elements überschnitten sind, selbst wenn das Laden sie ändern würde, da nicht geladene Bilder eine width und height von 0 haben. Die Angabe von width und height auf Lazy-Loading-Bildern behebt dieses Problem und ist eine bewährte Methode, die von der Spezifikation empfohlen wird. Dies hilft auch, Layout-Verschiebungen zu verhindern.

referrerpolicy

Ein String, der angibt, welche Referrer verwendet werden sollen, wenn die Ressource abgerufen wird:

  • no-referrer: Der Referer Header wird nicht gesendet.
  • no-referrer-when-downgrade: Der Referer Header wird nicht an Ursprungs 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 Referrer, der an andere Ursprünge gesendet wird, wird auf das Schema, den Host und den Port beschränkt. Bei Navigationen auf demselben Ursprung wird weiterhin der Pfad enthalten sein.
  • same-origin: Ein Referrer wird für die gleiche Origin gesendet, aber plattformübergreifende Anfragen enthalten keine Referrer-Informationen.
  • strict-origin: Sendet nur den Ursprung des Dokuments als Referrer, wenn das Protokollsicherheitsniveau gleich bleibt (HTTPS→HTTPS), sendet ihn jedoch nicht an ein weniger sicheres Ziel (HTTPS→HTTP).
  • strict-origin-when-cross-origin (Standard): Senden Sie eine vollständige URL, wenn Sie eine Anfrage zum selben Ursprung durchführen, senden Sie nur den Ursprung, wenn das Protokollsicherheitsniveau gleich bleibt (HTTPS→HTTPS), und senden Sie keinen Header an ein weniger sicheres Ziel (HTTPS→HTTP).
  • unsafe-url: Der Referrer wird den Ursprung und den Pfad (aber nicht das Fragment, das Passwort oder den Benutzernamen) enthalten. Dieser Wert ist unsicher, da er Ursprünge und Pfade von TLS-geschützten Ressourcen an unsichere Ursprünge leakt.
sizes

Eine oder mehrere durch Kommas getrennte Strings, die einen Satz von Quellen-Größen angeben. Jede Quellen-Größe besteht aus:

  1. Eine Media-Bedingung. Dies muss für den letzten Eintrag in der Liste ausgelassen werden.
  2. Ein Quellen-Größenwert.

Media-Bedingungen beschreiben Eigenschaften des Ansichtsfensters, nicht des Bildes. Beispielsweise würde (max-height: 500px) 1000px vorschlagen, eine Quelle mit 1000px Breite zu verwenden, wenn das Anzeigefenster nicht höher als 500px ist. Da ein Quellen-Größen-Deskriptor verwendet wird, um die Breite festzulegen, die für das Bild während des Layouts der Seite verwendet werden soll, basiert die Media-Bedingung typischerweise (aber nicht unbedingt) auf den width Informationen.

Quellen-Größenwerte geben die beabsichtigte Darstellungsgröße des Bildes an. User Agents verwenden die aktuelle Quellen-Größe, um eine der von dem srcset-Attribut bereitgestellten Quellen auszuwählen, wenn diese Quellen mit Breitenbeschreibungen (w) beschrieben werden. Die ausgewählte Quellen-Größe beeinflusst die intrinsische Größe des Bildes (die Anzeigengröße des Bildes, wenn keine CSS Formatierung angewendet wird). Wenn das srcset-Attribut nicht vorhanden ist oder keine Werte mit einer Breitenbeschreibung enthält, hat das sizes-Attribut keine Auswirkungen.

Ein Quellen-Größenwert kann jede nicht negative Länge sein. Es dürfen keine CSS-Funktionen verwendet werden, außer den Mathematikfunktionen. Einheiten werden in derselben Weise interpretiert wie Media-Abfragen, wobei alle relativen Längeneinheiten sich relativ zur Dokumentwurzel statt zum <img>-Element beziehen, sodass ein em-Wert sich relativ zur Stammfontgröße bezieht, anstatt zur Schriftgröße des Bildes. Prozentwerte sind nicht erlaubt.

Zusätzlich können Sie den Wert auto verwenden, um die gesamte Liste von Größen oder den ersten Eintrag in der Liste zu ersetzen. Es ist nur gültig, wenn es mit loading="lazy" kombiniert wird, und löst sich in die konkrete Größe des Bildes auf.

src

Die Bild-URL. Pflichtfeld für das <img>-Element. In Browsern, die srcset unterstützen, wird src wie ein Kandidatenbild mit einem Pixeldichtedeskriptor 1x behandelt, es sei denn, ein Bild mit diesem Pixeldichtedeskriptor ist bereits in srcset definiert, oder srcset enthält w Deskriptoren.

srcset

Eine oder mehrere durch Kommas getrennte Strings, die mögliche Bildquellen für den User Agent angeben. Jede Zeichenfolge besteht aus:

  1. Einer URL zu einem Bild

  2. Optionalerweise gefolgt von einem Leerzeichen und einem der folgenden:

    • Einer Breitenbeschreibungen (ein positiver Integer, direkt gefolgt von w). Der Breitenbeschreibungen wird durch die Quellen-Größe geteilt, die im sizes-Attribut angegeben ist, um die effektive Pixeldichte zu berechnen.
    • Einem Pixeldichtedeskriptor (eine positive Gleitkommazahl, direkt gefolgt von x).

Wenn kein Deskriptor angegeben ist, wird der Quelle der Standarddeskriptor von 1x zugewiesen.

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

Wenn das srcset-Attribut Breitenbeschreibungen verwendet, muss auch das sizes-Attribut vorhanden sein, ansonsten wird das srcset selbst ignoriert.

Der User Agent wählt nach eigenem Ermessen eine der verfügbaren Quellen aus. Dies bietet ihnen erheblichen Spielraum, um ihre Auswahl basierend auf Dingen wie Benutzerpräferenzen oder Bandbreiten-Bedingungen anzupassen. Siehe unser Reaktionsfähige Bilder-Tutorial für ein Beispiel.

width

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

usemap

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

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

Veraltete Attribute

align Veraltet

Richtet das Bild am umgebenden Kontext aus. Verwenden Sie stattdessen 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

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 des Weißraums links und rechts vom Bild. 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 neuesten W3C Version, HTML 5.2, erwähnt, wurde jedoch aus dem WHATWG's HTML-Living-Standard entfernt. Es hat eine ungewisse Zukunft; Autoren sollten eine WAI-ARIA Alternative verwenden, wie aria-describedby oder aria-details.

name Veraltet

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

vspace Veraltet

Die Anzahl von Pixeln des Weißraums 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 Standarddimensionen 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 Grundlinie, sodass, wenn Bilder in einem Inline-Formatierungskontext mit vertical-align: baseline verwendet werden, der Boden des Bildes auf der Textgrundlinie platziert wird.

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

Abhängig von seinem Typ kann ein Bild eine intrinsische Breite und Höhe haben. Für einige Bildtypen sind jedoch intrinsische Dimensionen nicht notwendig. SVG-Bilder zum Beispiel haben keine intrinsischen Dimensionen, wenn ihr Stamm-<svg>-Element keine width oder height hat, die darauf gesetzt sind.

Barrierefreiheit

Bedeutungsvolle alternative Beschreibungen schreiben

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

Nicht tun

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

Tun

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

Ein wichtiger Barrierefreiheitstest besteht darin, den Inhalt des alt-Attributs zusammen mit vorangehendem Textinhalt zu lesen, um zu sehen, ob er dieselbe 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 wäre, könnte das Nicht tun-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 Tun-Beispiel könnte als "Auf meinen Reisen habe ich ein süßes kleines Tier gesehen: Ein Pinguin am Strand." gelesen werden, was sinnvoll ist.

Für Bilder, die eine Aktion auslösen sollen, z.B. Bilder, die innerhalb eines <a>- oder <button>-Elements verschachtelt sind, sollten Sie in Erwägung ziehen, die ausgelöste Aktion im alt-Attributwert zu beschreiben. Zum Beispiel könnten Sie alt="nächste Seite" anstelle von alt="Pfeil rechts" schreiben. Sie könnten auch eine optionale zusätzliche Beschreibung innerhalb eines title-Attributs hinzufügen; diese kann von Bildschirmlesegeräten vorgelesen werden, wenn der Benutzer es anfordert.

Wenn ein alt-Attribut bei einem Bild nicht vorhanden ist, können einige Bildschirmlesegeräte stattdessen den Dateinamen des Bildes anzeigen. Dies kann eine verwirrende Erfahrung sein, wenn der Dateiname nicht repräsentativ für den Inhalt des Bildes ist.

Identifizieren von SVG als Bild

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 das SVG korrekt als Bildinhalt ankündigen.

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

Das title-Attribut

Das title-Attribut ist kein akzeptabler Ersatz für das alt-Attribut. Vermeiden Sie es zudem, den Wert des alt-Attributs in einem title-Attribut zu duplizieren, das auf demselben Bild angegeben ist. Dies kann dazu führen, dass einige Bildschirmlesegeräte denselben Text zweimal vorlesen, was eine verwirrende Erfahrung schafft.

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

Der Wert des title-Attributs wird dem Benutzer normalerweise als Tooltip angezeigt, der kurz nach dem Anhalten des Cursors über dem Bild erscheint. Während dies dem Benutzer zusätzliche Informationen bieten kann, sollten Sie nicht davon ausgehen, dass der Benutzer sie jemals sehen wird: der Benutzer könnte nur eine Tastatur oder einen Touchscreen haben. Wenn Sie Informationen haben, die für den Benutzer besonders wichtig oder wertvoll sind, präsentieren Sie sie inline mit einer der oben genannten Methoden anstelle der Verwendung von title.

Beispiele

Alternativer Text

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

html
<img src="favicon144.png" alt="MDN" />

Dieses Beispiel baut auf dem vorherigen auf und zeigt, wie das Bild in einen Link umgewandelt werden kann. Um dies zu tun, verschachteln Sie das <img>-Tag innerhalb des <a>. Sie sollten den Alternativtext so gestalten, dass er die Ressource beschreibt, auf die der Link verweist, als ob Sie stattdessen einen Textlink verwenden würden.

html
<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

Verwendung des srcset-Attributs

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

html
<img src="favicon72.png" alt="MDN" srcset="favicon144.png 2x" />

Verwendung der srcset- und sizes-Attribute

Das src-Attribut wird in User Agents, die srcset unterstützen, ignoriert, wenn w-Deskriptoren enthalten sind. Wenn die (max-width: 600px) Media-Bedingung zutrifft, wird das 200 Pixel breite Bild geladen (es ist dasjenige, das am nächsten zu 200px passt), andernfalls wird das andere Bild geladen.

html
<img
  src="clock-demo-200px.png"
  alt="The time is 12:45."
  srcset="clock-demo-200px.png 200w, clock-demo-400px.png 400w"
  sizes="(max-width: 600px) 200px, 50vw" />

Hinweis: Um das Resizing in Aktion zu sehen, view the example on a separate page, damit Sie tatsächlich den Inhaltsbereich ändern können.

Sicherheits- und Datenschutzbedenken

Obwohl <img>-Elemente harmlose Verwendungen haben, können sie unerwünschte Folgen für die Sicherheit und den Datenschutz des Benutzers haben. Siehe Referer-Header: Datenschutz- und Sicherheitsbedenken für weitere Informationen und Maßnahmen zur Minderung.

Technische Zusammenfassung

Inhaltskategorien Flussinhalt, Phrasierungsinhalt, eingebetteter Inhalt, fühlbarer Inhalt. Wenn das Element ein usemap-Attribut hat, ist es auch Teil der Kategorie interaktiver Inhalt.
Erlaubter Inhalt Keiner; es ist ein [leeres Element](/de/docs/Glossar/void_element).
Tag-Auslassung Muss ein Starttag haben und darf keinen Endtag haben.
Erlaubte Eltern Jedes Element, das eingebetteten Inhalt akzeptiert.
Implizite ARIA-Rolle
  • mit nicht leerem alt-Attribut oder ohne alt-Attribut: img
  • mit leerem alt-Attribut: präsentation
Erlaubte ARIA-Rollen
DOM-Schnittstelle [`HTMLImageElement`](/de/docs/Web/API/HTMLImageElement)

Spezifikationen

Specification
HTML
# the-img-element

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
img
align
Deprecated
alt
Aspect ratio computed from width and height attributes
attributionsrc
Experimental
border
Deprecated
crossorigin
decoding
fetchpriority
height
hspace
Deprecated
ismap
loading
longdesc
Deprecated
name
Deprecated
referrerpolicy
no-referrer-when-downgrade
origin-when-cross-origin
unsafe-url
sizes
auto value
src
srcset
usemap
Content is case-sensitive
vspace
Deprecated
width

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
Deprecated. Not for use in new websites.
See implementation notes.
Uses a non-standard name.
Has more compatibility info.

Siehe auch