Das<img>HTML Element bettet ein Bild in das Dokument ein.

Probieren Sie es aus

<img   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:

• Dassrc-Attribut enthält den Pfad zu dem Bild, das Sie einbetten möchten. Es ist nicht erforderlich, wenn dassrcset Attribut verfügbar ist. Allerdings muss mindestens eines dersrc- odersrcset-Attribute angegeben werden.
• Dasalt-Attribut enthält einen textuellen Ersatz für das Bild, der obligatorisch undaußerordentlich nützlich für die Barrierefreiheit ist — Bildschirmleseprogramme lesen den Attributwert ihren Nutzern vor, damit diese wissen, was das Bild bedeutet. Alternativer Text wird auch auf der Seite angezeigt, wenn das Bild aus irgendeinem Grund nicht geladen werden kann: Zum Beispiel bei Netzwerkfehlern, Inhaltsblockaden oder veralteten Links.

Es gibt viele andere Attribute, die verschiedene Zwecke erfüllen:

• Referrer/CORS Kontrolle für Sicherheit und Datenschutz: siehecrossorigin undreferrerpolicy.
• Verwenden Sie sowohlwidth als auchheight, um die intrinsische Größe des Bildes festzulegen und es zu ermöglichen, Platz einzunehmen, bevor es geladen wird, um Layoutverschiebungen von Inhalten zu mildern.
• Hinweise für responsive Bilder mitsizes undsrcset (siehe auch das<picture>-Element und unserLeitfaden für responsive Bilder).

Unterstützte Bildformate

Der HTML-Standard listet nicht auf, welche Bildformate unterstützt werden sollen, daher könnenUser-Agenten verschiedene Formate unterstützen.

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

• APNG (Animated Portable Network Graphics) — Gute Wahl für verlustfreie Animationssequenzen (GIF ist weniger performant)
• AVIF (AV1 Image File Format) — Gute Wahl sowohl für Bilder als auch für animierte Bilder aufgrund der hohen Leistung.
• GIF (Graphics Interchange Format) — Gute Wahl füreinfache Bilder und Animationen.
• JPEG (Joint Photographic Expert Group image) — Gute Wahl für verlustbehaftete Kompression von Standbildern (derzeit das beliebteste Format).
• PNG (Portable Network Graphics) — Gute Wahl für verlustfreie Kompression von Standbildern (leicht bessere Qualität als JPEG).
• SVG (Scalable Vector Graphics) — Vektorbildformat. Nutzen Sie es für Bilder, die in unterschiedlichen Größen präzise gezeichnet werden müssen.
• WebP (Web Picture Format) — Ausgezeichnete Wahl sowohl für Bilder als auch für animierte Bilder

Formate wieWebP undAVIF werden empfohlen, da sie für sowohl Stand- als auch animierte Bilder viel besser performen als PNG, JPEG, GIF.

SVG bleibt das empfohlene Format für Bilder, die in unterschiedlichen Größen präzise gezeichnet werden müssen.

Bildladefehler

Wenn beim Laden oder Rendern eines Bildes ein Fehler auftritt und einonerror-Ereignishandler für daserror-Ereignis festgelegt wurde, wird dieser Ereignishandler aufgerufen. Dies kann in mehreren Situationen geschehen, einschließlich:

• Diesrc- odersrcset-Attribute sind leer ("") odernull.
• DiesrcURL ist dieselbe wie die URL der Seite, auf der der Benutzer gerade ist.
• Das Bild ist auf eine Weise beschädigt, dass es nicht geladen werden kann.
• Die Metadaten des Bildes sind so beschädigt, dass es unmöglich ist, seine Abmessungen abzurufen, und es wurden keine Abmessungen in den Attributen des<img>-Elements angegeben.
• Das Bild ist in einem Format, das vomUser-Agenten nicht unterstützt wird.

Attribute

