HTML / CSS, Webseitenoptimierung

Webdesign für das Retina Display / High DPI Displays

WordPress Entwickler und Webdesigner

Webdesign für das Retina Display / High DPI Displays

Die aktuelle Smartphone, Tablet und sogar Computer Generation beschert uns mit den, umgangssprachlich als Retina Displays bekannten (danke Apple), High-DPI (HiDPI) Displays schärfere Schrift und grandiose Bilder. Wer bereits ein Endgerät mit Retina Display sein eigenen nennen darf, wird mir zustimmen, dass der Wechsel zurück zu einem normal aufgelösten Gerät, sich doch sehr unangenehm anfühlt (bei mir bezieht sich das ganze auf einen Vergleich zwischen dem iPad 1 und einem iPad 4). Plötzlich werden Schriften und Bilder grob und pixelig, ganz generell springt einem jeder einzelne Pixel ins Auge.

Aber diese Zeiten sind ja Gott sei Dank vorbei, ab jetzt werden nur noch Geräte mit Retina Displays gekauft und alles ist gut, aber Moment da war doch noch etwas…

Wenn wir jetzt auf unseren neuen und schicken Retina-Tablets auf nicht für High DPI Displays optimierten Webseiten surfen, wirken Bilder und Icons auf einmal merkwürdig verwaschen und gar nicht so schön scharf, wie es eigentlich sein sollte.

Anzeige:

Bootstrap 4 Kurs

Aber wie optimiert man seine Webseite denn jetzt eigentlich für Retina bzw. High DPI Displays? Tja, eigentlich ist das ganze relativ einfach, erfordert aber einiges an Fleißarbeit, wenn man wirklich alles optimieren will. Grundvoraussetzung für die Retina Display Optimierung ist, dass von sämtlichen oder zumindest den wichtigsten Grafiken eine zweite Variante in doppelter Größe angelegt wird.

Hier ein Beispiel vom Webdesign-Podcast.de Logo, einmal für Nicht-Retina-Geräte und hier die Variante für Retina-Displays.

Tipp: Gängige Dateinamen für die Retina Grafiken haben am Ende einfach ein -2x oder @2x. Beispiel: webdesign-podcast-logo-2x.png.

Liegen also alle Grafiken in entsprechend doppelter Auflösung vor, gibt es zwei Möglichkeiten die Grafiken auf der Webseite durch die Retina Grafiken zu ersetzen, natürlich nur dann, wenn auch wirklich ein Gerät mit High DPI Display auf die Seite zugreift. Würde man generell die großen Grafiken ausliefern, leidet die Ladezeit der Webseite und der Traffic geht in die Höhe, obwohl viele der Geräte mit den Retina Grafiken nichts anfangen können.

Retina Display / High DPI Optimierung mittels CSS Media Queries

Die meiner Meinung nach beste und eleganteste Lösung, ist die Retina Optimierung mittels CSS über Media Queries. Hier einmal ein Beispiel, wie hier auf Webdesign-Podcast.de die Retina Grafik für das Logo eingebunden wird:

/* Standard-CSS der für alle Geräte gilt */
header #branding a{width:324px;height:125px;background:url(img/webdesign-podcast-logo.png) no-repeat;}
 
/* Media Query für Retina Geräte */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 144dpi) {
    header #branding a{background:url(img/webdesign-podcast-logo-2x.png) no-repeat; background-size: 100% auto;}
}

Ihr könnt also einfach in dem gezeigten Media Query alle Ersetzungen definieren und schon wird eure Webseite Retina tauglich. Wichtig ist in dem gezeigten Beispiel der Wert background-size: 100% auto;, ohne diesen würde die Grafik einfach nur größer in dem Container dargestellt werden, nicht aber mit Höherer Auflösung schärfer.

Neben der bereits gezeigten Lösung über Media Queries, gibt es noch eine weitere Möglichkeit, diese sieht wie folgt aus:

/* Standard-CSS der für alle Geräte gilt */
header #branding a{
background-image: url(img/webdesign-podcast-logo.png);
background-image: -webkit-image-set(
                  url(img/webdesign-podcast-logo.png) 1x,
                  url(img/webdesign-podcast-logo-2x.png) 2x);
width:324px;
height:125px;
}

Retina Display / High DPI Optimierung mittels JavaScript – Retina.js

Das JavaScript Retina.js funktioniert relativ simpel, wenn es eingebunden ist, checkt das Script einfach ob zu den eingebundenen Grafiken eine „@2x“ Variante vorliegt und ersetzt diese.

So wird dann aus:
<img src="/images/image.png" />

einfach diese Variante:
<img src="/images/image2x.png" />

Natürlich werden die Grafiken mit Retina.js nur dann ersetzt, wenn die Webseite auch wirklich durch ein Gerät mit High DPI Display aufgerufen wird. Weitere Informationen zu Retina.js können der Webseite entnommen werden.

Ich persönlich bevorzuge allerdings die CSS-Variante über Media Queries, dennoch kann es auch gerechtfertigte Anwendungsfälle für Retina.js geben, dass natürlich auch tadellos funktioniert.

Bildquelle: Apple Inc. (Press / Media Service)

Schlagworte zu diesem Artikel: , , , ,

Veröffentlicht von Pascal Bajorat

Pascal Bajorat ist Mediengestalter und arbeitet als Webdesigner / Webentwickler, Autor und Trainer in Berlin. In den vergangenen Jahren hat er sich vor allem auf das CMS WordPress und die Entwicklung von hochwertigen Webseiten und Sonderlösungen spezialisiert. Er hat den Webdesign-Podcast.de 2010 gegründet.

Webseite:

2 Antworten zu “Webdesign für das Retina Display / High DPI Displays”

  1. Hi, das sind doch mal gute Hinweise und Tipps. Wusste gar nicht das es hier die Möglichkeit gibt, verschiedene Grafiken, für die verschiedenen Anwendungen anzubieten. Man lernt wohl nie aus .. wir wünschen einen guten Start ins neue Jahr.

  2. Gute Tipps, Webdesign ist nicht gerade meine Lieblingsbaustelle, aber als Retina Display Nutzer (Macbook Pro 13″) bin ich froh, wenn Seiten entsprechend gut aussehen.

Kommentar verfassen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden .

Der Benachrichtigungs-Dienst wird von WordPress.com (Automattic Inc., USA ) bereitgestellt. Mit der Anmeldung akzeptierst du die Datenschutzerklärung. Die Abmeldung / Abo-Verwaltung ist jederzeit über diesen Link möglich.