HTML <img>-Tag
Das <img>-Tag wird verwendet, um ein Bild in ein HTML-Dokument einzufügen. Das Bild selbst wird nicht direkt in das Dokument eingefügt; der Browser fügt ein HTML-Bild aus der im <img>-Tag angegebenen Quelle ein.
Für ein <img>-Element sind zwei Attribute erforderlich: src, das verwendet wird, um die Bildquelle anzuzeigen, und alt, das einen alternativen Text für das Bild definiert.
Um HTML-Bilder anklickbar zu machen, sollten Sie das <img>-Tag innerhalb des <a>-Tags platzieren, das zum Einfügen eines HTML-Bildlinks verwendet wird.
Syntax
Das <img>-Tag ist leer, was bedeutet, dass das schließende Tag nicht erforderlich ist. Es enthält nur Attribute. In XHTML muss das <img>-Tag jedoch selbst geschlossen werden (<img />).
Beispiel für das HTML-<img>-Tag:
Ein Beispiel dafür, wie man ein HTML-<img>-Tag verwendet
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Heading </h1>
<p>This is Aleq's photo</p>
<img src="https://de.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
</body>
</html>Wir können CSS verwenden, um das anfängliche Erscheinungsbild eines Bildes zu ändern.
Beispiel für das mit CSS gestaltete <img>-Tag:
Wie stylt man ein HTML-<img>-Tag mit den CSS-Eigenschaften vertical-align und padding?
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
border-radius: 50%;
border: 4px dashed #077cb9;
width: 300px;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<div>
<img src="https://de.w3docs.com/uploads/media/default/0001/03/e91b0d7a957cadd0c3282d34e423ff0f97799a1d.jpeg" alt="Ararat mountain" width="256" height="256" />
</div>
</body>
</html>Src- und Alt-Attribute
Das src-Attribut (source) zeigt die Bildquelle an. Es ist erforderlich, da es den Pfad zum Bild definiert. Der Wert des src-Attributs kann entweder der Dateiname oder seine URL sein.
Das alt-Attribut definiert einen alternativen Namen für das Bild. Es ist ebenfalls für das <img>-Tag erforderlich. Sein Wert ist ein beschreibender Text, der im Browser angezeigt wird, bevor das Bild geladen wird, oder wenn das Bild nicht geladen werden kann.
TIP
Wir empfehlen, Schlüsselwörter im Alternativtext zu verwenden. Das verbessert das Ranking der Website in Suchmaschinen.
Verwendung von "data:image/[type];base64,[base64-string]" für das src-Attribut
Das Format data:image/[type];base64,[base64-string] kann als Wert des src-Attributs eines img-Tags verwendet werden, um ein Bild direkt aus dem HTML-Code anzuzeigen, ohne es aus einer externen Datei laden zu müssen.
Hier ist ein Beispiel dafür, wie dieses Format verwendet wird, um ein Bild in einem img-Tag anzuzeigen:
Verwendung von "data:image/[type];base64,[base64-string]" für das src-Attribut
<img src="data:image/png;base64,iVBORw0KG..." alt="Base64 encoded image">In diesem Beispiel gibt image/png den MIME-Typ des Bildes an, und iVBORw0KG... steht für die base64-kodierten Bilddaten.
Beachten Sie, dass die Verwendung von base64-kodierten Bildern die Größe der HTML-Datei erhöhen und das Laden der Seite verlangsamen kann. Im Allgemeinen wird empfohlen, dieses Format für kleine Bilder oder Icons zu verwenden und für größere Bilder externe Dateien zu nutzen.
Beispiel für das HTML-<img>-Tag mit den Attributen src und alt:
Ein Beispiel für das img-Tag mit den Attributen src und alt
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<img src="https://de.w3docs.com/uploads/media/default/0001/03/01cc5ccf0ce755075e468cc651f27c354e1b032e.jpeg" alt="Paris" width="256" height="256" />
</body>
</html>Das loading-Attribut
Das loading-Attribut ermöglicht es, das Laden von Bildern und iframes zu verzögern, bis sie kurz vor der Anzeige stehen. Es ist inzwischen ein standardmäßiges HTML-Feature, das von allen modernen Browsern unterstützt wird.
Zu den unterstützten Werten für das loading-Attribut gehören:
lazy, das das Laden verzögert, bis das Bild oder iframe einen bestimmten Abstand zum Viewport erreicht.eager, das die Ressource sofort lädt.
Sie können den Wert lazy verwenden, um das browsernative Lazy Loading zu nutzen:
HTML-<img>-Tag
<img src="defer.png" loading="lazy" alt="Beautiful" width="500" height="400">Lazy Loading ist eine Reihe von Techniken in der Web- und Anwendungsentwicklung, die das Laden von Ressourcen auf einer Seite auf einen späteren Zeitpunkt verschiebt, wenn diese Ressourcen benötigt werden, anstatt sie sofort zu laden. Diese Techniken helfen, die Leistung und die Nutzung der Geräte-Ressourcen zu verbessern und damit verbundene Kosten zu senken.
Unterstützte Bildformate
Bilddateiformate sind standardisierte Mittel zum Organisieren und Speichern digitaler Bilder. Ein Bilddateiformat kann Daten in einem unkomprimierten Format, einem komprimierten Format (das verlustfrei oder verlustbehaftet sein kann) oder einem Vektor-Format speichern. (Wikipedia).
Jeder User Agent unterstützt unterschiedliche Bildformate. Hier ist die Liste gängiger Bildformate:
| Abbreviation | File format | MIME type | File extension(s) | Browser compatibility |
|---|---|---|---|---|
| APNG | Animated Portable Network Graphics | image/apng | .apng | Chrome, Edge, Firefox, Opera, Safari |
| BMP | Bitmap file | image/bmp | .bmp | Chrome, Edge, Firefox, Opera, Safari |
| GIF | Graphics Interchange Format | image/gif | .gif | Chrome, Edge, Firefox, Opera, Safari |
| ICO | Microsoft Icon | image/x-icon | .ico, .cur | Chrome, Edge, Firefox, Opera, Safari |
| JPEG | Joint Photographic Expert Group image | image/jpeg | .jpg, .jpeg, .jfif, .pjpeg, .pjp | Chrome, Edge, Firefox, Opera, Safari |
| PNG | Portable Network Graphics | image/png | .png | Chrome, Edge, Firefox, Opera, Safari |
| SVG | Scalable Vector Graphics | image/svg+xml | .svg | Chrome, Edge, Firefox, Opera, Safari |
| TIFF | Tagged Image File Format | image/tiff | .tif, .tiff | None built-in; add-ons required |
| WebP | Web Picture format | image/webp | .webp | Chrome, Edge, Firefox, Opera |
Bildladefehler
Beim Laden eines Bildes können einige Fehler auftreten. Wenn ein onerror-Ereignishandler für das error-Ereignis gesetzt wurde, wird dieser aufgerufen. Hier finden Sie die Situationen, in denen dies passieren kann:
- Das src-Attribut ist leer ("") oder null.
- Die src-URL und die URL der Seite, auf der sich der Benutzer gerade befindet, sind identisch.
- Eine Beschädigung des Bildes verhindert, dass es geladen werden kann.
- Die Metadaten des Bildes sind so beschädigt, dass seine Abmessungen nicht ermittelt werden können, und in den Attributen des
<img>-Tags sind keine Abmessungen angegeben. - Das Format wird vom User Agent nicht unterstützt.
Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| align | left right top bottom middle | Definiert die Ausrichtung des Bildes in Bezug auf umliegende Elemente. In HTML5 nicht unterstützt. |
| alt | text | Definiert den alternativen Text für das Bild. |
| border | pixels | Definiert die Breite des Rahmens um das Bild. In HTML5 nicht unterstützt. |
| crossorigin | anonymous | use-credentials | Definiert, ob CORS beim Laden des Bildes verwendet wird. Über CORS geladene Bilder können im <canvas>-Element verwendet werden, ohne dessen Funktionalität einzuschränken. |
| height | pixels | Definiert die Höhe des Bildes. |
| hspace | pixels | Definiert Abstände links und rechts vom Bild. In HTML5 nicht unterstützt. |
| ismap | ismap | Gibt an, dass der Inhalt des Tags eine serverseitige Image-Map ist. |
| longdesc | URL | Gibt die URL-Adresse mit einer ausführlichen Beschreibung des Bildes an (für eine kurze Beschreibung des Bildes verwenden Sie das alt-Attribut). In HTML5 nicht unterstützt. |
| src | URL | Definiert die Quelle des Bildes. |
| usemap | #mapname | Gibt einen Link zum <map>-Element an, das die Koordinaten für die Client-Map des Bildes enthält. |
| vspace | pixels | Definiert Abstände oberhalb und unterhalb des Bildes. In HTML5 nicht unterstützt. |
| width | pixels | Definiert die Breite des Bildes. |
Das <img>-Tag unterstützt die Global Attributes und die Event Attributes.
Veraltete Attribute
| Attribut | Werte | Beschreibung | Alternative |
|---|---|---|---|
| align | left right top bottom middle | Definiert die Ausrichtung des Bildes in Bezug auf umliegende Elemente. Zentriert das HTML-Bild in Bezug auf umliegende Elemente. | Die CSS-Eigenschaften float und/oder vertical-align. |
| border | pixels | Definiert die Breite des Rahmens um das Bild. | Die border CSS property. |
| hspace | Stattdessen die margin CSS property. | ||
| name | Gibt einen Namen für das Element an | Das id-Attribut. | |
| vspace | pixels | Definiert Abstände oberhalb und unterhalb des Bildes. | Verwenden Sie stattdessen die margin CSS property. |
Practice
Welche Attribute können mit dem HTML <img>-Tag verwendet werden?