Dieses Element umfasst dieglobalen 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 keine Bilder anzeigt, wie zum Beispiel:

    • Nichtvisuelle Browser (wie solche, 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 einnicht unterstützter Typ

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

    Das Setzen dieses Attributs auf einen leeren String (alt="") zeigt an, dass dieses Bildkein wesentlicher Bestandteil des Inhalts ist (es ist Dekoration oder ein Tracking-Pixel) und dass nichtvisuelle Browser es bei derDarstellung weglassen dürfen. Visuelle Browser werden auch das defekte Bildsymbol ausblenden, wenn dasalt-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 in einem Lesezeichen gespeichert wird.

• attributionsrcExperimentell

  • : Gibt an, dass Sie möchten, dass der Browser einenAttribution-Reporting-Eligible-Header zusammen mit der Bildanfrage sendet.

    Serverseitig wird dies verwendet, um das Senden einesAttribution-Reporting-Register-Source- oderAttribution-Reporting-Register-Trigger-Headers in der Antwort auszulösen, um eine bildbasierteAttributionsquelle oder einenAttributionstrigger zu registrieren. Welcher Header in der Antwort zurückgesendet werden soll, hängt vom Wert desAttribution-Reporting-Eligible-Headers ab, der die Registrierung ausgelöst hat.

    Das entsprechende Quell- oder Trigger-Ereignis wird ausgelöst, nachdem der Browser die Antwort mit der Bilddatei erhalten hat.

    Hinweis:Weitere Details finden Sie in derAttribution Reporting API.

    Sie können zwei Versionen dieses Attributs festlegen:

    • Boolean, d.h. nur derattributionsrc-Name. Dies gibt an, dass Sie denAttribution-Reporting-Eligible-Header an denselben Server senden möchten, auf den dassrc-Attribut verweist. Dies ist in Ordnung, wenn Sie die Registrierung der Attributionsquelle oder des Triggers auf demselben Server vornehmen. Bei der Registrierung eines Attributionstriggers ist diese Eigenschaft optional und ein boolescher Wert wird verwendet, wenn er weggelassen wird.
    • Wert mit einer oder mehreren URLs, zum Beispiel:
    html

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

    Dies ist nützlich in Fällen, in denen die angeforderte Ressource nicht auf einem von Ihnen kontrollierten Server liegt, oder wenn Sie die Registrierung der Attributionsquelle auf einem anderen Server vornehmen möchten. In diesem Fall können Sie eine oder mehrere URLs als Wert vonattributionsrc angeben. Wenn die Ressourcenanforderung erfolgt, wird derAttribution-Reporting-Eligible-Header an die inattributionSrc angegebenen URL(s) zusätzlich zum Ursprungsserver der Ressource gesendet. Diese URLs können dann mit einem passendenAttribution-Reporting-Register-Source- oderAttribution-Reporting-Register-Trigger-Header antworten, um die Registrierung abzuschließen.

    Hinweis:Die Angabe mehrerer URLs bedeutet, dass mehrere Attributionsquellen auf derselben Funktion registriert werden können. Sie könnten beispielsweise verschiedene Kampagnen haben, deren Erfolg Sie messen möchten, was die Erstellung unterschiedlicher Berichte über unterschiedliche Daten erfordert.

• crossorigin

  • : Gibt an, ob das Bild unter Verwendung einerCORS-Anfrage abgerufen werden muss. Bilddaten von einemCORS-fähigen Bild, das von einer CORS-Anfrage zurückgegeben wird, können im<canvas>-Element wiederverwendet werden, ohne als "verfälscht" markiert zu werden.

    Wenn dascrossorigin-Attributnicht angegeben ist, wird eine nicht-CORS-Anfrage gesendet (ohne denOrigin-Anfragetext), und der Browser markiert das Bild als verfälscht und beschränkt den Zugriff auf seinen Bilddaten, was seine Nutzung in<canvas>-Elementen verhindert.

    Wenn dascrossorigin-Attributangegeben ist, wird eine CORS-Anfrage gesendet (mit demOrigin-Anfragetext); wenn der Server jedoch nicht den Zugriff auf die Bilddaten durch die Ursprungsseite durch das Senden einesAccess-Control-Allow-Origin-Antwortheaders erlaubt, oder die Ursprungsseite nicht in einen solchen einbezieht, blockiert der Browser das Laden des Bildes und protokolliert einen CORS-Fehler in der Entwicklerkonsole.

    Zulässige Werte:

    anonymous

    Eine CORS-Anfrage wird gesendet, wobei Anmeldeinformationen weggelassen werden (d.h. keineCookies,X.509-Zertifikate oderAuthorization-Anfragetext).

    use-credentials

    Die CORS-Anfrage wird mit allen Anmeldeinformationen gesendet (d.h. Cookies, X.509-Zertifikate und demAuthorization-Anfragetext). Wenn der Server nicht in das Teilen der Anmeldeinformationen mit der Ursprungsseite einwilligt (durch das Zurücksenden desAccess-Control-Allow-Credentials: true-Antwortheaders), markiert der Browser das Bild als verfälscht und beschränkt den Zugriff auf seine Bilddaten.

    Wenn das Attribut einen ungültigen Wert hat, behandeln Browser es, als ob der Wertanonymous verwendet wurde. Weitere Informationen finden Sie unterCORS-Einstellungen von Attributen.

• decoding

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

    Es ist oft schwierig, einen deutlichen Effekt bei der Verwendung vondecoding 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 dem Cache) und unabhängig bearbeitet werden, sodass die "Synchronisierung" von Inhaltsaktualisierungen weniger offensichtlich ist. Das Blockieren des Renderings während der Dekodierung kann zwar oft ziemlich klein sein,kann jedoch gemessen werden — selbst wenn es mit bloßem Auge schwierig zu beobachten ist. SieheWas macht das Bilddekodierungsattribut tatsächlich? für eine umfassendere Analyse (tunetheweb.com, 2023).

    Die Verwendung unterschiedlicherdecoding-Typen kann zu deutlicheren Unterschieden führen, wenn<img>-Elemente dynamisch via JavaScript in das DOM eingefügt werden — sieheHTMLImageElement.decoding für weitere Details.

    Zulässige Werte:

    sync

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

    async

    Dekodieren Sie das Bild asynchron, nachdem die anderen DOM-Inhalte gerendert und präsentiert 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 diePerformanceElementTiming API. Der angegebene Wert wird zu einer Kennung für das beobachtete Bild-Element. Siehe auch die Seite zumelementtiming-Attribut.

