1. Web
  2. HTML
  3. Reference
  4. Elements
  5. <img>

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

<img> HTML-Bildeinbettungselement

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

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

Probieren Sie es aus

<img
  class="fit-picture"
  src="/shared-assets/images/examples/grapefruit-slice.jpg"
  alt="Grapefruit slice atop a pile of other slices" />

.fit-picture {
  width: 250px;
}

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

  • Das src-Attribut enthält den Pfad zu dem Bild, das Sie einbetten möchten. Es ist nicht zwingend erforderlich, wenn das srcset-Attribut verfügbar ist. Es muss jedoch mindestens eines der src- oder srcset-Attribute angegeben werden.
  • Das alt-Attribut enthält einen textuellen Ersatz für das Bild, der verpflichtend ist und unglaublich nützlich für die Barrierefreiheit ist — Bildschirmleser lesen den Wert des Attributs ihren Benutzern vor, damit sie wissen, was das Bild bedeutet. Der Alternativtext wird auch auf der Seite angezeigt, wenn das Bild aus irgendeinem Grund nicht geladen werden kann: zum Beispiel bei Netzwerkfehlern, Inhaltsblockierung oder Linkverfall.

Es gibt viele weitere Attribute, um verschiedene Zwecke zu erfüllen:

Unterstützte Bildformate

Der HTML-Standard listet nicht auf, welche Bildformate unterstützt werden sollen, sodass User Agents unterschiedliche Formate unterstützen können.

Hinweis: Der Leitfaden zu Bilddateitypen und -formaten bietet umfassende Informationen zu Bildformaten und deren Unterstützung in Webbrowsern. Dieser Abschnitt ist nur eine Zusammenfassung!

Die am häufigsten im Web verwendeten Bilddateiformate sind:

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

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

Ladefehler bei Bildern

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 verschiedenen Situationen geschehen, einschließlich:

  • Die src- oder srcset-Attribute sind leer ("") oder null.
  • Die src URL ist dieselbe wie die URL der Seite, auf der der Nutzer sich gerade befindet.
  • Das Bild ist auf eine Weise beschädigt, die das Laden verhindert.
  • Die Metadaten des Bildes sind so beschädigt, dass es unmöglich ist, seine Dimensionen zu ermitteln, und es wurden keine Dimensionen in den Attributen des <img>-Elements angegeben.
  • Das Bild ist in einem Format, das vom User Agent nicht unterstützt wird.

Attribute

Dieses Element umfasst die globalen Attribute.

