Die Retina/HiRes Displays kommen! HD-Web ahoi!

image.png

Das coolste am iPad 3? Das Display. Nach jahrelangem Warten auf High Resolution Displays kommt wieder Bewegung in den Markt rein. Das Ganze hat natürlich auch Auswirkungen auf die Web-Entwicklung, denn niemand möchte verwaschene Bilder sehen oder noch Schlimmeres: Ein gänzlich kaputtes Design. Wie kann man High-Resolution Displays erkennen? Und auf was muss man evtl. sonst noch achten?

Ich bin kein Full-Time Web Designer, daher hat der Artikel eine gewisse unschärfe ;) Korrekturen können gerne über die Kommentare angestoßen werden.

Was ist das besondere von Retina / High Resolution Displays?

Bei diesen Displays ist die Pixeldichte wesentlich höher, d.h. dass man z.B. wesentlich detailreichere Bilder unterbringen kann. Als Beispiel dient hier ein Bild-Vergleich zwischen iPad 2 und iPad 3 von TheVerge.com

image 

Ziemlich beeindruckend, oder?

High Resolution Bilder an Hi-Res / Retina Displays ausliefern

Momentan tauchen immer mehr Javascript-Bibliotheken auf, welche sich an der Grundstruktur von Apple orientieren. Apple hatte bei der Einführung des iPhone 4 ein Benamungsschema festgelegt:

Non-Retina-Displays: Mein-Bild.png

Retina-Displays: Mein-Bild@2x.png

Idee ist, dass ein Framework automatisch die höher aufgelösten Fotos nimmt, wenn welche vorhanden sind. So kommen sowohl Non-Retina Displays als auch Retina-Displays zum Zug und zeigen ihr möglichstes an.

Wie Apple auf Apple.com Bilder fürs iPad 3 ausliefert

image

(Bild von Apple.com)

Natürlich hat Apple als erster eine Unterstützung für das iPad 3 Display auf Apple.com eingebaut. Hier gibt es eine vollständige Analyse, was Apple genau macht. Im Grunde funktioniert es so:

- normale Apple.com Seite samt Bilder werden runtergeladen

- Script prüft ob es ein iPad mit Retina Display ist

- Wenn es ein Retina Display ist:

  – für einige Bilder Bilder (z.B. das Hauptbild auf Apple.com) wird ein HEAD Request nach dem _2x.png Bild gemacht (warum auch immer Apple hier kein “@” rein gemacht hat)

- wenn gefunden wird dies runtergeladen und mit dem normalen ersetzt.

Wer es selber testen möchte, der kann im Chome diese Codes in die Konsole hacken:

AC.Retina._devicePixelRatio = 2
new AC.Retina

 

Hervorzuheben ist, dass hier natürlich die Datenleitung recht stark beansprucht wird, da die Bilder quasi “doppelt” runtergeladen werden und die Retina Images wesentlich größer sind.

Non-Retina:

image

Retina-Display:

image

Die Retina Version ist also 3 mal größer als das normale Bild!

Retina-JavaScripts für die eigenen WebApp

Retina.js geht einen ähnlichen Weg und hält sich an das Benamungsschema von den iOS Devices (d.h. mit @2x)

image

Grundsätzlich bindet man nur das Script ein und das Script sucht nach allen img-Tags auf der Seite und prüft ob es eine Retina Version gibt.

Für Background-Bilder in der CSS gibt es ein .LESS Mixin, welches ein Media-Query erzeugt und das Bild wird entsprechend ausgeliefert. D.h. Retina Displays bekommen eine HighRes Version, nicht HighRes Geräte bekommen ein normales Image.

Den Code gibt es bei GitHub. Negativ bei der Variante: Ähnlich wie bei Apple werden Bilder doppelt heruntergeladen.

Foresight.js will dieses Problem angehen. Das Script soll vor dem eigentlich abrufen der Bilder bereits prüfen ob das Dislay HighRes fähig ist, wenn es das ist und die Bandbreite auch “passt” (was auch immer das heisst), dann wird gleich das HighRes Bild runtergeladen. Es gibt einige Demos, welche allerdings ein HighRes Display erfordern (welches ich leider nicht besitze). Rein von den Features her scheint es etwas cleverer als Retina.js zu sein:

        • Request hi-res images according to device pixel ratio
        • Estimates network connection speed prior to requesting an image
        • Allows existing CSS techniques to control an image’s dimensions within the browser
        • Implements image-set() CSS to control image resolution variants
        • Does not make multiple requests for the same image
        • Javascript library and framework independent (ie: jQuery not required)
        • Image dimensions set by percents will scale to the parent element’s available width
        • Default images will load without javascript enabled
        • Does not use device detection through user-agents
        • Minifies to 7K

 

Bald wieder Ladebildschirme für Webseiten? Wo High-Res kein Spaß mehr macht…

Wenn wirklich jede Seite demnächst mit High-Resolution Bildern glänzen möchte, ist das auf der einen Seite sehr schön: Klare und Detailierte Bilder machen immer Spaß auf mehr. Wer allerdings mobil Unterwegs ist oder kein schnelles Internet daheim hat, der wird vermutlich schnell genervt sein. UMTS wird einem ja inzwischen hinterher geworfen, allerdings auch mit einem bestimmten Datenlimit und die Provider selbst manipulieren auch das Web um Bytes zu sparen. Ob man am Ende wieder Ladebalken sieht bevor man den Inhalt einer Seite aufruft (so gesehen früher bei einigen Flash-Seiten)?

