CSS image-set

background-image responsive für Retina

background-image image-set ist das Pendant zur sources und sizes, damit Hintergrundbilder mit hoher Pixeldichte für Retina-Monitore eingesetzt werden können.

18-12-15 SITEMAP

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-Tag, 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.jpg118KB
floral-retina-1200.jpg75KB
floral-normal-720.jpg50KB
floral-normal-360.jpg18KB
floral-normal-1300.jpg85KB
floral-retina-2000.jpg169KB

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.