Retina CSS-Sprites

Mit einem einfachen Trick lassen sich CSS-Sprites für hochauflösende Displays ohne viel Extraaufwand umsetzen.

Jetzt ist es da, das iPad „der dritten Generation“, außerhalb von Apples Hotline auch iPad 3 genannt. Es beschert uns Webentwicklern mit dem neuen Bildschirm ein paar neue Herausforderungen.

Wo möglich setzen wir CSS-Sprites ein, um Requests an den Server zu reduzieren. Alle Pixelgrafiken sehen jetzt auf dem iPad natürlich ziemlich schwammig aus, wenn sie nicht auch noch einmal in der doppelten Auflösung vorliegen. Nun sind CSS-Sprites in der Regel Pixelgrafiken und damit genau dieser Problematik unterworfen.

Die Lösung für normale Grafiken wäre dann die Hintergrundgrafik in doppelter Auflösung einzubauen und auf die halbe Größe zu skalieren. Das sähe dann wie folgt aus:

.selektor { 
  background: url('bildname.png'); 
  background-size: 50%; 
}

Damit wir bei der Umsetzung einer Website nicht zwei Sprites mit den entsprechenden Positionierungen pflegen müssen, ist die Antwort eigentlich ganz einfach. Wir bauen unsere Sprite wie bisher, und legen einfach eine doppelt so hoch aufgelöste Sprite dazu, die wir für Geräte mit Retina-Display ausliefern. Die Position der einzelnen Grafiken verdoppelt sich dabei einfach. Da die Retina-Grafik aber ohnehin auf 50% der Größe skaliert wird, um die doppelte Auflösung zu bieten, bleiben die Positionen gleich.

Die Sprites für Retina-Screens und normale Auflösungen im Vergleich im Vergleich

Das einzige Problem: eine einzelne Grafik lässt sich mit background-size: 50%; einfach herunter skalieren. Bei einer Sprite wird aber die ganze Grafik auf 50% des Elements skaliert und damit unbrauchbar. Mit background-size: cover; lässt sich dies umgehen, solange alle Grafiken in einer Dimension gleich groß sind und nur in der jeweils anderen Dimension nebeneinander platziert werden.

Das klingt jetzt vielleicht ein wenig verwirrend. Zum Glück ist es nicht wert weiter darüber nachzudenken, denn die viel einfachere Lösung ist es, die Retina-Fassung mit Pixelangaben auf die Größe der „normalen“ Sprite zu schieben. Das ganze dann noch in den entsprechenden Media-Query verpackt und fertig.

@media only screen and (-webkit-min-device-pixel-ratio: 2) { 
  .icon { 
    background: url('../images/sprite@2x.png'); 
    background-size: 256px 64px; 
  } 
}

Diese wenigen Zeilen CSS (und natürlich die entsprechend hochaufgelöste Sprite, die bei älteren Projekten das weit größere Problem sein wird) genügen um sämtliche Grafiken aus der Sprite auf der Website zu schärfen. Hier gibt es eine kleine Demo.

Portraitfoto Andreas Dantz

Andreas Dantz

Andreas ist Designer und Berater für Digitales und ist spezialisiert auf Designsysteme & Apps.

Weiterlesen

Sie benötigen Hilfe mit dem Design Ihrer (Web-)App?

Dann zögern Sie nicht und lassen Sie uns herausfinden, ob eine Zusammenarbeit für Beide Seiten ein Gewinn ist.