Wie man Webseiten Retina ready macht

Die Technologie schreitet bei Smartphones , Tablets und PCs bzw. MACs immer weiter voran. So ist es auch kein Wunder, dass viele der hier genannten Geräte ein sogenanntes Retina- bzw. HiDPI-Display besitzen. Solche Bildschirme sind der Lage, Inhalte ultrascharf darzustellen. Ein Genuss für die Augen, würde man meinen - wenn da nicht das Problem mit den Grafiken wäre. Denn je schärfer ein Display ist, umso unschärfer wirkt eine Grafik mit einer Auflösung von 72 dpi. Doch keine Panik, denn in diesem Tutorial erfahrt ihr, wie ihr eure Webseiten für solche Screens fit machen könnt.
Es gibt an sich mehrere Möglichkeiten, Inhalte einer Page schärfer darzustellen. Ich möchte hier an dieser Stelle drei Beispiele vorstellen, die sich als besonders wirkungsvoll erwiesen haben. Diese wären:
• Vektorgrafiken in Form von SVG-Dateien
• hochauflösende Favicons und 144-dpi-Varianten von Pixelgrafiken
• Vektorgrafiken als Schriften
Auf diese Möglichkeiten möchte ich im Folgenden kurz eingehen.
Vektorgrafiken als SVG-Dateien einbetten
Man könnte meinen, dass in Illustrator erstellte Logos erst in PNG- oder JPEG-Dateien umgewandelt werden müssen. Doch das ist mittlerweile gar nicht mehr notwendig, da die gebräuchlichsten Browser (wie z.B. Firefox oder Opera) in der Lage sind, SVG-Grafiken darzustellen. SVG steht hierbei für Scalable Vector Grafik und basiert auf XML-Code. Wie der Name schon erahnen lässt, können Vektorgrafiken ohne Verluste vergrößert und verkleinert werden. Dadurch bleiben sie immer scharf und sind daher auch für hochauflösende Bildschirme sehr gut geeignet.<img src=“LOGO.svg“ alt=“Alternativtext für das Logo“>
Achtet dabei darauf, dass eure Grafik der Größe entspricht, wie sie auch auf der Seite dargestellt werden soll. Möchtet ihr nicht mit dem IMG-Tag arbeiten, so bietet sich ein DIV-Tag mit einer entsprechenden ID an, welche dann via CSS formatiert wird. Hier mal ein Beispiel: Ihr wollt euer Logo in einem DIV mit der ID logo integrieren. Dazu fügt ihr an geeigneter Stelle folgenden HTML-Code ein:
<div id=“logo“></div>
Ein DIV allein macht natürlich wenig Sinn. Deswegen soll das Ganze entsprechend mit CSS formatiert werden. Grundsätzlich ist es empfehlenswert, eine externe CSS-Datei (z.B. style.css) zu verwenden und sie im HEAD-Bereich der HTML-Datei zu integrieren. Das macht ihr am besten mit dem Code
<link rel=“stylesheet“ href=“style.css“>
Im Anschluss erstellt ihr einfach eure CSS-Datei namens style.css und fügt lediglich folgenden Code ein:
#logo { background:url(img/logo.svg); width: HIER ENTSPRECHENDE BREITE DER GRAFIK in px eintragen; height: HIER ENTSPRECHENDE HÖHE DER GRAFIK in px eintragen; background-repeat: no-repeat; display: block; }
Schon habt ihr euer Logo als SVG-Datei eingefügt! Ihr könnt natürlich das Ganze mit weiteren Angaben ergänzen. Wenn ihr zum Beispiel euer Logo rechts oben haben wollt, könnt ihr beispielsweise float: right; im Code ergänzen. Doch grundsätzlich reichen diese Angaben aus, um eine SVG-Datei darzustellen.
Hochauflösende Favicons und 144-dpi-Grafiken
Es gibt natürlich auch Fälle, wo man Pixelgrafiken verwenden möchte oder sogar verwenden muss. Favicons oder mit der Kamera geschossene Bilder können an dieser Stelle nicht als Vektoren verwendet werden oder sind im Falle eines vektorisierten Fotos sehr groß und erfordern dadurch längere Ladezeiten. Außerdem entsprechen vektorisierte Fotos nicht mehr dem Original und sehen dadurch unschön aus. Favicons wiederum können nur im ICO-Format und somit zwangsweise als Pixelgrafik gespeichert werden. Vor allem auf Smartphones (zum Beispiel im Dolphin Browser) werden 16x16-Favicons sehr unscharf dargestellt. Das sieht nicht nur unschön aus, sondern wirkt auch noch unprofessionell.Nehmen wir an, ihr habt ein sehr langes Logo, so empfiehlt es sich, den ersten Buchstaben des Logos als Favicon-Symbol zu verwenden, damit euer Icon auch erkennbar ist.
<link rel="shortcut icon" href="favicon-datei.ico">
Bei Pixelgrafiken - also Fotos oder sonstigen Bildern innerhalb der Webseite – reicht ein einfaches Bildbearbeitungsprogramm völlig aus, um die Auflösung zu verbessern. An dieser Stelle soll das Ganze am Beispiel von Photoshop verdeutlicht werden.
Wenn wir unser Foto, Logo oder sonstige Illustration in Photoshop mit Strg+O bzw. über Datei>Öffnen platziert haben, können wir mithilfe weniger Schritte die Auflösung unserer Datei ändern. Dazu brauchen wir nur auf Bild>Bildgröße zu gehen oder den Shortcut Strg+Alt+I zu verwenden, um anschließend die Auflösung auf 144 dpi (im Bild blau markiert) abzuändern. Im Anschluss speichert ihr die Datei, indem ihr auf Datei>Speichern unter… geht oder das Tastenkürzel Strg+Umschalt+S verwendet. Es erscheint ein Fenster, wo ihr entsprechende Einstellungen vornehmen müsst.
Es reicht, wenn ihr als Format JPEG wählt (bei transparenten Grafiken lieber PNG verwenden) und die Datei anschließend unter den Namen foto-2x.jpg abspeichert. Natürlich gibt es den Fall, wo Nutzer eure Seite aufrufen, deren Computer oder Smartphone kein hochauflösendes Display besitzt. In diesem Fall empfiehlt es sich, die Schritte von oben noch einmal zu wiederholen, nur mit dem Unterschied, dass ihr die Grafik (z.B. unter den Namen foto.jpg) mit einer Auflösung von 72 dpi abspeichert. Ihr wollt natürlich beide Fotos integrieren. An dieser Stelle muss zunächst einmal bestimmt werden, ob die Datei über HTML oder CSS integriert wird. Wenn sie über HTML integriert wird, verwendet ihr den IMG-Tag wie folgt:
<img src="foto-2x-jpg" width="Auflösung durch 2" height="Auflösung durch 2">
Wichtig ist, dass ihr bei width und height die Hälfte der tatsächlichen Pixelmenge eintragt, damit das Bild auch in der Größe dargestellt wird, wie es bei 72-dpi-Grafiken der Fall ist. Hier ist jedoch der Unterschied, dass das Foto auch auf hochauflösenden Bildschirmen eine entsprechende Schärfe vorzuweisen hat, weil es eben eine Auflösung von 144 dpi besitzt.
Möchtet ihr jedoch euer Foto via CSS integrieren, müsst ihr einen DIV-Tag mit der entsprechenden Klasse (z.B. .foto) definieren. Auch hier ist es sehr wichtig, dass ihr beim Angeben der Länge und Breite die Anzahl der Pixel halbiert. Habt ihr beispielsweise ein Foto mit einer Auflösung von 600x400, so müsst ihr als Auflösung via CSS 300 Pixel in der Breite und 200 Pixel in der Höhe angeben.
Zunächst erstellt ihr den DIV-Tag in eurem HTML-Dokument an entsprechender Stelle:
<div class=“foto“></div>
Im Anschluss folgt der CSS-Code am obigen Beispiel, welchen ihr eurer externen CSS-Datei hinzufügt:
.foto { background-image: url(foto-600x400-2x.png); background-size: 300px 200px; background-repeat: no-repeat; display: block; width: 300px; height: 200px; }
Schon habt ihr euer Foto für Retina- bzw. HiDPI-Displays optimiert. Eine weitere Möglichkeit, eure Grafiken zu integrieren, findet ihr auf www.webdesign-podcast.de.
Font-Icons als Alternative für Pixel-Icons
Die letzte Möglichkeit, Webseiten für Displays mit hoher Auflösung zu optimieren, sind sogenannte Font-Icons. Font-Icons sind nichts anderes als Vektor-Grafiken, welche in einer Schrift eingebettet wurden. Wie schon erwähnt, haben Vektor-Grafiken den entscheidenden Vorteil, dass sie ohne Qualitätsverlust skaliert werden können. Damit kommen auch Nutzer von Retina-Display-Geräten in den vollen Genuss von scharfen Grafiken. Im Falle von Icons wie z.B. E-Mail, facebook, Twitter, etc. möchte man natürlich nicht ständig einzelne Vektorgrafiken in seine Webseite integrieren.Denn für jede einzelne Grafik ist ein http-Request vonnöten und je mehr http-Requests versendet werden, desto länger sind die Ladezeiten. Hier kommen daher die Font-Icons ins Spiel, welche in einer einzelnen Schriftdatei enthalten sind, womit nur ein Request notwendig ist. Auch soll das Ganze an einem Beispiel verdeutlicht werden. Nehmen wir an, ihr wollt beispielsweise Twitter, facebook und Google+ in eure Seite verlinken, so benötigt ihr natürlich die entsprechenden Icons.
@font-face{ font-family: 'WebSymbolsLigaRegular'; src: url(‘WebSymbols-Regular.otf’); src: url('WebSymbolsLiga-Regular.eot'); src: url('WebSymbolsLiga-Regular.eot?#iefix') format('embedded-opentype'), url('WebSymbolsLiga-Regular.woff') format('woff'), url('WebSymbolsLiga-Regular.ttf') format('truetype'), url('WebSymbolsLiga-Regular.svg#WebSymbolsRegular') format('svg'); }
Der Grund, weswegen wir hier so viele verschiedene Schriftdateien integrieren, sind die verschiedenen Browser, welche bestimmte Schrifttypen nicht darstellen können. Daher ist es immer wichtig, Schriften im OTF-, TTF-, WOFF- und SVG-Format parat zu haben, da es ansonsten Probleme in der Darstellung geben kann. Natürlich ist es mit diesem eingefügten Code nicht getan. Ihr müsst natürlich via HTML und CSS bestimmen, wann und wo eure Icons dargestellt werden sollen. Dazu erstellt ihr in eurem HTML-Dokument beispielsweise einen DIV-Tag mit der Klasse .icons …
<div class=“icons“></div>
… und ergänzt eure CSS-Datei mit folgenden Formatierungen …
.icons { font-family: ‚WebSymbolsLigaRegular‘; font-size: Hier die entsprechende Schriftgröße in px eintragen; width: Entsprechende Weite; height: Entsprechende Höhe; }
Anm.: Die Icons wurden im Kasten mit der roten Kontur herangezoomt, um zu demonstrieren, dass es keinen Qualitätsverlust beim Zoomen gibt und die Icons tatsächlich für jedes Gerät scharf und sauber dargestellt werden.
Nun wisst ihr, wie ihr eure Webseite Retina ready macht und könnt zahlreichen Besuchern einen Augenschmaus bescheren.

