HTML-Bilder
Um ein Bild in eine Webseite einzubetten, verwenden Sie das <img>-Tag.
Das <img>-Tag unterstützt eine Reihe von erforderlichen und optionalen Attributen, die zusätzliche Informationen darüber liefern.
Syntax
Das <img>-Tag ist leer, was bedeutet, dass das schließende Tag nicht erforderlich ist. Es enthält nur Attribute. Aber in XHTML muss das (<img>)-Tag geschlossen werden (<img/>).
Erforderliche Bildattribute - src und alt
Das Attribut src (Quelle) gibt den Namen oder den Speicherort des anzuzeigenden Bildes an. Der Wert des src-Attributs sollte den Namen der Bilddatei oder ihre URL enthalten.
URL-Beispiel
<img src="example.jpg" />
or
<img src="https://www.example.com/images/example.jpg" />Das alt-Attribut ist für das <img>-Tag ebenfalls erforderlich. Es wird verwendet, um Browsern einen alternativen Text bereitzustellen, falls das Bild nicht angezeigt werden kann (z. B. bei langsamer Verbindung, wenn ein Screenreader verwendet wird usw.). Hinweis: Das Verhalten des Tooltips beim Überfahren mit der Maus wird tatsächlich vom title-Attribut gesteuert, nicht von alt.
Die Syntax des <img>-Tags mit den erforderlichen Attributen src und alt sieht so aus:
HTML-Bildbeispiel
<img src="example.jpg" alt="HTML tutorial" />TIP
Verwenden Sie das alt-Attribut für alle Bilder, um eine klare, knappe Beschreibung des Bildinhalts bereitzustellen. Das verbessert die Barrierefreiheit und hilft Suchmaschinen, Ihre Seite zu verstehen.
Empfohlene Bildattribute - width und height
Die Attribute width und height werden in Verbindung mit dem <img>-Tag dringend empfohlen. Wenn diese Attribute verwendet werden, reserviert der Browser beim Laden des Inhalts den Platz für das Bild, und das beschleunigt das Rendern der Seite.
HTML-Bildbeispiel
<img src="https://www.example.com/images/example.jpg" alt="HTML tutorial" width="200" height="120" />Beispiel für das <img>-Tag mit den Attributen src, alt, width und height:
Die Überschrift des Bildes|Beispiel|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Place for your 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>Ergebnis
TIP
Anstatt die Breiten- und Höhenmaße zu verwenden, können Sie die Größe mit den CSS-Eigenschaften max-width oder max-height festlegen, um mehr Flexibilität zu erhalten. So können große Bilder Ihr Layout auf einem Gerät mit kleinem Bildschirm nicht zerstören.
Bildausrichtung
Standardmäßig ist ein <img>-Element inline, sodass Text darum herumfließt. Sie können das Layout jedoch mit der CSS-Float-Eigenschaft steuern. Diese Eigenschaft legt fest, wie das Bild floaten soll oder wie der Text darum herum umbrochen wird. (Hinweis: Obwohl float dafür früher häufig verwendet wurde, nutzen moderne Layouts typischerweise Flexbox oder Grid für eine bessere Steuerung.)
Um das Bild auf der linken Seite und den Text auf der rechten Seite anzuzeigen, fügen Sie style="float:left" zum <img>-Tag hinzu. Für eine bessere Wartbarkeit sollten Sie Inline-Styles in eine CSS-Klasse auslagern.
Beispiel für das <img>-Tag und die CSS-Float-Eigenschaft, um ein Bild nach links zu floaten:
Beispiel eines Bildes mit float|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Place for your heading </h1>
<img src="https://de.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185" style="float:left"/>
<p>Aleq's photo</p>
</body>
</html>Wenn Sie dem <img>-Tag das Attribut style="float:right" hinzufügen, wird der Text links und das Bild rechts positioniert.
Beispiel für das <img>-Tag und die CSS-Float-Eigenschaft, um ein Bild nach rechts zu floaten:
Beispiel mit einem float:right-Attribut|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Place for your heading </h1>
<img src="https://de.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185" style="float:right"/>
<p>Aleq's photo</p>
</body>
</html>Ergebnis
Wie man einem Bild einen Hyperlink hinzufügt
Da das <a>-Tag zum Einfügen von Hyperlinks verwendet wird, müssen Sie das Bild nur in das <a>-Tag setzen, um Ihr Bild anklickbar zu machen.
Beispiel für die <a>- und <img>-Tags zum Hinzufügen eines Hyperlinks zu einem Bild:
Beispiel eines Bildes mit einem Hyperlink
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a href="https://www.w3docs.com/" aria-label="w3docs homepage">
<img src="https://de.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="logo"/>
</a>
</body>
</html>Welches Bildformat für das Web wählen
Es gibt drei Haupttypen von Bildformaten, die von Browsern unterstützt werden:
- GIF (Graphics Interchange Format)
- JPG / JPEG (Joint Photographic Experts Group)
- PNG (Portable Network Graphics)
GIF hat 256 eindeutige Farben und eignet sich für einfache und schnell ladende Grafiken. Sie können GIF für kleine Zeichnungen, Diagramme, Schaubilder, Schaltflächen und andere einfache Grafiken verwenden, die das schnelle Laden Ihrer Seite nicht beeinträchtigen.
JPEG ist typischerweise ein 24-Bit-Format, das rotes, blaues und grünes Licht mischt, um Millionen von Farben darzustellen. Daher wird es hauptsächlich für Fotos verwendet. Dieses Format gibt Ihnen die Flexibilität zu wählen, wie stark Sie Ihr Bild komprimieren möchten – von 0 % (starke Komprimierung) bis 100 % (keine Komprimierung). Sie können dieses Format wählen, wenn Sie bereit sind, für eine kleinere Dateigröße etwas Qualität aufzugeben. Vermeiden Sie JPEG für Bilder mit Text, Formen oder großen Farbflächen, da beim Komprimieren der Datei die Linien unscharf werden und sich Farben verschieben können.
Das PNG-Format kombiniert die Vorteile von JPEG und GIF: Es unterstützt Millionen von Farben und ermöglicht verlustfreie Komprimierung. Sie können PNG für Webgrafiken verwenden, die Transparenz, farbintensive und komplexe Grafiken oder Fotos erfordern.
Moderne Bildformate
Heute werden für das Web mehrere moderne Bildformate verwendet, um kleinere, reichhaltigere und schneller ladende Bilder zu erhalten.
WebP, von Google entwickelt, bietet verlustfreie und verlustbehaftete Komprimierung für Bilder im Web. Sein Hauptziel ist es, das primäre Format für Fotos im Web zu werden und JPEG zu ersetzen. (WebP - Wikipedia)
Ein weiteres Format, das JPEG ersetzen soll, ist BPG (Better Portable Graphics), das ebenfalls mit einer hohen Kompressionsrate aufwartet (die Dateien sind bei gleicher Qualität kleiner als JPEG).
HEIC ist ein neues Bildformat, das Apple in iOS 11 anstelle von JPEG verwendet. Dieses Format nutzt moderne Komprimierungsmethoden, die es ermöglichen, eine höhere Bildqualität in kleineren Dateien zu erhalten.
Practice
Welche der folgenden Tags und Attribute können bei der Definition von Bildern in HTML verwendet werden?