• fetchpriority

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

    high

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

    low

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

    auto

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

• height

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

    Hinweis:Das Einschließen vonheight undwidth ermöglicht es dem Browser, dasSeitenverhältnis des Bildes zu berechnen, bevor das Bild geladen wird. Dieses Seitenverhältnis wird verwendet, um den zum Anzeigen des Bildes erforderlichen Platz zu reservieren und so Layoutverschiebungen zu reduzieren oder sogar zu verhindern, wenn das Bild heruntergeladen und auf den Bildschirm gemalt wird. Die Reduzierung von Layoutverschiebungen ist ein wesentlicher Bestandteil einer guten Benutzererfahrung und Webperformance.

• ismap

  • : Dieses Booleanattribut gibt an, dass das Bild Teil einerserverseitigen Karte ist. Wenn ja, werden die Koordinaten, auf die der Benutzer im Bild geklickt hat, an den Server gesendet.

    Hinweis:Dieses Attribut ist nur erlaubt, wenn das<img>-Element ein Nachfahre eines<a>-Elements mit einem gültigenhref Attribut ist. Dies bietet 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 das Bild derzeit im sichtbaren Ansichtsfenster ist oder nicht (dies ist der Standardwert).

    lazy

    Verzögert das Laden des Bildes, bis es eine berechnete Entfernung vom Ansichtsfenster erreicht, wie vom Browser definiert. Ziel ist es, die Netzwerk- und Speicherkapazität zu sparen, die zum Verarbeiten des Bildes erforderlich ist, bis es mit einiger Wahrscheinlichkeit benötigt wird. Dies verbessert allgemein die Leistung der Inhalte in den meisten typischen Anwendungsfällen.

    Obwohl explizitewidth- undheight-Attribute für alle Bilder empfohlen werden, um Layoutverschiebungen zu vermeiden, sind sie besonders bei verzögert geladenen Bildern wichtig. Verzögert geladene Bilder werden nie geladen, wenn sie keinen sichtbaren Teil eines Elements schneiden, auch wenn deren Laden dies ändern würde, da nicht geladene Bilder einewidth undheight von0 haben. Es schafft eine noch störendere Benutzererfahrung, wenn sich die Inhalte im Ansichtsfenster während des Lesens verschieben.

    Dasload-Ereignis wird ausgelöst, nachdem eilig geladene Bilder abgerufen und verarbeitet wurden, jedoch vor den verzögert geladenen, selbst wenn die verzögert geladenen Bilder sofort bei der ersten Seitenladung innerhalb des visuellen Ansichtsfensters angezeigt werden. Diese Bilder werden immer noch geladen, sobald das Layout abgeschlossen ist; sie beeinflussen jedoch nicht das Timing desload-Ereignisses. Das bedeutet, dass es möglich ist, dass wennload ausgelöst wird, sich einige verzögert geladene Bilder im visuellen Ansichtsfenster noch nicht sichtbar sein könnten.

    Das Laden wird nur verzögert, wenn JavaScript aktiviert ist. Dies ist eine Anti-Tracking-Maßnahme, da es möglich wäre, die ungefähre Scrollposition eines Benutzers während einer Sitzung zu verfolgen, indem Bilder strategisch im Markup platziert werden, sodass ein Server verfolgen kann, wie viele Bilder angefordert werden und wann.

