HTML5, Java und Co.

Webdesign für HiDPI-Displays

Wir zeigen Ihnen, wie Sie mit den richtigen Tools und Workarounds die volle Schärfe eines HiDPI-Displays in Ihren Websites zum Vorschein bringen.

hardware, display, apple, retina, igzo

© Hersteller/Archiv

Ein iPhone 5 packt auf sein 4-Zoll kleines Display dank einer Auflösungsdichte von 326 dpi die Pixelzahl eines kleinen Laptops: 1136 x 640 Punkte.

Webkit-Browser wie Apples mobiles Safari oder Googles Chrome rendern Webinhalte mit einer Skalierungsstufe, die von der Auflösungsdichte abhängt. Diese Skalierung vergrößert auch jegliche Ungereimtheiten wie JPEG-Kompressionsartefakte oder den Effekt chromatischer Aberration. Der Benutzer nimmt den Qualitätsverlust zum Teil als störend wahr.

Virtuelle Auflösung

Pixelbasierte Layouts passen sich nicht elastisch der Größe des Viewports an und da das Zoomen in einer Website auf einem berührungssensitiven Display unerwünschte Klicks auslösen kann, haben sich die Webkit-Entwickler eine Lösung einfallen lassen: Sie kommunizieren gegenüber dem Browser eine inkorrekte Pixelzahl.

So verfügt etwa ein iPhone der vierten Generation über ein Retina-Display mit einer physikalischen Auflösung von 640 x 960 Pixeln und einer Pixeldichte von 326 dpi, gibt sich jedoch als ein nur 320 x 480 Pixel großes Gerät zu erkennen. Bei diesen Einheiten handelt es sich um die so genannten geräteunabhängigen CSS-Pixel.

Um die Optimierung des Webdesigns für Displays in Retina-Qualität zu erzielen, führt der scheinbar nächstliegende Weg, nämlich schlicht die Auflösung zu erhöhen, aber in eine Sackgasse. Denn so würde man den immer noch zahlreichen Benutzern konventioneller Displays unnötig viel wertvolle Bandbreite abverlangen, die zudem zwar nicht dargestellt werden kann, aber beispielsweise beim Mobilfunk dennoch in Rechnung gestellt würde.

Natürlich möchte man den Benutzern der Retina-Displays gestochen scharfe Qualität gönnen, ohne den anderen Anwendern überflüssige Daten zuzumuten. Die avisierte Lösung muss also beide Anwendergruppen berücksichtigen. Dies lässt sich zum Beispiel über die Bereitstellung optimierter alternativer Stylesheets mittels @media-Abfragen bewerkstelligen.

Ein anderer Ansatz besteht darin, mobile Geräte unter Verwendung von @media-Abfragen oder Javascript mit den passenden CSS-Stylesheets zu beliefern. Dieser Ansatz optimiert die Nutzung der Bandbreite, ist jedoch seitens des Webdesigners mit deutlich mehr Aufwand verbunden.

Wer den Einsatz von Bildern minimieren möchte, kann Symbolschriften nutzen, um bestimmte Informationen zum Ausdruck zu bringen, ob in der Phase der Prototypenerstellung oder auch bei der finalen Freigabe.

Schließlich besteht auch die Möglichkeit, anstelle von Pixelbildern auflösungsunabhängige Vektorgrafiken im SVG-Format einzusetzen. Bei Fotos stellt SVG natürlich keine Lösung dar, aber viele Diagramme oder Logos beginnen ihre Existenz ohnehin als eine Illustrator-Datei (.ai oder .pdf aus Adobe Illustrator). Es liegt da nahe, die betreffenden Grafiken fürs Web gleich auflösungsunabhängig auszugeben.

Displayspezifische Ausgabe

Durch den Einsatz von @media-Abfragen können Sie jedes Zielgerät je nach tatsächlicher Auflösungsdichte mit eigenen Stylesheets beliefern, die passenden Bilder mittels der CSS-Eigenschaften background oder background-image referenzieren und die Bildgröße unter Verwendung der Eigenschaft background-size übergeben. Nutzen Sie hierzu ganz einfach die @media-Anweisungen:

device-pixel-ratio
-o-min-device-pixel-ratio
min--moz-device-pixel-ratio
-Webkit-min-device-pixel-ratio

Zum Beispiel:

<link rel="stylesheet" href="1x.css"
media="only screen and (-Webkit-device-pixel-ratio: 1)" /><link rel="stylesheet" href="2x.css"
media="only screen and (-Webkit-device-pixel-ratio: 2)" />

oder eben so:

