Website-Bilder für das Retina Display optimieren

Erstellt man Websites und betrachtet sie zum ersten Mal z.B. auf einem iPhone 4/4s, stellt eventuell man fest: Manche Bilder sind irgendwie nicht richtig scharf!

Die Ursache ist einfach erklärt: Im Falle der Apple-Geräte (ab iPhone 4) haben diese das sogenannte Retina-Display mit sehr hoher Pixeldichte, die „normale” Bilder vergleichweise unscharf aussehen lässt, wenn man diese mit „optimierten” Bildern vergleicht.

Im Folgenden deshalb zwei Möglichkeiten, wie man recht einfach Bilder mit höherer Auflösung integrieren kann, die dann deutlich besser aussehen.

Retina-Optimierung für das HTML-Element (img)

Das Prinzip, um ein Bild mithilfe des img-Elements für das hochauflösende Display zu verbessern, ist einfach: Man erstellt die Bilddatei mit den doppelten Maßen (z.B. 248×220 statt 124×110), zeigt sie jedoch in der einfachen Größe (124×110) an. Die vorhandenen Mehrinformationen im Bild werden auf einem hochauflösenden Display dargestellt, während z.B. am Rechner zwischen den beiden Bilder kein Unterschied zu sehen ist.

Der Faktor 2 ergibt sich übrigens aus den Vorgaben des Herstellers und ist somit (eigentlich) speziell für Apple iPhone und iPad.

Der Nachteil liegt in der gestiegenen Dateigröße der Bilder. Je nach Bildinhalt und verwendetem Dateiformat muss hier letztlich zwischen Ladezeit und Darstellungsqualität abgewogen werden. Bei Vektorgrafiken wie Icons, Firmenlogo, etc. lohnt sich dies in der Regel, da die Größe nur unwesentlich zunimmt, die Grafiken jedoch deutlich besser aussehen.

Am Rande sei erwähnt, dass aufgrund dieser Limitierung nicht umsonst in letzter Zeit die Rufe nach einem neuen HTML-Element (z.B. picture) laut werden, dass mehrere Bildquellen unterstützen soll. Dies würde die Möglichkeit bieten, sowohl für unterschiedliche Pixeldichten als auch Darstellungsgrößen (Stichwort „Responsive Webdesign”) verschiedene Bilder zu hinterlegen.

Ausprobieren lässt sich die Darstellungsqualität mit folgendem Beispiel (es handelt sich um die ersten beiden Logos). Das normale Bild (cloud-sd) hat tatsächlich 124x110px, während cloud-hd 248x220px hat.

<img width="124" height="110"  src="cloud-sd.png" />
<img width="124" height="110"  src="cloud-hd.png" />

Retina-Optimierung für Hintergrundbilder (CSS)

Etwas flexibler sind die Möglichkeiten, wenn man ein Bild als Hintergrund definiert. Hier kann man über Media Queries gezielt das Display mit der höheren Pixeldicht ansprechen und diesem gezielt eigene Styles zuordnen.

Das folgende Code-Beispiel zeigt einen unoptimierten div mit der Klasse cloud-default und einen div mit der Klasse cloud-for-retina für das Retina-Display. Zweiterer sieht auf normalen Displays gleich aus, der CSS-Stil wird jedoch für Retina-Displays überschrieben und verweist auf ein hochauflösendes Bild, was in einer besseren Darstellung resultiert.

<style type="text/css"> 
.cloud-default, .cloud-for-retina {                       
	width: 124px;
	height: 110px;
	background: url(cloud-sd.png);
	display: inline-block;
}
 
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	.cloud-for-retina {
		background: url(cloud-hd.png); 
		background-size: 124px 110px;
	}
}
</style>     
 
[...]
 
<div class="cloud-default">  
</div>
 
<div class="cloud-for-retina">  
</div>

Der obige Quellcode stammt aus dem gleichen Beispiel wie oben (es sind die letzten beiden Logos in der Ansicht).