• referrerpolicy

  • : Ein String, der angibt, welchen Referrer beim Abrufen der Ressource verwendet werden soll:
    • no-referrer: DerReferer Header wird nicht gesendet.
    • no-referrer-when-downgrade: DerReferer Header wird nicht anUrsprünge ohneTLS (HTTPS) gesendet.
    • origin: Der gesendete Referrer wird auf den Ursprung der verweisenden Seite beschränkt: dasSchema, denHost und denPort.
    • origin-when-cross-origin: Der Referrer, der an andere Ursprünge gesendet wird, wird auf das Schema, den Host und den Port beschränkt. Navigationen im selben Ursprung enthalten weiterhin den Pfad.
    • same-origin: Ein Referrer wird fürgleicher Ursprung gesendet, aber Anfragen zwischen Ursprüngen enthalten keine Referrer-Informationen.
    • strict-origin: Nur der Ursprung des Dokuments als Referrer wird gesendet, wenn das Sicherheitsprotokollniveau gleich bleibt (HTTPS→HTTPS), jedoch nicht an ein weniger sicheres Ziel (HTTPS→HTTP).
    • strict-origin-when-cross-origin (Standard): Senden Sie eine vollständige URL bei einer Anfrage vom gleichen Ursprung, 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 enthält den Ursprungund den Pfad (aber nicht dasFragment, dasPasswort oder denBenutzernamen).Dieser Wert ist unsicher, da er Ursprünge und Pfade von TLS-geschützten Ressourcen an unsichere Ursprünge leakt.

• sizes

  • : Ein oder mehrere Werte, die durch Kommas getrennt sind, die Quellgrößen oder das Schlüsselwortauto sein können. Die Spezifikation erfordert, dass dassizes-Attribut nur vorhanden ist, wennsrcset Breitenbeschreibungen verwendet.

  EineQuellgröße besteht aus:

  1. EinerMedienbedingung, die für den letzten Eintrag in der Liste weggelassen wird.
  2. Einem Quellgrößenwert.

  Medienbedingungen beschreiben Eigenschaften desAnsichtsfensters, nicht desBildes. Zum Beispiel:(height <= 500px) 1000px schlägt die Verwendung einer Bildquelle von 1000px Breite vor, wenn die _Ansichtsfenster_höhe 500px oder weniger ist. Da ein Quellgrößenbeschreiber die Breite des Bildes während des Layouts spezifiziert, basiert die Medienbedingung typischerweise (aber nicht notwendigerweise) auf derBreite.

  Quellgrößenwerte geben die beabsichtigte Größe des Bildes während der Anzeige an.Benutzeragenten verwenden die aktuelle Quellgröße, um eine der vonsrcset angebotenen Quellen auszuwählen, wenn diese Quellen mit Breiten- (w) Beschreibungen angegeben sind. Die gewählte Quellgröße beeinflusst dieintrinsische Größe des Bildes (die Anzeigengröße des Bildes, wenn keineCSS-Stilgebung angewendet wird).

  Ein Quellgrößenwert kann jede nicht negativeLänge sein. Er darf keine anderen CSS-Funktionen als dieMathefunktionen verwenden. Einheiten werden auf die gleiche Weise interpretiert wieMedienabfragen, was bedeutet, dass alle relativen Maßeinheiten relativ zur Dokumentwurzel und nicht zum<img>-Element sind. Beispielsweise ist einem-Wert relativ zur Schriftgröße der Wurzel und nicht zur Schriftgröße des Bildes.Prozentsätze sind nicht erlaubt. Wenn dassizes-Attribut nicht angegeben ist, hat es einen Standardwert von100vw (die Breite des Ansichtsfensters).

  Das Schlüsselwortauto kann die gesamte Liste der Größen oder den ersten Eintrag in der Liste ersetzen. Es ist nur gültig, wenn es mitloading="lazy" kombiniert ist, und löst sich auf diekonkrete Größe des Bildes auf. Da die intrinsische Größe des Bildes noch nicht bekannt ist, solltenwidth- undheight-Attribute (oder CSS-Äquivalente) auch angegeben werden, um zu verhindern, dass der Browser die Standardbildbreite von 300px annimmt. Um die Rückwärtskompatibilität mit Browsern zu verbessern, dieauto nicht unterstützen, können Sie fallback-Größen nachauto imsizes-Attribut einschließen:

  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 dersrc- undsrcset Attribute ist für ein<img>-Element erforderlich. Wennsrcset angegeben ist, wirdsrc in einer von zwei Weisen verwendet:
    • als Fallback für Browser, diesrcset nicht unterstützen.
    • Wennsrcset den "x"-Beschreiber verwendet, dann istsrc äquivalent zu einer Quelle mit dem Dichtebeschreiber1x; das heißt, das durchsrc spezifizierte Bild wird auf Bildschirmen mit niedriger Dichte verwendet (wie typische 72 DPI oder 96 DPI Displays).

