Der Effekt von Grafiken auf Retina-Displays oder anderen hochaufgelösten Displays hat mich so sehr fasziniert, daß ich diesen Effekt auch haben wollte. Gesagt getan, das Logo von Projectdream gibt es jetzt in zwei Versionen.
Retina und Fallback
Für Retina-Displays gibt es nun eine doppelt so hoch aufgelöste Variante des Projectdreamlogos, für konventionelle Displays gibt es als Fallback die normal aufgelöste Variante.
Nach einiger Recherche im Internet, habe ich mich für folgende CSS-Lösung entschieden:
#masthead {
display: block;
position: absolute;
background: url(assets/img/logo_projectdream.png);
background-image: -webkit-image-set(url(assets/img/logo_projectdream.png) 1x, url(assets/img/logo_projectdream_retina.png) 2x);
background-image: -moz-image-set(url(assets/img/logo_projectdream.png) 1x, url(assets/img/logo_projectdream_retina.png) 2x);
background-image: -o-image-set(url(assets/img/logo_projectdream.png) 1x, url(assets/img/logo_projectdream_retina.png) 2x);
background-image: -ms-image-set(url(assets/img/logo_projectdream.png) 1x, url(assets/img/logo_projectdream_retina.png) 2x);
height: 94px;
width: 170px;
}
Offenbar können Grafiken, optimiert für Retina-Displays, lediglich als Hintergrundgrafiken eingebunden werden, was sicherlich Auswirkungen auf das SEO hat. Allerdings wirken Fotos auf hochauflösenden Displays wesentlich hochwertiger, wenn sie durch den img-tag eingebettet worden sind und via css kleiner skaliert wurden. Das wirkt sich nun wieder negativ auf die Ladezeiten aus, aber irgendwas ist ja immer.