alt

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

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

  • Nicht-visuelle Browser (wie diejenigen, die von Personen mit Sehbehinderungen verwendet werden)
  • Der Nutzer entscheidet sich, keine Bilder anzuzeigen (zum Bandbreitensparen, 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 einen nützlichen Wert für alt immer dann angeben, wenn möglich.

Wenn dieses Attribut auf einen leeren String (alt="") gesetzt ist, bedeutet das, dass dieses Bild kein wesentlicher Teil des Inhalts ist (es ist Dekoration oder ein Zählpixel), und dass nicht-visuelle Browser es möglicherweise vom Rendern ausschließen dürfen. Visuelle Browser werden auch das kaputte 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 verknüpftes Bild als Lesezeichen gespeichert wird.

attributionsrc

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 Attribution-Trigger](/de/docs/Web/API/Attribution_Reporting_API/Registering_triggers#html-based_attribution_triggers) zu registrieren, jeweils. Welcher Antwortheader zurückgesendet werden sollte, hängt vom Wert des Attribution-Reporting-Eligible-Headers ab, der die Registrierung ausgelöst hat.

Das entsprechende Quell- oder Ereignis für den Trigger wird ausgelöst, sobald der Browser die Antwort mit der Bilddatei erhält.

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

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

  • Boolean, d.h. nur der attributionsrc-Name. Dies gibt an, dass Sie möchten, dass der Attribution-Reporting-Eligible-Header an denselben Server gesendet wird, zu dem das src-Attribut zeigt. Dies ist in Ordnung, wenn Sie die Registrierung der Quelle oder des Triggers auf demselben Server abwickeln. Wenn ein Attribution-Trigger registriert wird, ist diese Eigenschaft optional und ein Boolean-Wert wird verwendet, wenn sie 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, in denen die angeforderte Ressource nicht auf einem von Ihnen kontrollierten Server liegt oder Sie die Registrierung der Attributionsquelle auf einem anderen Server abwickeln 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 an die in attributionSrc angegebenen URL(s) zusätzlich zum Ressourcenursprung gesendet. Diese URLs können dann mit einem entsprechenden Attribution-Reporting-Register-Source- oder Attribution-Reporting-Register-Trigger-Header antworten, um die Registrierung abzuschließen.

Hinweis: Durch Angabe mehrerer URLs können mehrere Attributionsquellen auf derselben Funktion registriert werden. Sie könnten beispielsweise verschiedene Kampagnen haben, deren Erfolg Sie messen möchten, und die das Generieren verschiedener Berichte zu unterschiedlichen Daten involvieren.

crossorigin

Gibt an, ob das Abrufen des Bildes unter Verwendung einer CORS-Anfrage erfolgen muss. Bilddaten, die von einem CORS-aktivierten Bild aus einer CORS-Anfrage zurückgegeben werden, können im <canvas>-Element wiederverwendet werden, ohne als "verunreinigt" markiert zu sein.

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

Wenn das crossorigin-Attribut angegeben ist, wird eine CORS-Anfrage gesendet (mit dem Origin-Request-Header); aber wenn der Server nicht die Erlaubnis gibt, durch die Ursprungsseite auf die Bilddaten mit CORS zuzugreifen (indem er keine Access-Control-Allow-Origin-Response-Header sendet, oder indem er die Ursprungsseite nicht in einem solchen Header aufnimmt, 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, ohne Berechtigungsnachweise (d.h. keine Cookies, keine X.509-Zertifikate oder kein Authorization-Request-Header).

use-credentials

Die CORS-Anfrage wird mit eingeschlossenen Berechtigungsnachweisen gesendet (d.h. Cookies, X.509-Zertifikaten und dem Authorization-Anfrageheader). Wenn der Server nicht explizit angibt, dass Berechtigungsnachweise mit der Ursprungsseite geteilt werden sollen (indem er den Access-Control-Allow-Credentials: true-Antwortheader sendet), markiert der Browser das Bild als verunreinigt und schränkt den Zugriff auf dessen Bilddaten ein.

Wenn das Attribut einen ungültigen Wert hat, behandeln Browser es so, als ob der Wert anonymous verwendet wird. Siehe CORS-Einstellungen-Attribute für zusätzliche Informationen.

decoding

Dieses Attribut bietet einen Hinweis für den Browser, ob er die Bild-Dekodierung zusammen mit dem Rendern des anderen DOM-Inhalts in einem einzigen Präsentationsschritt, der "korrekter" aussieht (sync), oder zuerst den anderen DOM-Inhalt rendern und präsentieren und dann das Bild dekodieren und später präsentieren soll (async). In der Praxis bedeutet async, dass das nächste Paint nicht darauf wartet, dass das Bild dekodiert wird.

Es ist oft schwierig, spürbare Effekte beim Verwenden der decoding-Eigenschaft auf statischen <img>-Elementen zu erkennen. Sie werden wahrscheinlich zunächst als leere Bilder gerendert, während die Bilddateien (entweder aus dem Netzwerk oder aus dem Cache) abgerufen und dann ohnehin unabhängig behandelt werden, sodass das "Syncen" von Inhaltsaktualisierungen weniger auffällt. Das Blockieren des Renderns, während die Dekodierung stattfindet, kann jedoch gemessen werden - sogar wenn es schwierig ist, es mit dem menschlichen Auge zu beobachten. Siehe What does the image decoding attribute actually do? für eine detailliertere Analyse (tunetheweb.com, 2023).

Die Verwendung unterschiedlicher decoding-Typen kann zu spürbareren Unterschieden führen, wenn <img>-Elemente über JavaScript dynamisch in das DOM eingefügt werden – siehe HTMLImageElement.decoding für weitere Details.

Zulässige Werte:

sync

Das Bild synchron dekodieren zusammen mit dem Rendern des anderen DOM-Inhalts und alles zusammen präsentieren.

async

Das Bild asynchron dekodieren, nach dem Rendern und Präsentieren des anderen DOM-Inhalts.

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 für die Beobachtung durch die PerformanceElementTiming-API. Der angegebene Wert wird zu einem Bezeichner für das beobachtete Bild-Element. Siehe auch die Seite zum elementtiming-Attribut.

fetchpriority

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

high

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

low

Das Bild mit niedriger Priorität relativ 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 gesetzt wird.

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 das Seitenverhältnis des Bildes vom Browser vor dem Laden des Bildes berechnet werden. Dieses Seitenverhältnis wird verwendet, um den Platz zu reservieren, der zum Anzeigen des Bildes benötigt wird, um eine Layoutverschiebung zu reduzieren oder sogar zu verhindern, wenn das Bild heruntergeladen und auf den Bildschirm gezeichnet wird. Eine Verringerung der Layoutverschiebung ist ein wesentlicher Bestandteil einer guten Benutzererfahrung und der Web-Performance.

ismap

Dieses Boolean-Attribut gibt an, dass das Bild Teil einer serverseitigen Map ist. In diesem Fall werden die Koordinaten, an denen der Benutzer auf das Bild geklickt hat, an den Server gesendet.

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

loading

Gibt an, wie der Browser das Bild laden soll:

eager

Lädt das Bild sofort, unabhängig davon, ob das Bild derzeit im visuellen Ansichtsfenster ist (dies ist der Standardwert).

lazy

Verzichtet darauf, das Bild zu laden, bis es eine berechnete Entfernung vom Ansichtsfenster erreicht, wie vom Browser definiert.

Lazy Loading vermeidet das Netzwerk- und Speicherbandbreite, die erforderlich ist, um das Bild zu verarbeiten, bis es mit ziemlicher Sicherheit benötigt wird. Dies verbessert in den meisten typischen Anwendungsfällen die Leistung.

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 niemals geladen, wenn sie keinen sichtbaren Teil eines Elements überschneiden, selbst wenn dies das ändern würde, da nicht geladene Bilder eine width und height von 0 haben. Es schafft eine noch störendere Benutzererfahrung, wenn der im Ansichtsfenster sichtbare Inhalt beim Lesen mittendrin verschoben wird.

Lazy-geladene Bilder, die sich im visuellem Ansichtsfenster befinden, sind möglicherweise noch nicht sichtbar, wenn das load-Ereignis des Fensters ausgelöst wird. Dies liegt daran, dass das Ereignis basierend auf eager-geladenen Bildern ausgelöst wird – lazy-geladene Bilder werden nicht berücksichtigt, auch wenn sie sich bei der initialen Seitenlade im visuellem Ansichtsfenster befinden.

Das Laden wird nur verzögert, wenn JavaScript aktiviert ist. Dies ist eine Maßnahme zum Schutz vor Nachverfolgung, da es, wenn ein Benutzeragent Lazy-Loading unterstütze, wenn Scripting deaktiviert ist, dennoch möglich wäre, die ungefähre Scrollposition eines Benutzers während einer Sitzung zu verfolgen, indem Bilder strategisch in das Markup einer Seite platziert werden, sodass ein Server verfolgen kann, wie viele Bilder angefordert werden und wann.

referrerpolicy

Ein String, der 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 Origins ohne TLS (HTTPS) gesendet.
  • origin: Der gesendete Referrer wird auf den Origin der verweisenden Seite beschränkt: sein Schema, Host und Port.
  • origin-when-cross-origin: Der an andere Origins gesendete Referrer wird auf das Schema, den Host und den Port beschränkt. Navigationen im gleichen Origin enthalten weiterhin den Pfad.
  • same-origin: Ein Referrer wird für gleiche Origin gesendet, aber Cross-Origin-Anfragen enthalten keine Referrer-Informationen.
  • strict-origin: Der Origin des Dokuments wird nur als Referrer gesendet, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPS→HTTPS), jedoch nicht an ein weniger sicheres Ziel (HTTPS→HTTP).
  • strict-origin-when-cross-origin (Standard): Eine vollständige URL wird bei der Durchführung einer gleichen Origin-Anfrage gesendet, nur der Origin wird gesendet, wenn das Sicherheitsniveau des Protokolls gleich bleibt (HTTPS→HTTPS), und kein Header wird an ein weniger sicheres Ziel (HTTPS→HTTP) gesendet.
  • unsafe-url: Der Referrer enthält den Origin und den Pfad (aber nicht das Fragment, Passwort oder Benutzername). Dieser Wert ist unsicher, da er Origin und Pfade von TLS-geschützten Ressourcen an unsichere Origins weitergibt.
sizes

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

Quellgröße

Eine Quellgröße besteht aus:

  1. Einer Medienbedingung, die für das letzte Element in der Liste weggelassen wird.
  2. Einem Quellgrößenwert.

Zum Beispiel schlägt die folgende Quellgröße die Verwendung einer 1000px-breiten Bildquelle vor, wenn die Ansichtsfenster-Breite 500px oder weniger beträgt.

css
(width <= 500px) 1000px

Medienbedingungen beschreiben Eigenschaften des Ansichtsfensters, nicht des Bilds. Da ein Quellgrößen-Beschreiber die Breite spezifiziert, die für das Bild während des Layouts verwendet werden soll, basiert die Medienbedingung typischerweise (aber nicht zwingend) auf dem width.

Quellgrößenwerte spezifizieren die beabsichtigte Anzeigebreite des Bildes. User Agents verwenden die aktuelle Quellgröße, um eine der vom srcset-Attribut bereitgestellten Quellen auszuwählen, wenn diese Quellen mit Breiten (w)-Beschreibern beschrieben werden. Der im sizes definierte w-Wert bestimmt die Standardlayoutbreite des Bildes. In Abwesenheit von 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 CSS-Funktionen verwenden, außer den Mathe-Funktionen. Einheiten werden auf dieselbe Weise wie Medienabfragen interpretiert, was bedeutet, dass alle relativen Längeneinheiten relativ zur Dokumentenwurzel und nicht zum <img>-Element sind. Zum Beispiel ist ein em-Wert relativ zur Schriftgröße der Wurzel und nicht zur Schriftgröße des Bildes. Prozentwerte sind nicht zulässig. Wenn das sizes-Attribut nicht vorhanden ist, hat es einen Standardwert von 100vw (die Ansichtsfensterbreite).

auto

Das auto-Schlüsselwort besagt, dass der Browser die erwartete Layoutbreite des Elements zur Auswahl des anzuzeigenden Bildes verwenden soll. Das heißt, er sollten die konkrete Größe des Bildes verwenden, die nach dem Layout aus HTML und CSS berechnet wurde. Dies ist nur gültig, wenn es mit loading="lazy" kombiniert wird, da die Seite voraussichtlich bereits CSS und andere Layoutinformationen haben sollte, bis das Bild geladen wird.

Durch die Verwendung von auto ersparen Sie sich die Angabe Ihrer Layout-Medienbedingungen zweimal: einmal für das Layout und einmal für die Auswahl eines geeigneten Bildes zum Abrufen und Anzeigen.

Wenn auto nicht aufgelöst werden kann — sei es, weil der Browser es nicht unterstützt oder weil das Bild noch keine Layoutgröße hat —, fällt der Browser auf die Quellgrößen in der Liste zurück, um die Breite zu bestimmen, dann auf width/height-Attribute, die am Element definiert sind, und schließlich auf die Standard-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 fallbacks Größen nach auto im sizes-Attribut einschließen. Sie sollten auch die width und height-Attribute des Elements auf die intrinsischen Dimensionen des größten Bildes in Ihrem srcset setzen, damit der Browser den Platz unter Verwendung des richtigen Seitenverhältnisses 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. Mindestens eines von src und srcset ist für ein <img>-Element erforderlich. Wenn srcset angegeben ist, wird src auf zwei Weisen verwendet:

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

Ein oder mehrere durch Kommata getrennte Zeichenfolgen, die mögliche Bildquellen für den User Agent angeben, die verwendet werden sollen.

Jede Zeichenfolge besteht aus:

  1. Einer URL zu einem Bild
  2. Wahlweise gefolgt von Leerzeichen und einer der folgenden:
    • Einem Breitenbeschreiber (eine positive ganze Zahl direkt gefolgt von w). Er muss die intrinsische Breite des referenzierten Bildes entsprechen. Der Breitenbeschreiber wird durch die im sizes-Attribut angegebene Quellgröße geteilt, um die effektive Pixeldichte zu berechnen. Zum Beispiel, um eine Bildressource zur Verfügung zu stellen, die verwendet werden soll, wenn der Renderer ein 450 Pixel breites Bild benötigt, verwenden Sie den Breitenbeschreiber 450w. Wenn ein srcset "w"-Beschreiber enthält, verwenden die Browser diese Beschreiber zusammen mit dem sizes-Attribut, um eine Ressource auszuwählen.
    • Einem Pixeldichtebeschreiber (eine positive Fließkommazahl direkt gefolgt von x). Er gibt die Bedingung an, unter der die entsprechende Bildressource als Pixeldichte des Displays verwendet werden soll. Zum Beispiel, um eine Bildressource zur Verfügung zu stellen, die verwendet werden soll, wenn die Pixeldichte doppelt so hoch wie die Standarddichte ist, verwenden Sie den Pixeldichtebeschreiber 2x oder 2.0x.

Wenn kein Beschreiber angegeben ist, wird der Quelle der Standardbeschreiber 1x zugewiesen. Es ist falsch, Breitenbeschreiber und Pixeldichtebeschreiber im selben srcset-Attribut zu mischen. Doppelte Beschreiber (z.B. zwei Quellen im gleichen srcset, die beide mit 2x beschrieben werden) sind ebenfalls ungültig.

Leerzeichen, außer den Leerzeichen, die die URL und den entsprechenden Bedingungsbeschreiber trennen, werden ignoriert; dies umfasst sowohl führende als auch nachgestellte Leerzeichen sowie Leerzeichen vor oder nach jedem Komma. Wenn jedoch ein Bildkandidat-Zeichenfolgen keine Beschreiber und keine Leerzeichen nach der URL enthält, muss die folgende Bildkandidat-Zeichenfolge, falls vorhanden, mit einem oder mehreren Leerzeichen beginnen, andernfalls wird das Komma als Teil der URL angesehen.

Wenn das srcset des <img>-Elements x-Beschreiber verwendet, betrachten Browser auch die URL im src-Attribut (wenn vorhanden) als Kandidaten und weisen dieser einen Standardbeschreiber von 1x zu. Andererseits, wenn das srcset-Attribut Breitenbeschreiber verwendet, wird src nicht berücksichtigt, und das sizes-Attribut wird stattdessen verwendet.

Der User Agent wählt eine der verfügbaren Quellen nach eigenem Ermessen. Dies ermöglicht ihnen erhebliche Freiheiten, um ihre Auswahl auf Grundlage von Dingen wie Nutzervorlieben oder Bandbreitenbedingungen abzustimmen. Siehe unser Responsive Images-Tutorial für ein Beispiel.

width

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

usemap

Die teilweise URL (beginnend mit #) einer Bildkarte, die mit dem Element verknüpft ist.

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 mit seinem 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 Standardwert, entspricht vertical-align: unset oder vertical-align: initial

left

Entspricht float: left

Entspricht float: right

border

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

hspace

Die Anzahl der Pixel von Leerraum links und rechts des Bildes. Verwenden Sie stattdessen die margin-CSS-Eigenschaft.

longdesc

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

Hinweis: Dieses Attribut wird in der HTML-Spezifikation als veraltet betrachtet. Es hat eine ungewisse Zukunft; Autoren sollten eine WAI-ARIA-Alternative wie aria-describedby oder aria-details verwenden.

name

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

vspace

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

Gestaltung mit CSS

<img> ist ein ersetztes Element; es hat standardmäßig einen display-Wert von inline, aber seine Standardabmessungen werden durch die intrinsischen Werte des eingebetteten Bildes definiert, als wäre es inline-block. Sie können Eigenschaften wie border/border-radius, padding/margin, width, height, etc. auf ein Bild setzen.

<img> hat keine Grundlinie, sodass, wenn Bilder in einem Inline-Formatierungskontext mit vertical-align: baseline verwendet werden, der untere Rand des Bildes auf der Textgrundlinie platziert wird.

Sie können die object-position-Eigenschaft verwenden, um das Bild innerhalb des Elementrahmens zu positionieren, und die object-fit-Eigenschaft, um die Größenanpassung des Bildes innerhalb des Rahmens anzupassen (zum Beispiel, ob das Bild den Rahmen ausfüllen oder anpassen soll, auch wenn Abschneiden erforderlich ist).

Abhängig von seinem Typ kann ein Bild über eine intrinsische Breite und Höhe verfügen. Für einige Bildtypen sind jedoch keine intrinsischen Abmessungen erforderlich. SVG-Bilder haben beispielsweise keine intrinsischen Abmessungen, wenn ihr Wurzel- <svg>-Element keine width oder height darauf gesetzt hat.

Barrierefreiheit

Bedeutungsvolle alternative Beschreibungen verfassen

Der Wert eines alt-Attributs sollte einen klaren und prägnanten Textersatz für den Inhalt des Bildes liefern. Es sollte nicht das Vorhandensein des Bildes selbst oder den Dateinamen des Bildes beschreiben. Wenn das alt-Attribut absichtlich weggelassen wurde, weil das Bild kein textuelles Äquivalent hat, ziehen Sie alternative Methoden in Betracht, um das zu präsentieren, was das Bild zu vermitteln 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 dem vorhergehenden Textinhalt zu lesen, um zu sehen, ob es dieselbe Bedeutung wie das Bild vermittelt. Zum Beispiel, wenn das Bild dem Satz "Auf meinen Reisen habe ich ein niedliches kleines Tier gesehen:" vorausging, könnte das Nicht tun-Beispiel von einem Bildschirmleser vorgelesen werden als "Auf meinen Reisen, ich habe ein kleines süßes Tier gesehen: Bild", was keinen Sinn ergibt. Das Tun-Beispiel könnte von einem Bildschirmleser vorgelesen werden als "Auf meinen Reisen, ich habe ein niedliches kleines Tier gesehen: Ein Pinguin am Strand.", was Sinn ergibt.

Für Bilder, die eine Aktion auslösen, z.B. Bilder, die in ein <a>- oder <button>-Element eingebettet sind, sollten Sie erwägen, die ausgelöste Aktion im Wert des alt-Attributs zu beschreiben. Zum Beispiel könnten Sie alt="nächste Seite" anstelle von alt="Pfeil rechts" schreiben. Sie könnten auch in Betracht ziehen, eine optionale weitere Beschreibung in ein title-Attribut hinzuzufügen; dies kann von Bildschirmlesern auf Anfrage des Benutzers vorgelesen werden.

Wenn ein alt-Attribut bei einem Bild nicht vorhanden ist, können einige Bildschirmleser stattdessen den Dateinamen des Bildes ankündigen. Dies kann zu einer verwirrenden Erfahrung führen, wenn der Dateiname nicht repräsentativ für den Inhalt des Bildes ist.

SVG als Bild identifizieren

Aufgrund eines VoiceOver-Bugs kündigt VoiceOver SVG-Bilder nicht korrekt als Bilder an. Fügen Sie role="img" zu allen <img>-Elementen mit SVG-Quelldateien hinzu, um sicherzustellen, dass unterstützende Technologien 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. Außerdem vermeiden Sie es, den Wert des alt-Attributs in einem title-Attribut zu duplizieren, das auf dem gleichen Bild deklariert ist. Dies könnte dazu führen, dass einige Bildschirmleser denselben Text zweimal ankündigen, was eine verwirrende Erfahrung schafft.

Das title-Attribut sollte auch nicht als ergänzende Bildunterschriften-Information verwendet werden, um die alt-Beschreibung eines Bildes zu begleiten. Wenn ein Bild eine Bildunterschrift benötigt, verwenden Sie die figure- und figcaption-Elemente.

Der Wert des title-Attributs wird dem Benutzer normalerweise als Tooltip angezeigt, der kurz nach dem Stoppen des Cursors über das Bild erscheint. Obwohl dies zusätzliche Informationen für den Benutzer bereitstellen kann, sollten Sie nicht davon ausgehen, dass der Benutzer es jemals sehen wird: Der Benutzer hat möglicherweise nur Zugriff auf Tastatur oder Touchscreen. Wenn Sie Informationen haben, die besonders wichtig oder wertvoll für den Benutzer sind, präsentieren Sie diese inline unter Verwendung einer der oben genannten Methoden anstelle der Verwendung von title.

Beispiele

Alternativtext

Das folgende Beispiel bettet ein Bild auf der Seite ein und enthält alternativ Text für Barrierefreiheit.

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

Dieses Beispiel baut auf dem vorherigen auf und zeigt, wie man das Bild in einen Link verwandelt. Dazu 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://www.supremezsy.dpdns.org">
  <img
    src="/shared-assets/images/examples/favicon144.png"
    alt="Visit the MDN site" />
</a>

Verwendung des srcset-Attributs

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

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

Verwendung der srcset- und sizes-Attribute

Das src-Attribut wird in User Agents, die srcset unterstützen, ignoriert, wenn w-Beschreiber enthalten sind. Wenn die Medienbedingung (width <= 600px) übereinstimmt, wird das 200 Pixel breite Bild geladen (es ist dasjenige, das am besten mit 200px übereinstimmt), 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="(width <= 600px) 200px, 50vw" />

Hinweis: Um das Größenanpassungsverhalten in Aktion zu sehen, das Beispiel auf einer separaten Seite ansehen, damit Sie den Inhaltsbereich tatsächlich in der Größe anpassen können.

Sicherheits- und Datenschutzbedenken

Obwohl <img>-Elemente harmlose Verwendungen haben, können sie unerwünschte Konsequenzen für die Sicherheit und Privatsphäre des Benutzers haben. Weitere Informationen und Abhilfen finden Sie unter Referer-Header: Sicherheits- und Datenschutzbedenken.

Technische Zusammenfassung

Inhaltskategorien Fließender Inhalt, Phrasierungsinhalt, Eingebetteter Inhalt, Greifbarer Inhalt. Wenn das Element ein usemap-Attribut hat, ist es auch Teil der interaktiven Inhaltskategorie.
Zulässiger Inhalt Keiner; es ist ein leeres Element.
Tag-Auslassung Muss ein Start-Tag haben und darf keinen End-Tag haben.
Zulässige Eltern Jedes Element, das eingebetteten Inhalt akzeptiert.
Implizierte ARIA-Rolle
  • mit nicht leerem alt-Attribut oder keinem alt-Attribut: img
  • mit leerem alt-Attribut: presentation
Zulässige ARIA-Rollen
DOM-Schnittstelle [`HTMLImageElement`](/de/docs/Web/API/HTMLImageElement)

Spezifikationen

Spezifikation
HTML
# the-img-element

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.
Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden