![HTML-Tag img: So fügen Sie Bilder auf Ihrer Website ein (1) HTML-Tag img: So fügen Sie Bilder auf Ihrer Website ein (1)](https://i0.wp.com/www.ionos.de/digitalguide/fileadmin/DigitalGuide/Teaser/html-img.jpg)
Das img-Tag erlaubt es Ihnen, ganz einfach Bilder auf Ihrer Website einzubauen. Dabei werden zahlreiche Formate unterstützt. Durch eine Vielzahl unterschiedlicher Attribute fügt sich das img-Tag in HTML noch besser ein.
Inhaltsverzeichnis
- Wozu wird der img-Tag benötigt?
- Wie sieht die Syntax des HTML-Tags img aus?
- Welche Attribute können für den img-Tag in HTML verwendet werden?
SSL-Zertifikate von IONOS!
Wahren Sie dank SSL-Zertifikaten die Geheimhaltung Ihres Online-Verkehrs und stärken Sie das Vertrauen Ihrer Kunden in die Sicherheit Ihrer Webseite.
Geprüfte Sicherheit
Bis zu 256-bit Verschlüsselung
Einfache Aktivierung
Wozu wird der img-Tag benötigt?
Das HTML-Tag img fügt Bilder und Grafiken in Websites ein. Dabei fungiert das img-Tag quasi als Platzhalter. Wird eine Website aufgerufen, verlinkt das hinterlegte src-Attribut auf den eigentlichen Speicherort der Grafik. Diese wird dann in die Website eingebettet. Neben dem src-Attribut benötigt das img-Tag ein alt-Attribut, das einen alternativen Text hinterlegt für den Fall, dass das Bild nicht angezeigt werden kann. Unterstützt werden mit dem img-Tag bei HTML u.a. JPEG, GIF und PNG.
Wie sieht die Syntax des HTML-Tags img aus?
Die Syntax eines img-Tags ist sehr übersichtlich und benötigt nur wenige Komponenten. Die einfachste Variante ist diese:
<img src="rotesauto.png" alt="Roter Sportwagen an einer Ampel">
Es ist allerdings sicherer, wenn Sie bei der Verwendung eines img-Tags immer auch zumindest die Höhe und Breite des Bildes auf der Website definieren. So können Sie sicherstellen, dass die Grafik richtig angezeigt wird. Diese Einstellungen nehmen Sie über die HTML-Attribute width und height vor. Der passende Code sieht beispielsweise so aus:
<img src="rotesauto.png" width="500" height="200" alt="Roter Kleinwagen an einer Ampel">
Auch das Attribut loading ist für das img-Tag in HTML empfehlenswert. Dadurch wird die entsprechende Grafik erst geladen, wenn Nutzerinnen oder Nutzer bis zu der entsprechenden Stelle scrollen. Dafür stellen Sie den Wert des loading-Attributs auf lazy. So sieht das im Code aus:
<img src="rotesauto.png" width="500" height="200" alt="Roter Kleinwagen an einer Ampel" loading="lazy">
Welche Attribute können für den img-Tag in HTML verwendet werden?
Neben den genannten Attributen width, height und loading gibt es zahlreiche weitere Attribute, die durch das img-Tag in HTML unterstützt werden. Dazu gehören sämtliche globalen, Event- und weitere spezifische Attribute. Hier ein Auszug der Attribute, die mit dem img-Tag verwendet werden können:
Attribut | Wert | Beschreibung |
alt | "Text" | Obligatorisch; gibt einen Alternativtext für das Bild an. |
crossorigin | anonymus, use-credentials | Legt fest, welche fremden Websites durch ein Skript auf das entsprechende Bild zugreifen können. |
decoding | auto, sync, async | Definiert, wie und ob ein Bild decodiert werden darf. |
height | Pixel oder Prozent | Legt fest, wie hoch das Bild auf der Website sein soll. |
ismap | true, false | Regelt den Zugriff des Bildes auf eine serverseitige Image-Map. |
loading | auto, eager, lazy | Bestimmt, wann ein Bild geladen werden soll. |
referrerpolicy | no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, unsafe-url | Legt fest, ob das Bild auch aus einer unsicheren Quelle stammen darf. |
sizes | sizes | Definiert Bildgrößen für unterschiedliche Seitenlayouts. |
src | URL | Obligatorisch; gibt die URI-Adresse des Bildes an. |
srcset | URL-Listen | Hinterlegt eine Liste von Bildern für verschiedene Einsatzzwecke, z.B. unterschiedliche Geräte und Größen. |
usemap | #mapname | Verknüpft das Element mit einer bestimmten Image-Map. |
width | Pixel oder Prozent | Gibt die Breite des Bildes an. |
Während die oben genannten Attribute alle nach wie vor Verwendung in einem img-Tag finden können, gibt es auch einige Attribute, die seit HTML5 und HTML 5.1 als veraltet gelten. Dazu gehören align, border, hspace, longdesk und vspace.
Tipp
Auf dem Weg zur individuellen und professionellen Website ist der Homepage-Baukasten von IONOS genau das richtige Werkzeug. Dieser erlaubt es Ihnen, eine eigene Onlinepräsenz ganz nach Ihren Vorstellungen zu erstellen – auch ohne großes Vorwissen. Möchten Sie diese Aufgabe doch lieber den Profis überlassen, stehen Ihnen unsere erfahrenen Expertinnen und Experten sehr gerne zur Verfügung.
- Web-Entwicklung
- HTML
- Tutorials
Ähnliche Artikel
div in HTML: Alles Wichtige zur Verwendung des div-Containers
Da das div-Tag keine eigenen semantischen Merkmale hat, wird seit der Einführung von HTML5 sein Einsatz nur dann empfohlen, wenn keine passenderen Elemente verfügbar sind. Hier erfahren Sie alles über den div-Container, lernen anhand praktischer Beispiele, wie er eingesetzt wird, und warum div in HTML kaum noch eine Rolle spielt.
div in HTML: Alles Wichtige zur Verwendung des div-Containers
HTML-Tag style: So gestalten Sie das Aussehen von Elementen
Das HTML-Tag style ist die beste Möglichkeit, das Aussehen einzelner Elemente auf einer Website zu gestalten und die Seite so optimal aufzubauen. Hier erfahren Sie, wofür das style-Tag in HTML genau verwendet wird, wie es aufgebaut ist und welche HTML-Attribute mit ihm kompatibel sind. Damit können Sie das Tag einfach in Ihren Code einbetten.
HTML-Tag style: So gestalten Sie das Aussehen von Elementen
_target: Linkziele definieren in HTML
Möchten Sie Verlinkungen auf Ihrer Website einbauen, können Sie mit dem HTML-Attribut target festlegen, wo der Link geöffnet werden soll. Dabei entscheiden Sie, ob die Nutzer und Nutzerinnen auf Ihrer Onlinepräsenz bleiben oder zur nächsten Website weitergehen sollen. Hier erfahren Sie, wie Sie _target verwenden und was Sie dabei beachten sollten.
_target: Linkziele definieren in HTML