Wie man Webseiten Retina ready macht

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.




Um eine in Illustrator erstellte Vektorgrafik in eine SVG-Datei umzuwandeln, braucht man lediglich die entsprechende AI-Datei im selbigen Programm zu öffnen. Von dort aus müsst ihr nur ein paar kleine Handgriffe vornehmen, indem ihr auf Datei>Speichern unter… klickt. Nun erscheint das übliche Pop-up-Fenster, auf dem ihr bestimmen könnt, wo die Datei gespeichert werden soll. Es reicht dabei, wenn ihr als Dateitypen SVG wählt. Anschließend erscheint ein weiteres Fenster mit den jeweiligen SVG-Optionen. Ihr könnt alles bei den Standard-Einstellungen belassen und auf OK klicken.




Nun habt ihr schon den ersten Schritt erledigt. Jetzt möchtet ihr sicherlich eure Datei in die entsprechende Webseite einbetten. Ihr verfahrt dabei ganz einfach wie bei den JPEG- oder PNG-Dateien und nutzt den IMG-Tag wie folgt:

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




Für das Favicon-Problem gibt es allerdings eine Lösung, welche sich X-Icon Editor nennt. X-Icon Editor ist ein Online-Dienst, der es ermöglicht, sein Logo in ein Favicon umzuwandeln. Der Editor unterstützt dabei JPEG-, GIF-, BMP-, PNG- und ICO-Dateien. Für ein möglichst gutes Ergebnis empfiehlt es sich, eine Datei mit einer etwas höheren Auflösung zu verwenden. Diese könnt ihr auf den X-Icon Editor hochladen, indem ihr zuerst auf Import und in dem anschließend erscheinenden Menü auf Upload klickt. Wählt dann einfach die gewünschte Grafik aus und ladet sie anschließend hoch. Vergesst jedoch vorher nicht, den entsprechenden Bildausschnitt im Upload-Menü zu wählen, da schließlich (je nach Größe des Logos) nicht das ganze Logo reinpasst.

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.




Wenn euer potenzielles Favicon erfolgreich hochgeladen worden ist, könnt ihr es zunächst einmal in der Vorschau betrachten. Ihr habt dabei die Wahl zwischen einer Auflösung von 64x64, 32x32, 24x24 und 16x16. Wählt als Auflösung 64x64 unter dem Punkt Edit aus und klickt dann Export.




Nun erscheint ein Pop-up, wo ihr nur noch auf Export your Icon klicken müsst, und schon habt ihr eure Favicon-Datei. Diese könnt ihr mit folgendem Code im Head-Bereich eurer HTML-Datei einbinden:

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




Auf www.justbenicestudio.com könnt ihr die Schrift Web-Symbols von Igor Kiselev herunterladen, welche jene Icons enthält. Die Seite ist zwar auf Russisch, aber das tut dem Ganzen keinen Abbruch, da wir nur die Schrift benötigen. Weiter unten laden wir uns die Dateien WebSymbolsLiga-Regular.otf und WebSymbolsLiga-Regular.zip herunter. Entpackt die ZIP-Datei und packt die Schriftdateien gemeinsam mit der OTF-Datei in einen Ordner (z.B. in den Ordner, wo sich die index.html befindet, oder ihr erstellt einen Ordner namens fonts). Die OTF ist ebenso auf Fontsquirell.com erhältlich. Öffnet nun eure CSS-Datei und fügt am Anfang der Datei folgenden Code ein:

@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;
}

Eure Icons können mit den notwendigen Formatierungen folgendermaßen ausschauen:




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.