Bilder – Fotos und Grafiken – 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).
src-Attribut mit Pfad
zum Speicherort
des Bildes Breite in Pixel Höhe in Pixel
│ │ │
▼ ▼ ▼
<img src="img/mond.png" width="600" height="230"
alt="Mond mit Wolken">
▲
│
└--- Alternativer Text
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.
- decoding="async"
- Hinweise für die Decodierung des Bildes – async weist den Browser an, das Bild »fast« sofort, aber asynchron aufzubauen. Der Browser könnte Bilder z.B. laden, wenn der obere Inhalt im Browserfenster (above the fold) geladen und sichtbar ist, und der Benutzer verweilt, bevor er die Seite scrollt.
- 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.
┌── Bild im selben Verzeichnis wie die HTML-Seite ▼ <img src="bild.webp" width="" height="" …> ┌── Bild im Ordner fotos unterhalt der Seite ▼ <img src="fotos/bild.webp" width="" height="" …> ┌── Bild im Ordner fotos oberhalb der Seite ▼ <img src="../fotos/bild.webp" width="" height="" …>Absolute Pfade beginnen mit "https://" und dem Domainnamen oder im sogen. Root-Verzeichnis (das oberste Verzeichnis) mit "/".
<img src="https://www.mediaevent.de/wp-content/uploads/2024/04/height-screen-1-200.webp" alt="" >
<img src="/wp-content/uploads/2024/04/height-screen-1-200.webp" alt="" >
- 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).
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 wichtige 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.
Wichtig ist allerdings das richtige Seitenverhältnis, das durch width und height bestimmt wird, damit das Bild auf der Seite nicht verzerrt wirkt.
Gute Programm-Editoren helfen bei der Bestimmung der physikalischen Größe des Bildes und setzen src, width und height ein. Das src-Attribut muss dann nur noch auf das korrekte Verzeichnis auf dem Webserver verweisen.
<figure>... </figure>
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>
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.
<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.