Passend zum Inhalt empfehlen wir:
Webseiten und Apps entwickeln mit Angular
Danke für die Infos in dem gut erklärten Tutorial.
Danke für das super Tutorial!
Ein gut erklärtes Tutorial. Vielen Dank. Sehr nützlich.
LG Susan
Tolles Tutorial, echt gut erklärt =) hat mir auf jedenfall weitergeholfen!
Herzlichen Dank für die Infos.
Sehr interessant. Vielen Dank.
Vielen Dank! Super Tutorial!
Vielen Dank für das Tutorial!
mm das ist mal wirklich cool so etwas habe ich gesucht
danke für das Tutorial, gut erklärt. :)
Gut gemacht und informativ. Danke dafür.
Herlichen Dank für die Infos zu diesem Thema
Vielen Dank für Deinen sehr interessanten Beitrag.
Danke sehr Hilfreich. Ich hab aber noch folgende Frage: Wie sieht es denn mit der kommerziellen Nutzung der Font-Icons von www.justbenicestudio.com aus?
Ich kann leider kein russisch und ich habe keine LIzenzbestimmungen auf englisch gefunden :-(. Ansonsten vielen Dank
Vielen dank für das Tutorial.
Auch DANKE! Mein Chef hat mir nahegelegt, dass es höchste Zeit wird, nur noch Responsive-Websites abzuliefern!! Eure Infos helfen mir da sehr, danke!!!
Mehr anzeigen