background-image für Retina-Monitore
Für Bilder, die mit einem img-Tag eingesetzt werden, hält HTML die Attribute sources und sizes parat oder das picture-Element, damit passend zum Browser und zum ViewPort unterschiedliche Bilddatenformate bzw. unterschiedliche Seitenverhältnisse übernommen werden.
Mit background-image kann der Browser zwar unterschiedliche Auflösungen und auch Seitenverhältnisse durch die @media-Regel nutzen, aber unterschiedlich hohe Pixeldichten für Retina-Monitore und Standard-Monitore gab es nicht.
Aktuell unterstützen Chrome, Safari, Opera und Edge die image-set Eigenschaft für die Angabe der Pixeldichte.
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: -webkit-image-set(url(floral-normal-720-1x.jpg) 1x,
url(floral-retina-1200-2x.jpg) 2x);
background-image: -moz-image-set(url(floral-normal-720-1x.jpg) 1x,
url(floral-retina-1200-2x.jpg) 2x);
background-image: -o-image-set(url(floral-normal-720-1x.jpg) 1x,
url(floral-retina-1200-2x.jpg) 2x);
background-image: -ms-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;
}
So viel für eine Gruppe.
@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) {…}
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("img/items-1600x600.avif") type("image/avif"),
url("img/items-1600x600.jpg") type("image/jpeg")
);
Die große Leere – Browser ohne Unterstützung für image-set und type-Angabe.
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 verzögert werden, bis der Nutzer tatsächlich 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.