• srcset

  • : Ein oder mehrere durch Kommas getrennte Strings, die mögliche Bildquellen für den Gebrauch durch denUser Agent angeben.

    Jeder String besteht aus:

    1. EinerURL zu einem Bild
    2. Optional, Leerzeichen gefolgt von einer der folgenden Angaben:
       • Einem Breitenbeschreiber (eine positive ganze Zahl, direkt gefolgt vonw). Ermuss mit der intrinsischen Breite des referenzierten Bildes übereinstimmen. Der Breitenbeschreiber wird durch die in demsizes-Attribut angegebene Quellgröße geteilt, um die effektive Pixeldichte zu berechnen. Zum Beispiel, um eine Bildquelle bereitzustellen, die verwendet wird, wenn der Renderer ein 450 Pixel breites Bild benötigt, verwenden Sie den Breitenbeschreiber450w. Wenn einsrcset "w"-Beschreiber enthält, verwenden Browser diese Beschreiber zusammen mit demsizes-Attribut zur Auswahl einer Ressource.
       • Einem Pixeldichte-Beschreiber (eine positive Gleitkommazahl, direkt gefolgt vonx). Er gibt die Bedingung an, unter der die entsprechende Bildressource als Pixeldichte des Anzeigegeräts verwendet werden soll. Zum Beispiel, um eine Bildressource bereitzustellen, die verwendet wird, wenn die Pixeldichte doppelt so hoch ist wie die Standarddichte, verwenden Sie den Pixeldichte-Beschreiber2x oder2.0x.

    Wenn kein Beschreiber angegeben ist, wird der Quelle der Standardbeschreiber1x zugewiesen. Es ist nicht korrekt, Breiten- und Pixeldichte-Beschreiber im selbensrcset-Attribut zu mischen. Doppelte Beschreiber (zum Beispiel zwei Quellen im selbensrcset, die beide mit2x beschrieben sind) sind ebenfalls ungültig.

    Leerzeichen, außer dem Weißraum, der die URL und den entsprechenden Bedingungsbeschreiber trennt, werden ignoriert; dies beinhaltet sowohl führende als auch nachfolgende Leerzeichen sowie Leerzeichen vor oder nach jedem Komma. Wenn jedoch ein Bildkandidatenstring keine Beschreiber und keinen Leerraum nach der URL enthält, muss der folgende Bildkandidatenstring, falls vorhanden, mit einem oder mehreren Leerzeichen beginnen, ansonsten wird das Komma als Teil der URL angesehen.

    Wenn dassrcset-Attribut des<img>-Elementsx-Beschreiber verwendet, berücksichtigen Browser auch die URL imsrc-Attribut (falls vorhanden) als Kandidat und weisen ihr einen Standardbeschreiber von1x zu. Wenn dassrcset-Attribut jedoch Breitenbeschreiber verwendet, wirdsrc nicht berücksichtigt, und dassizes-Attribut wird stattdessen verwendet.

    Der User Agent wählt nach eigenem Ermessen eine der verfügbaren Quellen aus. Dies gibt ihm großen Handlungsspielraum, um seine Auswahl anhand von Dingen wie Benutzereinstellungen oderBandbreiten-Bedingungen anzupassen. Sehen Sie sich unserLeitfaden für responsive Bilder an, um ein Beispiel zu erhalten.