@media only screen and (-moz-min-
device-pixel-ratio: 1),
only screen and (-o-min-device-
pixel-ratio: 1/1),
only screen and (-Webkit-min-
device-pixel-ratio: 1),
only screen and (min-device-pixel-
ratio: 1){
.bild{ ... }
}
@media only screen and (-moz-min-
device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-
ratio: 2/1),
only screen and (-Webkit-min-device-
pixel-ratio: 2),
only screen and (min-device-pixel-
ratio: 2) {
.logo {
background: url(/pfad/zur/Datei.png)
no-repeat;
background-size: 100px 100px;
/* die uebrigen CSS-Anweisungen */
}
}

Das zentrale Element der Medienabfrage ist die Eigenschaft background-size, die für die korrekte Skalierung verantwortlich ist. Derzeit benötigen die einzelnen Browser die zugehörige herstellerspezifische Eigenschaft (also -moz-min-device-pixel-ratio, -Webkit-min-device-pixel-ratio oder -o-min-device-pixel-ratio).

Opera erwartet außerdem die Angabe der Pixelverhältnisse in Form eines Bruchs. Für Opera müssen Sie also beispielsweise den Wert 2/1 statt 2 oder 3/2 statt 1,5 eintragen. Ein Workaround für Bilder, die mit dem <img>-Tag eingebunden wurden, besteht im Übrigen in der Umsetzung so genannter adaptiver Bilder.

Displayspezifisch mittels Javascript

In Javascript können Sie dem Pixelverhältnis mittels window.devicePixelRatio auf die Spur kommen (diese Funktion liefert als Rückgabewert 1 oder 1,5 oder 2 und so weiter), allerdings ist die Unterstützung dieser Funktion nicht hinreichend verbreitet, um wirklich zuverlässig zu funktionieren.

Falls Sie nur Retina-Displays berücksichtigen möchten, können Sie die quelloffene Bibliothek Retina.js zu Hilfe rufen. Das Skript ersetzt jeweils jedes Bild, das in Standardauflösung vorliegt (wie /Bilder/Foto.png), durch eine Version in Retina-Auflösung (/Bilder/Foto@2x.png), falls eine entsprechend benannte Datei im betreffenden Pfad auf dem Server vorliegt und das Zielgerät über ein Retina-Display verfügt.

Minimieren von http-Anfragen

Jede @media-Abfrage referenziert die benötigten Bilder in der passenden Auflösung. Also gilt es für jedes Bild, eine Version der Abbildung für jede avisierte Pixeldichte bereitzustellen.Wenn Sie nur eine HiDPI-Pixeldichte unterstützen, verdoppelt sich schon einmal die Anzahl der referenzierten Bilder und somit wiederum die Anzahl der zugehörigen Selektoren; wenn Sie sich zwei HiDPI-Auflösungsdichten vornehmen, verdreifacht sich der Aufwand. Mit Hilfe von CSS-Sprites können Sie die Anzahl der http-Anfragen durch geschicktes Referenzieren der Retina-Version der Bilddatei vereinfachen:

div.spritesegment1 {
background: url(sprite.png) no-repeat
0 0;
}
div.spritesegment2 {
background: url(sprite.png) no-repeat
-100px 0;
}
div.spritesegment3 {
background: url(sprite.png) no-repeat
-100px -100px;
}
.content a.fav-link {
background: url(sprite.png) no-repeat
0 -100px;
}
@media only screen and (-Webkit-min-
device-pixel-ratio: 2),
only screen and (min-device-pixel-
ratio: 2) {
div.spritesegment1,
div.spritesegment2,
div.spritesegment3,
div.spritesegment4 {
/* das Sprite in @2x -Aufloesung fuer
Retina */
background-image: url(sprite@2x.png);
/* Zuruecksetzen der Dimensionen des
@2x-Sprite für Retina */
background-size: 200px 200px;
}
}

internet, webdesign, hidpi, retina, display, tool

© Internet Magazin

Das Kindle Fire HD läutet auch bei Amazon das HiDPI-Zeitalter ein; ab 7 Zoll mit 1280 x 800 Pixeln kommt das Gerät auf eine Dichte von 254 dpi.

Elastische Schrifteneinheiten

Amazon folgt mit dem Kindle einen völlig anderen Ansatz als Google in Android OS und Apple in iOS. So gibt zum Beispiel das Kindle Touch seine tatsächliche Auflösung mit 600 x 800 Pixeln an, setzt allerdings die Standardschriftgröße deutlich höher an als die branchenüblichen 16 Pixel beziehungsweise 14 Punkt.Würden Sie daher @media-Abfragen auf Basis der px-Einheit einsetzen, würde das Kindle Touch mit einem ungeeigneten Stylesheet mit einer aufgeblasenen Schriftgröße beliefert werden. Um das Problem zu umgehen, gilt es, @media-Abfragen in ems statt in px anzugeben, konkret also:

