CSS, HTML und Javascript mit {stil}

HTML-Tag img • Bild 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.

img srcset – Alternative Bildgrößen

Hoch auflösende Bilder mit ihren langen Ladezeiten sind ein Handycap für responsive Webseiten auf mobilen Geräte. Auf der einen Seite wollen wir eine hohe Qualität für große Monitore und Retina-Displays, auf der anderen Seite wollen wir Mobiltelefone und Tabletts nicht mit den großen Bildern erschlagen: Bandbreite bleibt kostbar.

Das srcset-Attribut des img-Tags erfasst individuelle Bilder für die unterschiedlichen Viewports der mobilen Geräte, für große Desktop-Monitore und Retina-Monitore.

srcset Beispiel
<img alt="medium" srcset="medium.jpg 1x, large.jpg 2x">

Hier stehen also zwei Bildgrößen zur Verfügung, die je nach Auflösung des Monitors geladen und angezeigt werden. Der Browser entdeckt die Auflösung / Pixeldichte des Monitors und entscheidet, welches Bild er einsetzt.

1x bzw. 2x steht für Device Pixel Ratio – das Verhältnis [Anzahl der Pixel in der Breite] zu [Breite in Zoll].

  • 1x steht für herkömmliche Monitore, die mit 72 bis 100 Pixeln pro Zoll auflösen,
  • 2x steht für hochauflösende Monitore, die mit 200 Pixeln und höher pro Zoll auflösen – sogen. Retina-Monitore.

Es gibt auch Displays, deren Pixeldichte zwischen 1x und 2x liegen. Also wäre auch ein device-pixel-ratio von 1.5x eine denkbare Media Query auf die Auflösung des Monitors.

DevicePixel per Inch (PPI)Bildschirmauflösung (Pixel pro Zoll)
iPhone 6 Plus (6s Plus)4011920 × 1080
iPad 4. Generation)
iPad Air 1./2. Generation)
iPad Pro (9,7″)
2642048 × 1536
iPad Pro (12,9″)2642732 × 2048
MacBook Pro – Retina Display (15")2202880 × 1800

Der Browser wird das 2x-Bild automatisch um den Faktor 2 verkleinert anzeigen, damit es denselben Raum ausfüllt wie das das Bild mit der 1x-Auflösung. Dieses Verhalten ähnelt der Angabe der DPI bei Bildern für den Druck. Der Zeitschriften- und Buchdruck arbeitet i.d.R. mit 300 dpi, während Bilder auf dem Monitor mit 72dpi angezeigt werden.

Alle modernen Browser außer IE bis einschließlich IE11 (diese Seite benutzt Picturefill-Polyfill für Browser ohne Support für srcset und picture-Element).

Allerdings: Die Angabe der Bildschirmauflösung als Kriterium führt dazu, dass nicht nur auf großen Retina-Monitoren wie dem MacBook Pro mit Retina Display, sondern auch auf kleinen Monitoren – z.B. Handy – die 2x-Auflösung angezeigt wird. Hier ist also eine weitere Differenzierung nötig.

Das Bild mit der zweifachen Auflösung soll nur geladen werden, wenn der Platz im Layout verfügbar ist.

Die Kondition für den Einsatz verschiedener Bildgrößen drei Parameter einbeziehen:

  1. Bildgröße relativ zum Viewport (z.B. 33.3vw )
  2. Breite des Viewports z.B. 640px oder 40em
  3. Auflösung des Monitors 1x oder 2x

Was jetzt noch fehlt ist eine Mitteilung an den Browser, wie groß das Bild im Layout dargestellt werden soll – dafür gibt es das Attribut sizes.

sizes = [media query] [length], [media query] [length], …

sizes = "(min-width: 42.5em) 50vw,100vw"

sizes legt den Raum fest, den das Bild innerhalb des Layouts einnimmt. Dann enthält srcset eine Liste der Bilder und ihrer jeweiligen Größe. Mit diesen Informationen wählt der Browser das kleinste Bild, das in das Layout passt und es ausfüllt.

Mit sizes und srcset bestimmt also nicht mehr die Größe des Viewports allein über die Wahl des Bildes.

srcset und sizes
                             1                          2              3
                             +                          +              +
                             |                          |              |
                             v                          v              v
<img sizes="(max-width:720px) 100vw, (max-width: 1260px) 70vw, calc(50vw - 100px)"
   srcset="picture-flowers-300.jpg 300w,  
          /xhtml/img/picture-flowers-640.jpg 640w, 
          /xhtml/img/picture-flowers-720.jpg 720w, 
          /xhtml/img/picture-flowers-960.jpg 960w, 
          /xhtml/img/picture-flowers-1120.jpg 1600w"
   src="/xhtml/img/picture-flowers-640.jpg" 
   alt="Aquarellmalerei Blumen mit Goldsplitter">
  1. (max-width:720px) 100vw – bis zu einer Breite des Viewports von 720px wird das Bild in voller Breite angezeigt
  2. (max-width:720px) 100vw – bei einer Breite des Viewports bis zu 1260px tritt ein Spaltenlayout in Kraft und das Bild liegt in einer Spalte von 70% der Breite des Viewports.
  3. calc(50vw - 100px) – bei noch größeren Viewports liegt das Bild in einer Spalte von 50% der Viewport-Breite (minus 100px Abstand zwischen den Spalten)

Natürlich müssen nicht gleich so viele Bildgrößen wie in diesem Beispiel angelegt werden. Hier haben wir nur eine Demo.

sizes und srcset für Spalten Layout (columns) sizes und srcset für Slideshows

Wenn anstelle eines Bildes mit gleichem Ausschnitt und gleichen Seitenverhältnissen Bilder mit unterschiedlichen Ausschnitten oder in unterschiedlichen Formaten gezeigt werden sollen – z.B. ein quadratischer Ausschnitt für Handys im Hochformat –, dann ist ein HTML picture-Element u.U. die bessere Wahl als img mit sizes und srcset.

Bilder in Textabsätzen

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> 
HTML img neben dem Text Ein Bild mit Mond neben einem Text

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

 
 <img src="mond.png" style="float: left;" alt="" width="180" height="123">
CSS für HTML img neben dem Text Ein Bild mit Mond in einem Text

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

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