Um direkt mal an den Beitrag der letzten Woche anzuschließen möchte ich euch Heute zeigen wie ihr selbst auf Geräten mit hoher Pixeldichte ohne großen Aufwand gestochen scharfe Grafiken zaubert.

Letzte Woche hatte ich es knapp formuliert…

Das “Problem” liegt an Bildschirmen mit hoher Pixeldichte, wie wir sie von Smartphones und Tablets kennen. Inzwischen gibt es Bildschirme jenseits der 300ppi (Pixel Per Inch) Marke, was zwar einerseits zu gestochen scharfer Schrift führt – Doch andererseits zu schwammigen Bildern […]

Das „Problem“ der hochauflösenden Bildschirme bezieht sich dabei auf alle Grafiken eurer Webseite. Angefangen hat das ganze übrigens 2010 mit dem iPhone4 und dem „Retina“-Display.

Was genau bedeutet „Retina“?

Als „Retina-Display“ bezeichnet Apple die eigenen Bildschirme mit erhöhter Pixeldichte (PPI – Pixel Per Inch). Zum ersten mal tauchte dieser Begriff im Zusammenhang mit dem iPhone4 auf. Dieses hat eine Dichte von 326 PPI.
Das Wort „Retina“ ist seitdem eine Art synonym für hochauflösende Bildschirme.

Wie macht sich der Unterschied bemerkbar?

Der Unterschied zwischen hochauflösenden und „normalen“ Bildschirmen lässt sich derzeit nur auf Mobilen Geräten (Smartphones, Tablets) und einigen MacBooks sehen.
Um aber einen Bildhaften Vergleich darzustellen habe ich hier einmal zwei Twitter-Buttons erstellt. Einer in einfacher und einer in doppelter Auflösung:Ich denke der Unterschied dürfte sofort auffallen. Die linke Version ist sehr viel „verwaschener“ – Das bezieht sich nicht nur auf den Twitter-Vogel sondern auch auf die abgerundeten Ecken.

Doch zum Glück gibt es diverse Tricks, die uns dabei helfen den Button für alle Geräte gut aussehen zu lassen 🙂

Vorbereitung…

Für die verschiedenen Methoden benötigen wir immer eine „hochauflösende“ Version unserer Grafik – Also zusätzlich zu unserer „originalen“ (176×150 Pixel):
Benötigen wir auch eine in doppelter Auflösung (353×300 Pixel):

Die erste Methode – Mit einfachem HTML

Dieser „Trick“ ist sehr viel einfacher als man vielleicht Vermutet… Anstatt unsere Grafiken 1:1 darzustellen, stellen wir sie nur halb so groß (1:2) dar. Also folgendermaßen:

<img src="pfad/zu/high_quali.png" width="176" height="150" />
<!-- Anstatt... -->
<img src="pfad/zu/low_quali.png" />

Nachteil dieser Methode: Die „hochauflösende“ Version würde immer geladen werden. Selbst wenn wir ein Gerät benutzen, das davon nicht profitiert… Das bedeutet, wir haben mehr Traffic und der Besucher mehr Datenvolumen – Für nichts 🙁

Die zweite Methode – Mit CSS

In den letzten Wochen und Monaten bin ich hier und da mal auf „Media-Queries“ eingegangen. Diese lassen sich nicht nur für Responsive Layouts nutzen sondern auch um solche Dinge wie die device-pixel-ratio abzufragen:

.icons { background-image: url('pfad/zu/low_quali.png'); }
.icon-a { background-position: 0 0; }
.icon-b { background-position: 0 16px; }
/* ... */

@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
  only screen and (-o-min-device-pixel-ratio: 13/10),
  only screen and (min-resolution: 120dpi) 
{
  .icons { background-image: url('pfad/zu/high_quali.png'); }
  .icon-a { background-position: 0 0; }
  .icon-b { background-position: 0 32px; }
  /* ... */
}

(Gefunden auf Github.)

Dieses Beispiel zeigt uns, wie wir selbst CSS-Sprites ohne großen Aufwand optimieren können!

Die dritte Methode – Mit Javascript

Gerade was Javascript angeht gibt es mehrere Lösungsansätze. Dieser hier ist von „Thomas Fuchs“, dem Kopf hinter Zepto. Es handelt sich dabei um eine wirklich sehr kleine und schlanke Funktion, die überprüft ob es sich beim aktuellen Gerät um eines mit hochauflösendem Bildschirm handelt:

function isRetina(){
  return (('devicePixelRatio' in window && devicePixelRatio > 1) ||
    ('matchMedia' in window && matchMedia("(min-resolution:144dpi)").matches))
}

(Gefunden via https://gist.github.com/madrobby/3161015.)

Ein weiteres Skript, das mit CSS Klassen arbeitet: Ihr definiert quasi im Vorfeld via CSS Klassen welche Grafiken über HD Fallbacks verfügen:

jQuery( document ).ready(function(){
  if( 'devicePixelRatio' in window && window.devicePixelRatio == 2 ){
    var img_to_replace = jQuery( 'img.replace-2x' ).get();
    
    for (var i=0,l=img_to_replace.length; i<l; i++) {
      var src = img_to_replace[i].src;
      src = src.replace(/\.(png|jpg|gif)+$/i, '@2x.$1');
      img_to_replace[i].src = src;
    };
  }
});

// On your HTML code (must provide width or height)
// <img src="../path_to_png/apple.png" width="200" height="200" class="replace-2x" />

(Gefunden auf http://egorkhmelev.github.io/retina/.)

Wieder ein anderer Weg wird mit retina.js gegangen – Hier wird nach dem laden der Seite automatisiert geprüft ob es HD-Fallbacks eurer Grafiken gibt. Dabei (und beim vorangegangenen Beispiel) wird das (von Apple) bekannte „@2x“ an den Dateinamen gehangen. Zu finden ist das ganze unter retinajs.com

Wieso nicht einfach immer hochauflösende Bilder laden?

Bilder in doppelter Auflösung benötigen mehr Speicher – Logisch. In meinem Beispiel wurde aus einem Bild mit 176×150 (also 26400 Pixel) ein Bild mit den Ausmaßen 353×300 (also 105900) Pixel – Eine Vervierfachung. Das bedeutet zwar nicht, das auch die Dateigröße auf das vierfache anschwillt, doch es wird definitiv mehr Speicher von Nöten sein.
Bei kleineren Grafiken ist das vielleicht noch zu vernachlässigen, doch sobald es sich um große Bannergrafiken oder Hintergrundbilder handelt schaut das schon anders aus…

Mehr Informationen zu diesem Thema findet man im ganzen Web verteilt – Unter anderem habe ich mir die folgenden Seiten angeschaut:

• http://egorkhmelev.github.io/retina/ bzw. https://github.com/egorkhmelev/retina
• http://phatness.com
• Gist von Thomas Fuchs
• wearehathway.com
• http://retinajs.com/

Damit möchte ich meinen Eintrag auch schon wieder beenden. Ich wünsche euch eine angenehme Rest-Woche und würde mich freuen wenn ihr nächste Woche wieder vorbei schaut!