SVGs, Icons-Fonts & Responsive Designs

Bislang hatte ich nur von Bildern gesprochen, natürlich gibt es noch weit mehr Themenfelder. Ein Punkt wären z.B. wie man mit Icons umgeht – hier sind Icon-Fonts eine interessante Idee. Das Thema Responsive Design und SVGs spielen natürlich auch eine Rolle – zu diesem Thema hatte ich diesen Blogpost gefunden.

Gibt es HighRes Displays für Windows und Erfahrung in der Web-Entwicklung mit HighRes Images?

Auch wenn ich hier immer von High-Res Displays geschrieben habe, ist das einzig mir wirklich bekannte das iPad 3 Display. Kennt jemand alternativen? Oder wird es erst mit Windows 8 ein neuen Schwung in diesem Bereich geben? Wer einen Mac besitzt (und ein iPad 3), der kann diesen als High-Res Display nutzen. Wer Alternativen in der Windows Welt kennt – immer her damit :) Kennt ihr jemanden, welche bereits extra Bilder nur für das iPad 3 ausliefert? Würde mich interessieren!

PS: Wer überlegt sich ein iPad 3 zu holen, der kann dies auch gern über unseren Amazon Shop machen und so unsere Arbeit unterstützen :)

Wenn dir der Blogpost gefallen hat, dann hinterlasse doch einen Kommentar. Wenn du auf dem Laufenden bleiben willst, abonniere unseren RSS Feed oder folge uns auf Twitter.

About the author

Written by

Hi, ich bin Robert Mühsig und bin Webentwickler und beschäftige mich mit Web-Frameworks auf dem Microsoft Web Stack und scheue mich auch nicht vor Javascript. Der Blog begann als "Problemsammelstelle und Lösungshilfe" und seitdem schreibe ich hier alles auf. Seit 2008 bin ich Microsoft MVP für ASP.NET. Treffen kann man mich online via Twitter (@robert0muehsig) oder hier.

2 Responses

  1. Wäre echt schön, wenn der HTML-Standard hier eine offizielle Ablöse schaffen könnte, so dass der Browser anhand gewisser Kriterien (z.B. Nutzerpräferenzen oder Device-Eigenschaften) einfach selbstständig entscheiden kann, ob er High-Res laden möchte oder nicht.

    Beim HTML5-Video-Element gibt es ja auch die Möglichkeit, mehrere Videodateien in verschiedenen Formaten zu hinterlegen.

    Reply
  2. Schau mal hier ;) das nutze ich kann nur weiter entfehlen.

    http://foundation.zurb.com

    Reply

Comment on this post

Letzte Posts

  • image_thumb.png
    NuGet Package Restore & Build Server wie z.B. AppVeyor

    NuGet ist ja mittlerweile weit verbreitet, aber eine Frage stellt sich natürlich immer noch: Checkt man die NuGet Packages ein oder nicht? In meinem kleinen Side-Projekt, welches auf GitHub liegt und ich über AppVeyor auch bauen lasse nutze ich das Package Restore Feature von NuGet, d.h. in meinem Repository befindet sich kein NuGet Package mehr, […]

  • image.png
    Microsoft Account Login via ASP.NET Identity

    Der Microsoft Account ist die zentrale Identifikationsstelle in der “Consumer-Microsoft-Welt”, allerdings ist das Einbinden eben dieser in die eigene Applikation eher schwierig. Das “Live SDK” ist nun unter dem OneDrive Dev Center zu finden und ganz professionell wurden auch alle Links zum alten Live SDK damit unbrauchbar gemacht. Beim Microsoft Account ist es auch unmöglich […]

  • image.png
    Zeitgesteuerte Azure WebJobs – so einfach kann Azure sein

    Das noch in Entwicklung befindliche Azure WebJob SDK bietet einige coole Features zum Verarbeiten und Bereitstellen von Daten. Bekanntes Beispiel ist das Sample welches auf eine Azure Queue lauscht und sobald ein Item da vorhanden ist anfängt dies zu verarbeiten. Szenario: Zeitgesteuerte Aktivitäten – ohne Queue und co. Mein Szenario war allerdings wesentlich trivialer: Ich […]

  • image.png
    Get Involved in OSS! Ja, aber wie geht das denn mit GitHub?

    Auch im .NET Lager gibt es Bewegung im OSS Bereich und es gibt verschiedene Arten wie man bei einem Open Source Projekt “Contributed”. Was zählt alles zu “Contribution”? Unter “Contribution” läuft eigentlich alles – ob es Fragen/Probleme zu dem Projekt via Issues ist oder Dokumentation nachreicht oder ob man darüber bloggt oder das Projekt vorstellt. […]

  • HowTo: Web.config samt eigener ConfigSection zur Laufzeit ändern

    In dem HowTo geht es darum wie man die Web.config zur Laufzeit ändert und was es dabei zu beachten gilt. Das ganze klappt auch mit komplexeren ConfigSections. Eigene ConfigSection? Vor einer ganzen Weile habe ich mal über das Erstellen einer eigenen ConfigSection geschrieben – im Grunde nutzen wir jetzt fast dieselbe Config. Zur Laufzeit? Startet […]

Amazon Shop

Facebook