HTML5 Mobile

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.

Abfotografiert: Deutliche Unterschiede zwischen dem normalen Icon (links) und der optimierte Version (rechts)

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).

11 Kommentare zu: Website-Bilder für das Retina Display optimieren

Robert Mühsig
14. Mai 2012, 18:28

Hallo Florian,
ich hatte mich auch schon mit dem Thema Retina Displays (auch im “normalen” Web) beschäftigt und neben der CSS Variante die du hier darstellst auch mal beschrieben, wie Apple das z.B. bei Apple.com löst: http://code-inside.de/blog/2012/04/30/die-retinahires-displays-kommen-hd-web-ahoi/

Warum die Apple Jungs nicht den Kniff mit CSS gemacht haben erscheint mir jetzt gerade fraglich – deine hier vorgestellte Lösung scheint mir etwas eleganter.

Oliver
9. Juni 2012, 11:50

Tolle Webseite! Das ihr Schwerpunkt so ausfühlich beschreibt kommt selten vor. danke und weiter so :)

Cat Butler
23. Juni 2012, 12:13

Sehr hilfreich – vielen Dank!

Urs
25. Juni 2012, 09:06

Vielen Dank für den tollen übersichtlichen Beschrieb.
Ich habe da noch eine Frage.
Würde auch die doppelte Auflösung (dpi) reichen also z.B. 150 dpi anstelle der doppelten Bildgrösse?
Funktionier dies auch so?

Vielen Dank

flo
25. Juni 2012, 21:06

Prinzipiell ja … das ist ja genau dasselbe (doppelt dots per inch -> doppelte Anzahl an Bildpunkten). Allerdings macht’s im Web meines Erachtens immer nur Sinn, das Pixelmaß als Bezug zu nehmen.

michael
16. Oktober 2012, 11:29

Toller Artikel, Danke. Ich glaube oben ist ein kleiner Tippfehler drin, oder ich habe es nicht verstanden.

Direkt über der ersten Codebox “, während cloud-hd 248x110px hat.” Muss es nicht 248x220px heißen.

flo
16. Oktober 2012, 17:44

Hi Michael, danke für den Hinweis. Hab’s korrigiert…

Patrik Krupar
18. November 2013, 09:31

Danke für einen kurzen Einblick in diese Problematik. Ich finde diese Seite liest sich etwas schwer, da die Schriftart doch übertrieben groß ist ;-)

c'mon
10. Januar 2014, 10:13

Super, vielen Dank! Greetz

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

*