HTML Bilder
Bilder können das Design und das Erscheinungsbild einer Webseite verbessern.
HTML Bildsyntax
Das HTML-Tag ><img> wird zum Einbetten eines Bildes in eine Webseite verwendet.
Bilder werden technisch gesehen nicht in eine Webseite eingefügt; Bilder sind mit Webseiten verlinkt. Das Tag <img> erstellt einen Haltebereich für das referenzierte Bild.
Das ><img>-Tag ist leer, es enthält nur Attribute und hat kein schließendes Tag.
Das ><img>-Tag verfügt über zwei erforderliche Attribute:
- src – Gibt den Pfad zum Bild an
- alt – Gibt einen alternativen Text für das Bild an
Syntax
<img src="url" alt="alternatetext">
Das src-Attribut
Das erforderliche Attribut src gibt den Pfad (URL) zum Bild an.
Hinweis: Wenn eine Webseite geladen wird, ist es in diesem Moment der Browser, der das Bild von einem Webserver abruft und es in die Seite einfügt. Stellen Sie daher sicher, dass das Bild im Verhältnis zur Webseite tatsächlich an der gleichen Stelle bleibt; andernfalls erhalten Ihre Besucher ein Symbol für einen defekten Link. Das Symbol für den defekten Link und der alt-Text werden angezeigt, wenn der Browser das Bild nicht finden kann.
Das alt-Attribut
Das erforderliche Attribut alt stellt einen alternativen Text für ein Bild bereit, wenn der Benutzer es aus irgendeinem Grund nicht sehen kann (aufgrund einer langsamen Verbindung, eines Fehlers im src-Attribut), oder wenn der Benutzer einen Bildschirmleser verwendet).
Der Wert des Attributs alt sollte das Bild beschreiben:
Wenn ein Browser ein Bild nicht finden kann, zeigt er den Wert des Attributs alt an:
Tipp: Ein Screenreader ist ein Softwareprogramm, das den HTML-Code liest und es dem Benutzer ermöglicht, den Inhalt anzuhören. Screenreader sind nützlich für Menschen mit Seh- oder Lernbehinderungen.
Bildgröße – Breite und Höhe
Sie können das Attribut style verwenden, um die Breite und Höhe eines Bildes anzugeben.
Beispiel
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
Try it Yourself »
Alternativ können Sie die Attribute width und height verwenden:
Die Attribute width und height definieren immer die Breite und Höhe des Bildes in Pixeln.
Hinweis: Geben Sie immer die Breite und Höhe eines Bildes an. Wenn Breite und Höhe nicht angegeben sind, flackert die Webseite möglicherweise, während das Bild geladen wird.
Breite und Höhe oder Stil?
Die Attribute width, height und style sind alle in HTML gültig.
Wir empfehlen jedoch die Verwendung des Attributs style. Es verhindert, dass Stylesheets die Größe von Bildern ändern:
Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
Try it Yourself »
Bilder in einem anderen Ordner
Wenn Sie Ihre Bilder in einem Unterordner haben, müssen Sie den Ordnernamen in das Attribut src einschließen:
Beispiel
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Try it Yourself »
Bilder auf einem anderen Server/einer anderen Website
Einige Websites verweisen auf ein Bild auf einem anderen Server.
Um auf ein Bild auf einem anderen Server zu verweisen, müssen Sie im Attribut src eine absolute (vollständige) URL angeben:
Beispiel
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
Try it Yourself »
Hinweise zu externen Bildern: Externe Bilder unterliegen möglicherweise dem Urheberrecht. Wenn Sie keine Erlaubnis zur Nutzung erhalten, verstoßen Sie möglicherweise gegen das Urheberrecht. Darüber hinaus können Sie externe Bilder nicht steuern; es kann plötzlich entfernt oder geändert werden.
Animierte Bilder
HTML ermöglicht animierte GIFs:
Beispiel
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
Try it Yourself »
Bild als Link
Um ein Bild als Link zu verwenden, fügen Sie das <img>-Tag innerhalb des ein Etikett:
Beispiel
<a href="index.html">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
Try it Yourself »
Bild schwebend
Verwenden Sie die CSS-Eigenschaft float, um das Bild rechts oder links von einem Text schweben zu lassen:
Beispiel
<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>
<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>
Try it Yourself »
Tipp: Um mehr über CSS Float zu erfahren, lesen Sie unser CSS Float-Tutorial.
Gängige Bildformate
Hier sind die gängigsten Bilddateitypen aufgeführt, die in allen Browsern unterstützt werden (Chrome, Edge, Firefox, Safari, Opera):
| Abkürzung | Dateiformat | Dateierweiterung |
|---|---|---|
| APNG | Animated Portable Network Graphics | .apng |
| GIF | Graphics Interchange Format | .gif |
| ICO | Microsoft Icon | .ico, .cur |
| JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Portable Network Graphics | .png |
| SVG | Scalable Vector Graphics | .svg |
Kapitelzusammenfassung
- Verwenden Sie das HTML-Element
<img>, um ein Bild zu definieren - Verwenden Sie das HTML-Attribut
src, um die URL des Bildes zu definieren - Verwenden Sie das HTML-Attribut
alt, um einen alternativen Text für ein Bild zu definieren, wenn es nicht angezeigt werden kann - Verwenden Sie die HTML-Attribute
widthundheightoder die CSS-Attributewidthundheight-Eigenschaften, um die Größe des Bildes zu definieren - Verwenden Sie die CSS-Eigenschaft
float, um das Bild nach links oder rechts schweben zu lassen
Hinweis: Das Laden großer Bilder nimmt Zeit in Anspruch und kann Ihre Webseite verlangsamen. Verwenden Sie Bilder sorgfältig.
HTML Übungen
HTML Bild-Tags
| Tag | Beschreibung |
|---|---|
| <img> | Definiert ein Bild |
| <map> | Definiert eine Imagemap |
| <area> | Definiert einen anklickbaren Bereich innerhalb einer Imagemap |
| <picture> | Definiert einen Container für mehrere Bildressourcen |
Eine vollständige Liste aller verfügbaren HTML-Tags finden Sie in unserer HTML-Tag-Referenz.