@media all and (min-width: 16em)

Automatisches Herunterrechnen unterdrücken

Stellt man Webbilder für Geräte mit einer hohen Auflösung des Displays bereit, kann zudem in allen mobilen Browsern mit der Webkit-Renderingengine noch ein anderer Effekt auftreten, der eine weitere und sehr unangenehme Qualitätsminderung zur Folge hat.

JPEGs ab einer Größe von 2 Megapixeln (2 x 1024 x 1024) sowie PNG/GIF-Bilder ab einer Größe von 3 Megapixeln werden in Webkit-Browsern wie dem mobilen Safari automatisch auf die halbe Pixelgröße heruntergerechnet.

Da die neuen OS-Geräte mit einer Pixeldichte von 2 arbeiten, werden die betreffenden Bilder dann wieder auf die gewünschte Display-Größe hochskaliert, was eine merkliche Minderung der Darstellungsqualität zur Folge hat. Um den Effekt zu verhindern, empfehlen wir, große Bilder nur im JPEG-Format und immer mit der Option progressiv abzuspeichern. Dann tritt der Fehler nicht auf.

Symbolschriften

internet, webdesign, hidpi, retina, display, tool

© Internet Magazin

Symbolschriften wie die Fico von Lennart Schoors stellen eine geeignete Methode dar, das HiDPI-Problem zu lösen und trotzdem sparsam mit der Bandbreite umzugehen, was ja gerade beim Mobilfunk relevant ist.

Der Einsatz von Symbolschriften anstelle von Pixelgrafiken hat für Sie zahlreiche Vorteile. Zum einen können Sie die Größe der Symbole mit Hilfe von CSS leicht ändern, ohne einen Verlust der Schärfezeichnung zu verursachen.

Textzeichen sehen unabhängig von der Zoomstufe immer scharf aus und machen daher unabhängig von der Auflösungsdichte immer eine gute Figur. Auch lassen sich Schriftzeichen leicht einfärben oder mit CSS-basierten Schatteneffekten versehen.

Die einfachste Methode, Symbolschriften einzusetzen, besteht im Zuweisen einer CSS-Klasse zu einem HTML-Element wie beispielsweise <span> oder <strong>, also konkret etwa:

<span class="information">i</span>

Der Inhalt des betreffenden Elementes entspricht dem Symbol, das Sie anzeigen möchten. Nach dem Einbinden der benötigten Schrift würden Sie die Klasse wie folgt deklarieren:

.icon {
font-family: 'Die Internet-Magazin
-Symbolschrift-1';
}

Diese Methode setzt voraus, dass Sie sich nicht daran stören, wenn Bildschirmleseprogramme den Inhalt des Symbols vorlesen (im Beispiel das "i").In HTML5 können Sie zur Einbindung einzelner Glyphen einer Symbolschrift alternativ das data-Attribut verwenden, um den Zeichencode an den Browser zu übergeben. Den Zeichencode müssen Sie natürlich erst herausfinden (die Belegung der Symbolzeichen ist von Schrift zu Schrift unterschiedlich).So lässt sich unter Verwendung der Schrift Fico von Lennart Schoors mittels data-icon="&#x25c8;" ein WiFi-Symbol auf die Website zaubern, natürlich nur, sofern Sie die benötigte Schrift in die Website eingebunden haben.Um das Symbol einer statistischen Grafik zu erzeugen, können Sie an ein Markup wie dieses:

<h3><span aria-hidden="true"
data-icon="⇝"></span>Balkendiagramme</h3>

mit dem folgenden CSS-Code ein Pseudoelement anhängen:

[data-icon]:before {
font-family: icons;
content: attr(data-icon);
speak: none;
}

Mit Hilfe des Attributs aria-hidden im Zusammenhang mit der Eigenschaft speak:none lässt sich das Vorlesen des Pseudoelementes ganz einfach unterdrücken. Der Code des betreffenden Zeichens wird an den Browser im data-Attribut übergeben.Pseudoelemente vertragen sich allerdings nicht mit dem Internet Explorer bis einschließlich Version 7, und so müssten Sie für diesen Browser, falls Sie ihn noch unterstützen möchten, ein alternatives Stylesheet bereitstellen. Dieses können Sie zum Beispiel mit Hilfe eines bedingten Kommentars einbinden

<!--[if lte IE 7]><link
rel="stylesheet" href="lte-ie7.css" /><![endif]-->

