Webstandard & Webdesign - CSS, HTML

 

Retina Display - Mit CSS Background-Image und Image-Set zu scharfen Bildern

Ein High Resolution Display oder besser bekannt als Retina Display, besitzt eine wesentlich höhere Pixeldichte als herkömmliche Displays und ist somit in der Lage Schriften, Icons und Bildern wesentlich hochauflösender mit wesentlich mehr Details darstellen zu können. Schön wenn man sich diese Entwicklung auch für die Umsetzung von Webseiten zu Nutze machen könnte. Nicht das man es nicht kann, denn hierfür gibt es bereits zahlreiche Ansätze. So kann man mittels einer kleinen JavaScript-Abfrage, ob Retina-Display oder nicht, dem Endgerät bspw. entsprechend unterschiedliche Bilder zuweisen lassen. Nachteil, man benötigt JavaScript. Im Frühjahr diesen Jahres gab es in den Webkit Nightly-Builds erste Ansätze für eine reine CSS-Unterstützung. Mittlerweile ist diese Umsetzung so weit vorangeschritten, dass Anwender mit Safari 6 oder Chrome 21 auf iOS 6 in der Lage sind, über Background Image-Set eine entsprechende Zuweisung ausschließlich mittels CSS vornehmen zu können.

Background-Image & Image-Set - Die Syntax

Die CSS Syntax für eine 600 Pixel breite und 100 Pixel hohe Hintergrundgrafik eines Websiteheaders könnte mit den eingangs beschriebenen CSS Eigenschaften wie folgt aussehen:

Background Image-Set
.header {
   background-image: url(img/image-set-fallback.png);
   background-image: -webkit-image-set(
                              url(img/image-set-default.png) 1x,
                              url(img/image-set-retina.png) 2x);
   width:600px;
   height:100px;
}

Als erstes wurde die Eigenschaft Background-Image ohne image-set definiert und wird somit von allen Browsern angezeigt, die dieses Attribut nicht verstehen und umsetzen können (siehe Zeile 2). In der nächsten Zeile wird image-set der Bild-Ressource vorangestellt (siehe Zeile 3). Alle Browser diese Eigenschaft verstehen und umsetzen können, zeigen die weniger hochauflösende Hintergrundgrafik "image-set-default.png" (siehe Zeile 4). Ist ein Browser, wie in diesem Fall Safari ab Version 6 und Google Chrome ab Version 21, dazu in der Lage die zweite Hintergrundgrafik dieses Image-Sets "image-set-retina.png" anzuzeigen, kommt der Anwender in den Genuss einer hochauflösenden Hintergrundgrafik - optimal für Retina-Displays (siehe Zeile 5).

Perfekt wäre Retina- & Bandbreitenabfrage (auf Basis von CSS)

In Kombination mit der Idee Webinhalte wie Bilder mittels Media Queries entsprechend der Bandbreite zuzuweisen, könnte man dann nicht nur die "Bedingung Retina", sondern auch noch die "Bedingung Retina und Bandbreite" abfragen. So könnte man dann dem Problem aus dem Weg gehen, dass ein Endgerät mit Retina-Display ein hochauflösendes Bild zugewiesen bekommt, obwohl die Übertragungsrate in Form einer geringer Bandbreite ein schlechtes Ladeverhalten aufweisen wird und der Benutzerspaß trotz Retina-Display, viel zu kurz kommt weil der Anwender (zu) lange warten muss.

Natürlich kann man auch über den Sinn und Zweck der Eigenschaften von Background-Image & Image-Set diskutieren, aber Fakt ist nun einmal ...

Natürlich kann man auch über den Sinn und Zweck der Eigenschaften von Background-Image & Image-Set diskutieren, aber Fakt ist nun einmal das Browserhersteller ein solches für sie nicht ganz uninteressantes Verhalten, mit einem Browser-Präfix wesentlich schneller implementieren können, als das W3C oder die WHAT WG mögliche alternative "responsive Attribute" für die Implementierung in dem Image-Tags. Bis es soweit ist, muss man entweder Mehraufwand für die Umsetzung mit JavaScript (bspw. mit RetinaJS) in Kauf nehmen oder auch eine zu lange Ladezeit von hochauflösenden Bildern verantworten. Gerade weile eine schlechte Performance in Bezug auf Webseiteninhalte einer der Konversionskiller schlechthin ist und somit signifikante negative Änderungen bei Umsätzen entstehen können, sollte dieser Schritt nicht nur einfach den Möglichkeiten der Browser geschuldet sein, sondern auch aufgrund möglicher wirtschaftlicher Auswirkungen.

Eure Meinung zu diesem Ansatz, Anwendern hochauflösende Bilder zuzuweisen?

Wie steht ihr zu diesen Entwicklungen in Bezug auf die Verwendung der Eigenschaften Background-Image und dem Attribut Image-Set? Auch wenn diese Thematik noch keinen endgültigen und flexibel einsetzbaren Vorschlag parat hat, kann jeder von Euch den dieses Thema in welcher Form auch immer interessieren sollte, seine Meinung diesbezüglich hier kundtun. Denn bei entsprechendem Interesse könnte das Thema inhaltlich in eine neue Auflage meines Buches zu gegebener Zeit mit einfließen.

Weitere Artikel zum Thema CSS3

• Websites und Bilder für High-Resolution-Displays (Retina) optimieren (kulturbanause)
• Media Queries mittels Bandbreite
• Media Queries - CSS3 Workshop-Beispiel