• width

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

• usemap

  • : Die partielleURL (beginnend mit#) einerBildkarte, die dem Element zugeordnet ist.

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

Veraltete Attribute

alignVeraltet

Richtet das Bild an seinem umgebenden Kontext aus. Verwenden Sie diefloat- und/odervertical-align-CSS-Eigenschaften anstelle dieses Attributs. Zulässige Werte:

top

Entsprichtvertical-align: top odervertical-align: text-top

middle

Entsprichtvertical-align: -moz-middle-with-baseline

bottom

Der Standardwert, entsprichtvertical-align: unset odervertical-align: initial

left

Entsprichtfloat: left

right

Entsprichtfloat: right

borderVeraltet

Die Breite eines Rahmens um das Bild. Verwenden Sie stattdessen dieborderCSS-Eigenschaft.

hspaceVeraltet

Die Anzahl der Pixel des Leerraums links und rechts des Bildes. Verwenden Sie stattdessen diemargin-CSS-Eigenschaft.

longdescVeraltet

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

Hinweis:Dieses Attribut wird imHTML-Spezifikation als veraltet betrachtet. Es hat eine ungewisse Zukunft; Autoren sollten eineWAI-ARIA-Alternative wiearia-describedby oderaria-details verwenden.

nameVeraltet

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

vspaceVeraltet

Die Anzahl der Pixel Leerraum über und unter dem Bild. Verwenden Sie stattdessen diemargin-CSS-Eigenschaft.

Styling mit CSS

<img> ist einersetztes Element; es hat einendisplay-Wert voninline standardmäßig, aber seine Standardmaße werden durch die eingebetteten intrinsischen Werte des Bildes definiert, als ob esinline-block wäre. Sie können Eigenschaften wieborder/border-radius,padding/margin,width,height, etc. auf ein Bild setzen.

<img> hat keine Grundlinie, daher wird, wenn Bilder in einem Inline-Formatierungskontext mitvertical-align: baseline verwendet werden, der Boden des Bildes auf die Texthöhe gesetzt.

Sie können dieobject-position Eigenschaft verwenden, um das Bild innerhalb des Elementrahmens zu positionieren, und dieobject-fit Eigenschaft, um die Bildgröße innerhalb des Rahmens anzupassen (zum Beispiel, ob das Bild in den Rahmen passen oder ihn füllen sollte, auch wenn das Abschneiden erforderlich ist).

Je nach Art kann ein Bild eine intrinsische Breite und Höhe haben. Für einige Bildtypen, wieSVG, sind intrinsische Maße jedoch nicht erforderlich, wenn ihr Wurzelelement<svg> keinwidth oderheight gesetzt hat.

Barrierefreiheit

Bedeutungsvolle alternative Beschreibungen erstellen

Der Wert einesalt-Attributs sollte einen klaren und prägnanten Textersatz für den Inhalt des Bildes liefern. Es sollte nicht die bloße Anwesenheit des Bildes selbst beschreiben oder den Dateinamen des Bildes angeben. Wenn dasalt-Attribut absichtlich weggelassen wird, da das Bild kein textuelles Äquivalent hat, ziehen Sie alternative Methoden in Betracht, um darzustellen, was das Bild vermitteln soll.

Nicht

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

Tun Sie es

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

Ein wichtiger Barrierefreiheitstest besteht darin, den Inhalt desalt-Attributs zusammen mit dem vorhergehenden Textinhalt zu lesen, um zu sehen, ob es die gleiche Bedeutung wie das Bild übermittelt. Zum Beispiel könnte, wenn das Bild von dem Satz "Auf meinen Reisen habe ich ein süßes kleines Tier gesehen:" vorausgegangen wird, das Beispiel für Nicht-"Nicht verwenden" von einem Bildschirmlesegerät als "Auf meinen Reisen habe ich ein süßes kleines Tier gesehen: Bild" gelesen werden, was keinen Sinn ergibt. Das Beispiel für "Tun Sie es" könnte hingegen 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 eine Aktion auslösen sollen, zum Beispiel Bilder, die in einem<a>- oder<button>-Element verschachtelt sind, sollten Sie das Auslösen der Aktion imalt-Attribut-Wert beschreiben. Zum Beispiel könnten Siealt="nächste Seite" anstelle vonalt="Pfeil rechts" schreiben. Sie könnten auch in Betracht ziehen, eine optionale weitergehende Beschreibung in einemtitle-Attribut hinzuzufügen; dies kann von Bildschirmlesegeräten gelesen werden, wenn der Benutzer es anfordert.

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

• Ein Alt-Entscheidungsbaum • Bilder • WAI-Web-Zugänglichkeitstutorials
• Alt-Texts: Der ultimative Leitfaden — Axess Lab
• Wie man großartige Alt-Texte gestaltet: Eine Einführung | Deque
• MDN Verstehen von WCAG, Erläuterungen zur Richtlinie 1.1
• Verständnis des Erfolgs-Kriteriums 1.1.1 | W3C Verstehen von WCAG 2.0

Identifizierung von SVG als Bild

Aufgrund einesVoiceOver-Bugs kündigt VoiceOver SVG-Bilder nicht korrekt als Bilder an. Fügen Sie dasrole="img" zu allen<img>-Elementen mit SVG-Quellen-Dateien hinzu, um sicherzustellen, dass unterstützende Technologien SVG korrekt als Bildinhalt ankündigen.

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

Das title-Attribut

Dastitle-Attribut ist kein geeigneter Ersatz für dasalt-Attribut. Vermeiden Sie außerdem, den Wert desalt-Attributs in einemtitle-Attribut auf demselben Bild zu duplizieren. Dies könnte dazu führen, dass einige Bildschirmlesegeräte denselben Text zweimal ansagen, was verwirrend sein kann.

Dastitle-Attribut sollte auch nicht als ergänzende Beschriftungsinformation zur Begleitung eineralt-Beschreibung eines Bildes verwendet werden. Wenn ein Bild eine Bildunterschrift benötigt, verwenden Sie diefigure- undfigcaption-Elemente.

Der Wert destitle-Attributs wird dem Nutzer normalerweise als Tooltip angezeigt, der kurz erscheint, nachdem der Cursor über das Bild bewegt wurde. Dieskann zusätzliche Informationen für den Nutzer bereitstellen, Sie sollten jedoch nicht davon ausgehen, dass der Nutzer ihn jemals sehen wird: der Nutzer könnte nur eine Tastatur oder einen Touch-Bildschirm haben. Falls Sie Informationen haben, die besonders wichtig oder wertvoll für den Nutzer sind, bieten Sie sie inline mit einer der oben genannten Methoden an, anstatttitle zu verwenden.

• Verwendung des HTML-title-Attributs – aktualisiert | Die Paciello-Gruppe

Beispiele

Alternativer Text

Das folgende Beispiel bettet ein Bild in die Seite ein und fügt für die Barrierefreiheit einen alternativen Text hinzu.

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

Bild-Link

Dieses Beispiel baut auf dem vorherigen auf und zeigt, wie das Bild in einen Link umgewandelt wird. Um dies zu tun, verschachteln Sie das<img>-Tag innerhalb des<a>-Tags. Der alternative Text sollte die Ressource beschreiben, 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-Attributes

In diesem Beispiel fügen wir einsrcset-Attribut mit einem Verweis auf eine hochauflösende Version des Logos ein; dieses wird auf hochauflösenden Geräten anstelle dessrc-Bildes geladen. Das imsrc-Attribut referenzierte Bild wird in User-Agents, diesrcset unterstützen, als1x-Kandidat gezählt.

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

Verwendung der srcset- und sizes-Attribute

Dassrc-Attribut wird in User-Agents, diesrcset unterstützen, ignoriert, wennw-Beschreiber enthalten sind. Wenn die Medienbedingung(width <= 600px) zutrifft, lädt das 200 Pixel breite Bild (dies ist das, das am "besten" zu200px passt), 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 Anwendungen haben, können sie unerwünschte Konsequenzen für die Sicherheit und Privatsphäre der Nutzer haben. SieheReferer-Header: Datenschutz- und Sicherheitsbedenken für weitere Informationen und Gegenmaßnahmen.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

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