HTML-Tag img • Bilder in HTML-Seiten

HTML image mit src

HTML img fügt ein Bild oder eine Grafik in HTML-Seiten ein. Nur zwei Attribute werden gebraucht: src, der Pfad zum Bild und alt, ein alternativer Text für Browser ohne Bilddarstellung.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Bilder in HTML-Seiten

Browser können nur wenige Bild- oder Grafikformate zuverlässig darstellen. JPEG, GIF oder PNG sind die sichersten Formate für die Anzeige von Bildern in Webseiten, WEBP und AVIF sind jüngeren Datums als die alten Formate und punkteb mit kleineren Dateigrößen. Das img-Tag bettet auch externe SVG-Dateien ein.

img fügt das Bild nicht wirklich in die Webseite ein, sondern Bilder bleiben aus technischer Sicht an ihrem Speicherort. Das img-Tag ist ein Platzhalter und bildet mit dem src-Attribut einen Link zum Bild – Bilder sind »embedded content« (eingebetteter Inhalt).

bildgroesse-920
<img src="img/mond.png" width="600" height="230" alt="Mond mit Wolken" loading="lazy">
        |                      |           |           |
        |                      |           |           +--- Alternativer Text
        |                      |           |
        |                      |           +--- Höhe in Pixel
        |                      |
        |                      +--- Breite in Pixel
        |
        +--- src-Attribut mit Pfad zum Speicherort des Bildes

Das img-Element bewirkt keinen Zeilenumbruch, sondern erzeugt ein Inlineelement. Das img-Tag kann in ein a-Element gesetzt werden, um einen klickbaren Link zu erzeugen. Die Browser legen bei einem Bild innerhalb eines a-Tags einen Rahmen um alle vier Seiten, um das Bild als Link zu kennzeichnen. Der CSS-Stil a img { border: none; } entfernt den Rahmen.

Das img-Element ist leer (void). Mit XHTML wurde ein Schrägstrich das Ende des Elements gesetzt werden: <img ... />. Der Schrägstrich an Ende des img-Tags kann wegfallen.

Mit figure und figcaption erhält das Bild einen Container, um es vom Text abzuheben, zu positionieren und eine Bildunterschrift oder Legende hinzuzufügen.

img Tag – Attribute

alt
ist ein Text, der anstelle des Bildes von Browsern gezeigt wird, die Bilder oder Grafiken nicht darstellen. Das alt-Attribut muss immer gesetzt werden und soll nicht einfach das Bild beschreiben, sondern eher seine Aussage.
loading
weist die Browser an, wie das Bild zu laden ist: mit lazy lädt der Browser das Bild erst, wenn es beim Scrollen der Seite in den Viewport kommt, mit dem Wert eager soll der Browser das Bild (z.B. im Seitekopf) bevorzugt laden und auto stellt dem Browser frei, wann er das Bild lädt.
src
ist die URL der Bilddatei und muss immer gesetzt werden. Die URL muss den Dateinamen enthalten und ist ein relativer oder absoluter Pfad zur Bilddatei.
srcset
Liste von alternativen Bildern für verschiedene Umgebungen (hochauflösende Monitore, Desktop-Monitore, mobile Geräte)
sizes
Bildgrößen für verschiedene Seitenlayouts. Bestimmt, welchen Raum das Bild innerhalb des Layouts einnimmt – z.B. 33% der Breite des Viewports bei einem Spaltenlayout.
crossorigin
regelt, ob und welche fremden Seiten per Skript (z.B. AJAX) direkt auf das Bild zugreifen können
usemap
Namen einer Image Map, die mit dem Element verknüpft werden soll. Eine Image Map oder Area Map unterteilt das Bild in klickbare Bereiche.
ismap
ist ein boolescher Wert und kennzeichnet, dass es sich bei dem Bild um eine klickbare serverseitige Image Map handelt.
width / height
Breite des Bildes, Höhe des Bildes
referrerpolicy
Bilder werden mit einem zusätzlichen HTTP-Request geladen und kann aus einer anderen Umgebung als das HTML-Dokument stammen. referrerpolicy gibt z.B. mit unsafe-url an, ob das Bild von einer ungesicherten Quelle stammt (nicht https sondern http).
decoding
Hinweise für die Decodierung des Bildes

