CSS, HTML und Javascript mit {stil}

HTML picture • Alternative Bildgrößen

html picture und srcset Bild einer Kamera mit Picture-Schriftzug

HTML picture liefert zusammen mit dem srcset-Attribut und dem media-Attribut ein passendes Bild an den Browser des Benutzers. Als Konditionen kommen z.B. die Auflösung des Monitors, die Größe des Viewports oder die Ausrichtung des Geräts in Frage.

Gegenüber dem img-Tag, dass mit srcset und sizes unterschiedliche Auflösungen (z.B. 1x oder 2x- Retina-Display) und das Platzangebot des Layouts unter einen Hut bringt, bietet HTML picture dem Browser unterschiedliche Dateiformate und Seitenverhältnisse.

Das picture-Element funktioniert ähnlich wie ein HTML video- oder audio-Tag und braucht nur wenig zusätzliches HTML-Markup, sondern nutzt Media Queries. Damit kann picture unterschiedliche Bildgrößen oder Bilder mit anderen Seitenverhältnissen je nach Auflösung des Monitors einsetzen. Außerdem listet das source-Tag innerhalb des picture-Elements alternative Bildformate für Browser, die das bevorzugte Format des Bildes nicht unterstützen.

So kommen Handys und Tabletts im Hochformat (Portrait) einfach an einen aussagekräftigen Bildausschnitt bei Slideshows.

html-picture-960-quad
<picture>
   <source media="(min-width: 1440px)" srcset="pic-920.jpg 1x, pic-1840.jpg 2x">
   <source media="(min-width: 680px) and (orientation:portrait)" srcset="pic-960-quad.jpg">
   <source media="(min-width: 680px)" srcset="html-pic-920.jpg">
   <source media="(min-width: 300px) and (orientation:portrait)" srcset="pic-600-quad.jpg">
   <source media="(min-width: 300px)" srcset="pic-600.jpg">
   <img src="pic-960-quad.jpg" width="960" height="670" alt="HTML picture-Tag">
</picture>

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.

Natürlich bleiben die Breakpoints selbst für ein derart detailliertes Bilderpaket Kompromisse.

Picture Element und source-Tag

  • Im picture-Tag liegen source-Elemente, am Ende folgt ein img-Tag als Fallback für Browser, die keine Support für picture bieten.
  • Jedes source-Element hat ein srcset-Attribut, in dem ein oder mehrere Pfade zu Bildern notiert sind.
  • Das media-Attribut enthält Media Queries.
  • Anstelle oder zusätzlich zum media-Attribut kann ein sizes-Attribut das jeweilige srcset auswählen.

Der Browser nimmt das erste source-Element, dessen media-Attribut zutrifft – also werden bei Media Queries mit min-width die source-Optionen mit den größeren Auflösungen zuerst aufgeführt.

Bei Media Queries mit max-width beginnt die Source-Liste bei den kleineren Auflösungen und endet mit der höchsten Auflösung.

Anders als video- oder audio-Tags zeigt das picture Element selber nichts an, sondern der Browser wählt nur eine Alternative aus der source-Liste.

Alternative Ausschnitte / Dateiformate

Mit HTML picture und srcset kann nicht nur die Auflösung des Monitors durch eine Media Query festgestellt werden, sondern wir können den Browsern auch unterschiedliche Bildformate vorsetzen.

HTML picture tag für unterschiedliche Bildausschnitte

Statt die Bilder der Slideshow im Kopf der Seite auf kleinen Monitoren als schmalen Streifen zu setzen, ist ein Ausschnitt in einem eher quadratischen Format angemessener.

<picture>
   <source media="(min-width: 64em)" srcset="lemon-960.jpg 1x, lemon-1920.jpg 2x">
   <source media="(min-width: 42.5em) and (orientation:portrait)" srcset="lemon-quad-960.jpg">
   <source media="(min-width: 20em) and (orientation:landscape)" srcset="lemon-960.jpg">
   <source media="(min-width: 20em) and (orientation:portrait)" srcset="lemon-quad-600.jpg">
   <img src="lemon-quad-960.jpg" >
</picture>

Wer Format und eine angemessene Auflösung der Bilder sehr ernst nimmt, kann mit einem Picture-Pack aus sechs unterschiedlichen Auflösungen und Seitenverhältnissen eine große Spannbreite von Geräteklassen abdecken.

srcset-retina
<source 
    media="(min-width: 90em)" 
    srcset="slide-2880.jpg" />
srcset-desktop
<source 
    media="(min-width: 64em)" 
    srcset="slide-1440.jpg" />
srcset-tablet-portrait
<source 
    media="(min-width: 42em) and (orientation:portrait)"
    srcset="slide-960-quad.jpg" />
srcset-tablet-landscape
<source 
    media="(min-width: 42em)" 
    srcset="slide-960.jpg" />
srcset-smartphone-portrait
<source 
    media="(min-width: 20em) and (orientation:portrait)" 
    srcset="slide-600-quad.jpg" />
srcset-smartphone-landscape
<source 
    media="(min-width: 20em) and (orientation:landscape)" 
    srcset="slide-600.jpg" />

Derartige Picture-Packs und das HTML können vom Content Management System automatisch erzeugt werden, aber einen sinnvollen Ausschnitt wählt man besser im Bildbearbeitungsprogramm.

picture für unterschiedliche Bildformate

Eine weitere Anwendung für das picture-Tag ist SVG – Scalable Vector Graphic, das Internet Explorer erst ab Version 9 erkennt. Browser, die den Mime-Typ des Bildes im source-Tag nicht unterstützen, überspringen das source-Element und zeigen das Bild im img-Tag.

<picture>
    <source srcset="fruity-icons.svg" type="image/svg+xml">
    <img src="fruity-icons.png" alt="fruity-icons" />
</picture>
fruity-icons

Blaue Blätter? Das ist ein SVG. Grüngelbe Blätter? Ein PNG.

Ein relativ junges Dateiformat ist WebP, das Fotos, aber vor allem Bilder mit flachen Farben effizienter komprimieren kann als JPEG. WebP wird zurzeit nur von Google Chrome und Opera unterstützt. Mit dem picture-Tag können sich Browser, die Support für WebP bieten, das kleinere WebP-Bild aussuchen. Alle anderen Browser können sich an JPEG halten.

HTML picture-Tag mit JPEG und WebP
<picture>
   <source srcset="DSC07263.webp" type="image/webp">
   <img src="DSC07263.jpg" width="100%" alt="HTML picture-Tag mit JPEG und WebP">
</picture>

picture oder img sizes und srcset?

Wenn angemessene Bilder je nach Größe und Auflösung des Viewports sowie nach dem Platzangebot des Layouts geladen werden sollen, reicht im Grunde genommen das img-Tag mit der Kombination sizes und srcset.

HTML Picture Element PICTURE