CSS, HTML und Javascript mit {stil}

HTML-Tag img mit src und srcset • Bilder in HTML-Seiten

HTML img mit src und srcset

HTML img fügt ein Bild oder 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.

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. AB HTML5 kann SVG mit dem img-Tag eingebettet werden.

img fügt das Bild nicht in die Webseite ein, sondern ist ein Platzhalter und bildet einen Link zum Bild – Bilder sind »embedded content« (eingebetteter Inhalt).

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

Das img-Tag bewirkt keinen Zeilenumbruch, sondern erzeugt ein Inlineelement. Das img-Tag kann in ein a-Tag 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-Tag ist leer. Mit XHTML wurde ein Schrägstrich das Ende des Elements gesetzt werden: <img ... />. In HTML5 kann der Schrägstrich beim img-Tag wegfallen.

Mit HTML5 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

src
ist die URL der Bilddatei und muss immer gesetzt werden. Die URL muss den Dateinamen enthalten und kann einen relativen oder absoluten Pfad angeben.
alt
ist ein Text, der anstelle des Bildes von Browsern gezeigt wird, die Bilder oder Grafiken nicht darstellen können. Das alt-Attribut muss immer gesetzt werden.
crossorigin html5
regelt, ob und welche fremden Seiten per Skript (z.B. AJAX) direkt auf das Bild zugreifen können
height
Höhe des Bildes
ismap
ist ein boolescher Wert und kennzeichnet, dass es sich bei dem Bild um eine klickbare serverseitige Image Map handelt.
longdesc
ist die URL einer Quelle, die eine ausführliche Beschreibung des Bildes enthält. Das ist nützlich für serverseitige Image Maps und nichtgrafische Browser.
sizes html5
bestimmt, welchen Raum das Bild innerhalb des Layouts einnimmt – z.B. 33% der Breite des Viewports bei einem Spaltenlayout.
srcset html5
Liste von alternativen Versionen / Größen des Bildes für unterschiedliche Monitore.
usemap
Namen einer Image Map, die mit dem Element verknüpft werden soll. Es handelt sich hierbei um eine klickbare clientseitige Image Map.
width
Breite des Bildes

Die alten Attribute align, border, hspace und vspace sind nicht mehr in HTML5 vertreten.

Bildgröße

width und height sind auch in HTML5 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.

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;" alt="" 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;" alt="" 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.

Bild mit Base64 einbetten

Wenn die Bilder klein sind, kann es sinnvoll sein, sie im Base64-Format direkt in das HTML-Markup einzubetten. Dabei wächst die Bildgröße leicht an, aber Base64-Bilder sparen 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

Ein Bild in einem Text verhält sich wie ein übergroßes Zeichen und dehnt die Textzeile nach oben aus. Unter dem linken Bildrand schnappt der Text wieder auf der Grundlinie ein. Grundlinie CSS float: left oder float: right zwingt das Bild an den linken oder rechten Rand und der Text fließt um das Bild. Am unteren Rand des Bildes wird der Textfluß wieder aufgenommen der Textfluß am Anfang der Zeile wieder aufgenommen. Grundlinie