Die alten Attribute align, border, hspace und vspace sind nicht mehr in HTML vertreten. Sie gelten schon seit langem als deprecated – veraltet.

Bildgröße

width und height sind weiterhin Attribute für das img-Tag und werden nicht ins CSS verbannt. Die Browser nutzen die Angabe width und height für einen Platzhalter und bauen die Seite schon auf, während das Bild noch geladen wird.

Die Angaben width und hight müssen auch nicht die physikalische Pixelauflösung des Bildes angeben. Das Bild kann kleiner oder größer sein und wird für responsive Webseiten mit CSS width:100% height:auto an den umfassenden Block angepasst.

Wenn das Bild größer oder kleiner als der verfügbare Platz ist, passt CSS object-fit das Bild an seine Box an.

Lazy Loading – Bilder im letzten Moment laden

Das Attribut loading ist noch jung, wird aber von allen modernen Browsern (Chrome, Firefox, EDGE, Safari, Opera) unterstützt. Mit loading="lazy" lädt der Browser das Bild erst, wenn der Benutzer weit genug gescrollt ist. Das beschleunigt nicht nur das Laden der Seite, sondern erspart Transfervolumen / Bandbreit, wenn der Benutzer nicht bis zum Seitenende scrollt.

<img loading="lazy" src="florenz.webp" width="1000" height="673" alt="Birken">

Die Browser führen das späte Laden aber nur durch, wenn width- und height-Attribut der Bilder im img-Tag notiert sind.

Das link-Tag mit rel="preload" as="image" wird für Bilder mit loading=lazy nicht mehr gebraucht.

Bilder vom Text umfließen lassen

Ohne CSS verhält sich ein Bild in einem Text immer wie ein einzelnes Zeichen im Text: Das Bild sitzt auf der Grundlinie der Zeile und dehnt die Textzeile nach oben aus.

<p> <img src="mond.png" style="float: left;" loading="lazy" alt="Mond" width="180" height="123"> 
   Ein Bild mit Mond neben einem Text</p> 
Bild in einem Textabsatz
Bild mit float in einem Textabsatz

Erst durch die CSS-Eigenschaft float: left; umfließt der Text das Bild.

Damit sich das Bild an den verfügbaren Platz im Browserfenster anpasst (das Bild responsive wird), setzt das CSS img { width: 100%; height: auto; } ein.

 
 <img src="mond.png" style="float: left;" loading="lazy" alt="Abnehmender Mond" width="180" height="123">

Das war ein beliebter Ansatz für Bilder in längeren Textabsätzen. Auf kleinen Monitoren wandert der Text automatisch unter das Bild.

HTML img src – Dateinamen und Pfade

Dateinamen ohne Umlaute und Leerzeichen, sonst wird das Bild u.U. nicht angezeigt. süße pistazien.jpg steckt sich der Webserver selber ein.

Die meisten Webserver nehmen Groß- und Kleinschreibung ernster als jeder Oberlehrer. Für Unix sind Italienische-Pralinen.jpg und italienische-pralinen.jpg zwei verschiedene Pralinenschachteln.

Bild mit Base64 einbetten

Wenn Bilder sehr klein sind, war es mit den älteren HTTP-Protokollen sinnvoll, sie im Base64-Format direkt in das HTML-Markup einzubetten. Dabei wächst die Bildgröße leicht an, aber Base64-Bilder sparten einen HTTP-Request beim Laden der Seite.

HTML img als Base64 einbetten
<img alt="HTML img als Base64 einbetten" 
	src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg … >

Base64 Online von Dominik Hanke um jpg, gif und png in Base64 umzuwandeln

Wenn Webseiten bereits vom HTTP2-Protokoll bedient werden, bringt diese Technik keinen Vorteil mehr, weil HTTP2 mehrere Ressourcen simultan auf einer Verbindung liefern kann. Dasselbe gilt für Image Sprites, wenn mehrere Bilder zu einem großen Bild zusammengefasst werden, um sie dann vom CSS zerstückelt in die Seite einsetzen zu lassen.

Zudem unterstützen heute die meisten der modernen Browser das native loading="lazy", das dem Ladevorgang erst anstößt, wenn das Bild beim Scrollen in den sichtbaren Bereich kommt.