Flern => Neben der Fotografie => Websites und Bilder für High Resolution Displays (Retina, HiDPI) optimieren

Hallo Zusammen,

wie vielleicht ein paar wissen, beschäftige ich mich neben der Fotografie auch noch mit  Webdesign.
Ich habe vor kurzem einen Beitrag zu Retinadisplay veröffentlicht und hierzu einige Fragen bekommen. Falls ihr ihn verpasst habt könnt ihr hier noch einmal nachlesen.

Heute möchte ich euch einmal zeigen, wie man seine Webseite retinafähig macht und die Bilder in einer entsprechende Auflösung ausliefert.

Die Apple Variante

Vergleich Retina mit dem Standard
Vergleich Retina mit dem Standard

Wenn man sich umschaut und überlegt, wie man das Ganze denn anstellen soll, schaut man natürlich als erstes, wie es denn die anderen machen. Eine der besten Lösungen hat Apple auf seiner Webseite implementiert. Die Bilder werden in normaler Auflösung geladen. Wenn das abgeschlossen ist, lädt ein Script die Bilder im Hintergrund noch einmal, nur in der doppelten Auflösung. Das bedeutet, der Besucher bekommt direkt eine Seite angezeigt und erhält ein paar Sekunden später die hohe Auflösung.

Für diese Variante habe ich mich auf meiner Webseite ebenfalls entschieden und verwende den Plugin WP Retina 2x. Dieser generiert beim Hochladen neuer Bilder automatisch im Hintergrund die Bilder in höherer Auflösung, um sie an die Retina Geräte auszuliefern. Das Script, welches beim Aufruf der Webseite gestartet wird, prüft nun, ob es sich bei dem Besucher um ein HiDPI oder ein Retina Gerät handelt. Wenn der Besucher ein Bild in hoher Auflösung benötigt, wird hierbei auf die vorher generierten Bilder zurückgegriffen.

Ein kleiner Nachteil dieses Plugins ist jedoch, dass er nur von WordPress Blogs verwendet werden kann.

Das Script manuell einbinden.

Natürlich gibt es auch die Möglichkeit das Script in anderen Systemen zu implementieren. Hierzu kann das Open-Source Script der Retina.js verwendet werden.

Hierzu sind folgende Schritte zu beachten.

  1. Die Datei retina.js auf den Server Hochladen
  2. Das Script in der Seite einbinden. <script type=”text/javascript” src=”/scripts/retina.js”></script> (am besten am Ende der Seite, kurz bevor der </body> geschlossen wird. Dann werden zuerst die normalen Bilder geladen und dann, falls benötigt, erst im Nachhinein die in Retina Auflösung.
  3. Das war es schon.

Wie funktioniert das Script

Wenn die Webseite mit einem retinafähigen Gerät aufgerufen wird, sucht das Script im gleichen Pfad, in dem auch die Grafiken in normaler Auflösung liegen, nach dem Bild mit dem selben Dateinamen mit der zusätzlichen Endung @2x.

Das bedeutet bei dem Code:

<img src=”bild.jpg” />

würde das Bild <img src=”[email protected]” /> aufgerufen werden.

Weitere Infos findet ihr auf der Herstellerseite retinajs.com

 Retina graphics for your website retina.js is an open source script that makes it easy to serve high-resolution images to devices with retina displays

Vergleich zwischen der Retina und der normalen Auflösung.

Ich habe hier einmal absichtlich ein Bild in normaler Auflösung hochgeladen. Ich denke das man auf großen Monitoren den Unterschied deutlich sehen kann. Falls ihr kein Retina Display habt, könnt ihr die Browseranzeige vergrößern. Dann solltet ihr den Unterschied zwischen den Bildern deutlich erkennen.

Vergleich Retina
Retinafähiges Bild.
Lisa von Matthias Butz
Normale Auflösung

Normale nicht Retina Auflösung
Das war’s für heute ich hoffe ich habe das nicht allzu kompliziert beschrieben und ihr konntet etwas lernen.

Falls ihr Fragen dazu habt könnt ihr mich gerne Kontaktieren. Schaut einfach mal auf meiner Kontaktseite vorbei.

Gruß Matthias

Matthias Butz

Mein Name ist Matthias Butz und ich bin Fotograf und Digital Artist im Raum Ludwigshafen – Mannheim – Heidelberg. Ok, eigentlich bin ich gar kein Fotograf, zumindest kein gelernter. Ich komme aus der IT, wo ich viele Jahre tätig war. Die Fotografie war jedoch schon immer mein Hobby, meine Leidenschaft und so kam es, dass ich eines Tages das Hobby zum Beruf gemacht habe. Ich bin der Meinung, dass man diese Leidenschaft durch nichts ersetzen kann. Ich liebe, was ich mache und habe Spaß dabei! Wenn man Spaß an etwas hat, ist man deutlich motivierter und kniet sich mehr rein als andere, um Schritt für Schritt besser zu werden. Ich möchte weg von engstirnigen Denken und probiere immer wieder neue Sachen aus um meinen Horizont zu erweitern. Das ist auch der Grund, warum ich die Dinge deutlich lockerer sehe als andere. Ich lasse mich auf mein Team und die Personen mit denen ich Arbeite ein um bessere Ergebnisse zu bekommen.

Alle Beiträge anzeigen

Kommentar hinzufügen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.