Eine andere Methode besteht im Einsatz eines :before-Pseudoelementes mit der Eigenschaft content, wobei diesmal für jedes Symbol eine eigene Klasse zum Einsatz kommt, zum Beispiel

<span class="symbol-information"></
span>

und dann weiter im CSS-Stylesheet:

[class%5E="symbol-"]:before {
font-family: 'Die Internet-Magazin-
Symbolschrift-1';
}
.symbol-information:before {
content: 'h';
}

Auflösungsunabhängig mit SVG

Als eine logische Lösung für Probleme mit der Bildschärfe im Web bietet sich der Einsatz von SVG-Vektorgrafiken nahezu an. Vektorbasierte Grafiken weisen eine deutlich geringere Dateigröße als Pixelbilder auf, fordern jedoch dem Zielgerät etwas mehr Rechenleistung ab. Die Unterstützung von SVG hat zudem so viele Nuancen, wie das SVG-Format Features beinhaltet.

Ein Browser mag den einen Teil der SVG-Funktionalität beherrschen, aber nicht den anderen. Zum Glück bleiben die Browser beim Parsen der Seite nicht stehen, wenn sie mit nicht unterstützten SVG-Funktionen konfrontiert werden.

Der Browser führt einfach die übrigen Anweisungen aus. Problematisch sind vielmehr diejenigen Teile der SVG-Funktionalität, die in dem betreffenden Browser zwar pro forma implementiert wurden, aber viel zu langsam ablaufen.

Stellt eine SVG-Grafik zu hohe Anforderungen an das Zielgerät hinsichtlich seiner Rechenleistung, "verschluckt" sich der Browser an der Website und bleibt einfach stehen. Beim Einsatz von SVG ist die Simplizität daher die wichtigste Tugend.

Die einfachste Methode zum Einbinden von SVG- Grafiken besteht im Einsatz des <img>-Tags, zum Beispiel:

<img src="Logo.svg" width="200"
height="320" />

Alternativ können Sie sich die CSS-Eigenschaft background-image mit einem Klassenselektor wie folgt zunutze machen:

.bild {
background-image: url(Logo.svg);
background-size: 200px 300px;
height: 200px;
width: 300px;
}

Zu guter Letzt kommen Sie auch durch den Einsatz von content:url() ans Ziel:

.bild-container:before {
content: url(Logo.svg);
}

Die Eigenschaften width und height funktionieren in diesem Fall allerdings nicht. Mit Hilfe der Bibliothek Modernizr lässt sich zudem die Rückwärtskompatibilität mit älteren Browsern problemlos herstellen. Hierzu können Sie zum Beispiel den folgenden Code nutzen:

.bild {
background-image: url(Logo_
kompatibel.png);
background-size: 200px 300px;
}
.svg {
.bild { background-image: url(Logo.
svg); }
}

Ein vergleichbares Resultat lässt sich in HTML 5 übrigens mit einem benutzerdefinierten data-Attribut erreichen, und zwar mit jQuery und Modernizr auf der Basis eines ganz einfachen Markups in der Form:

<img src="example.svg" data-
Ersatzbild="Logo.png" />

mit etwas Javascript wie diesem:

$(document).ready(function(){
if(!Modernizr.svg) {
var images = $('img[data-
Ersatzbild]');
images.each(function(i) {
$(this).attr('src', $(this).
data('Ersatzbild'));
});
}
});

Diese Methode kann allerdings Altlasten-Browser, die mit SVG nichts anzufangen wissen, nicht vom Herunterladen der SVG-Grafik abhalten.

Fazit

HiDPI-Displays wie Retina müssen dank praxiserprobter Workarounds keinen Grund zur Sorge mehr darstellen. Wer die Unterstützung von Geräten mit einer hohen Auflösungsdichte ins Pflichtenheft übernimmt, kann diese neue Herausforderung mit System und Eleganz meistern.

Download: SVG-Funktionen in mobilen Browsern

Mehr zum Thema

internet, apple, safari, web-apps, ios, remote debugging, tipps, tricks
Tipps & Tricks

Wie Sie mit dem Safari-Browser schnell Webseiten und Web-Apps auf iOS debuggen können, zeigen wir Ihnen.
internet, webdesign, responsive webdesign, Performance, optimierung
Responsives Webdesign

Trotz aller Verzüge gibt es auch einen Schwachpunkt beim Responsive Webdesign: Die Performance ist oft schlecht, da dieselben Ressourcen für…
internet, webdesign, adobe,  Illustrator, CS6
Webdesign

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.
Facebook stellte die neue Suche
Facebook

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?
Der BGH erklärt das Internet zur Lebensgrundlage.
Online-Recht

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.