background-image für Retina-Monitore
Für Bilder, die mit einem img-Tag eingesetzt werden, hält HTML die Attribute sources und sizes für img- und picture-Tags parat. Der Browser entscheidet, welches Hintergrund für das jeweilige Gerät angemessen ist.
Media Queries setzen zwar unterschiedliche Auflösungen und auch Seitenverhältnisse ein, aber unterschiedlich hohe Pixeldichten für Retina-Monitore und Standard-Monitore gab es lange Zeit nicht.
image-set mit Präfix
Mitsamt dem Präfix erreicht das CSS schon epische Länge:
.retina-bg {
background-image: url(floral-normal-720-1x.jpg);
background-image: image-set(url(floral-normal-720-1x.jpg) 1x,
url(floral-retina-1200-2x.jpg) 2x);
width:96%;
height:300px;
background-repeat: no-repeat;
background-size: cover;
}
Das erste Vorkommen von background-image ist als Fallback gedacht. Wenn der Browser background-image: image-set unterstützt, wird er das Bild mit dem 2x-Multiplier für Retina-Monitore verwenden. So, und jetzt alles noch in die jeweiligen Media-Queries packen:
@media (min-width: 300px) and (max-width: 449px) and (orientation: portrait) {…}
@media (min-width: 450px) and (orientation: landscape) {…}
@media (min-width: 500px) {…}
@media (min-width: 1000px) {…}
@media (min-width: 200px) {…}
Für die kleinen sich wiederholenden Hintergrundbilder (Tapeten) ist image-set eher Overkill. Anders sieht es z.B. für Cover-Bilder aus, die von Editoren wie Gutenberg oder Visual Composer erzeugt werden.
Volle Ladung für Retina-Monitore
Ein iPad Air hat eine Auflösung von 2224 x 1668 Pixeln bei 264 ppi (Pixel pro Inch, Pixeldichte), das Samsung Galaxy Tab S5e von 2560 x 1600 Pixel. Ein iPhone 6s Plus aus dem Jahr 2015 hat bereits 1920 × 1080 Pixel (entspricht 401 ppi).
Auch das iBook hat ein Retina-Display: 2880 x 1800 Pixel bei 220 ppi. Fotos auf Retina-Monitore wirken plastischer und kontrastreicher, wenn sie nicht mit der offiziellen Auflösung des ViewPorts, sondern in einer höheren Auflösung angezeigt werden und Benutzer sehen Details der Fotos beim Zoomen noch scharf.
Wenn wir davon ausgehen, dass die Seiten häufiger unterwegs als aus dem WLAN aufgerufen werden, knabbern die Retina-Auflösungen an der Bandbreite der mobilen Geräte.
| floral-normal-1600.jpg | 118KB |
| floral-retina-1200.jpg | 75KB |
| floral-normal-720.jpg | 50KB |
| floral-normal-360.jpg | 18KB |
| floral-normal-1300.jpg | 85KB |
| floral-retina-2000.jpg | 169KB |
image-set mit type-Angabe
Da bleibt noch die Angabe eines Dateityps, z.B. um Hintergrundbilder in verschiedenen Bildformaten zu laden. Das wird nur von Firefox unterstützt und wird sind auch in den nächsten Versionen der übrigen Browser nicht so schnell ändern.
background-image: image-set(
url("items-1600x600.avif") type("image/avif"),
url("items-1600x600.jpg") type("image/jpeg")
);
Alle modernen Browser unterstützen heute die Abfrage nach dem Bildtyp mit image-set.
Was bislang leider nur ein Vorschlag ist: Angaben wie vw oder vh für die Abmessungen des Viewports und dpi-Angaben für den Druck. Dann würde image-set Media Queries einsparen, während hohe Auflösungen für Retina-Monitore eher selten benutzt werden.
background-image loading lazy
Um Hintergrundbilder erst zu laden, wenn sie sich beim Scrollen dem Viewport nähern, müssen noch Plugins bzw. Javascript Intersection Observer für das nachträglich Laden sorgen.
HTML-img-Element vs CSS background-image
Es spricht viel dafür, das HTML-Element img anstelle von Hintergrundbildern einzusetzen. Hintergrundbilder sind zwar sichtbar, aber ohne besondere Vorkehrungen liefern sie keine Informationen zum Bild. img-Elemente hingegen haben ein alt-Attribut für eine Bildbeschreibung für Screenreader, das auch von den Suchmaschinen ausgewertet wird.
Das Laden von Bildern, die über ein img-Tag eingesetzt werden, kann mit loading lazy oder decoding async verzögert werden, bis der Nutzer in die Nähe des Bildes scrollt. Das picture-Element kann unterschiedliche Formate bzw. Seitenverhältnisse je nach Gerät bereitstellen.
background-image bietet eine einfache Basis für Effekte – von einer zusätzlichen Hintergrundfarbe bis zur einfachen Positionierung. Darum also finden wir Hintergrundbilder häufig in Slidern.
