Tipps

websites fuer retina displays optimieren

Websites für Retina-Displays optimieren

Apple hat mit seinem Retina-Display, das sie bereits in MacBooks, iPads und iPhones verbauen, neuer Maßstäbe für hochauflösende Bildschirme gesetzt. Doch damit Ihre Internetpräsenz auf diesen Geräten in voller Schärfe brilliert, müssen Sie einige Vorkehrungen treffen.

Was ist ein Retina-Display?

Unter dem Begriff Retina-Display bezeichnet Apple Bildschirme mit einer besonders hohen Auflösung. Die Pixeldichte der Displays ist so hoch (das iPad 3 hat unglaubliche 2048 x 1536 Pixel), dass das menschliche Auge aus einem typischen Betrachtungsabstand nicht in der Lage ist, einzelne Pixel zu erkennen.
Derzeit werden diese hochauflösenden Bildschirme in den Produkten iPod touch, iPhone, iPad und MacBook Pro verbaut. Aber auch andere Hersteller bestücken ihre Geräte immer öfter mit Bildschirmen, die eine relativ hohe Pixeldichte vorweisen, wie zum Beispiel beim HTC Rezound.

Was bedeutet das Retina-Display für meine Website

Das Problem ist, dass normale Websites, die auf traditionellen Bildschirm noch sehr gut aussahen, plötzlich auf den neuen hochauflösenden Bildschirmen ziemlich unscharf wirken. Das liegt daran, dass die Bilder für die höhere Auflösung größer dargestellt werden müssen. Dafür werden sie in Höhe und Breite gestreckt.
Da der Trend zu hochauflösenden Bildschirmen mittel- bis langfristig nicht mehr aufzuhalten ist, wird es nötig, über die Konsequenzen für den eigenen Webauftritt nachzudenken.
Betroffen von der höheren Pixelanzahl sind vor allem die Bilddateien (Logos, Icons, Fotos und sonstige grafische Elemente) Ihrer Website: Um auf dem Retina-Display einen brillanten Eindruck zu hinterlassen, müssen diese Elemente in doppelter Auflösung vorhanden sein.

Eine Beispielrechnung

In HTML verwendet man die Anzahl der Pixel (Pixel per Inch, PPI), um die Größe eines Bildes einer Webseite zu bestimmen. Pixel sind die kleinste physische Einheit eines Bildschirms. Kombiniert man die winzigen beleuchteten Flächen, entsteht ein Bild. Das Problem: Die angezeigte Größe des Bildes hängt von der Auflösung des Bildschirms ab und kann stark variieren.
Früher waren 72 PPI Standard. Heutzutage haben die meisten modernen Bildschirme eine Auflösung von mindestens 90 PPI und weit mehr. Zum Vergleich: das iPad 2 hat mit einer Anzahl von 1024 × 768 Pixel einen Wert von 132 PPI. Das iPad mit seinen unglaublichen 2048 × 1536 Pixel erreicht sogar 264 PPI. Ausgehend von der Pixelanzahl des iPad 2 muss also ein Logo oder Foto für eine scharfe Anzeige auf dem iPad 3 eine doppelt so hohe Auflösung haben.
aufloesung-retina-display-im-vergleich-zum-hdtv-fernseher
Die Auflösung vom Retina Display im Vergleich zu HDTV
Nur so nebenbei, weil wir immer wieder darauf angesprochen werden: für Websites ist die Punktdichte – die Maßeinheit für die Auflösung im Druck gemessen in DPI (Dots per Inch) – irrelevant.

Doppelte Auflösung = Doppeltes Datenvolumen

Doppelt aufgelöste Bilder haben aber auch eine gut doppelt so hohe Datenmenge. Das wirkt sich negativ auf die Ladezeiten der Website aus. Außerdem wird zurzeit die Mehrheit der Besucher Ihrer Website bestraft, die noch mit „normaler“ Auflösung bei Ihnen vorbeisurft. Sie haben nicht nur eine höhere Ladezeit, auch Ihre mobilen Datentarife werden entsprechend unnötig belastet.
Was also kann man tun, um den unterschiedlichen Bedürfnissen gerecht zu werden?

Eine Website für hochauflösende Bildschirme optimieren

Tipp: Weniger Bilder verwenden

Der erste Aufruf gilt den Webdesignern, weniger Bilder zu verwenden und grafische Elemente wie zum Beispiel runde Ecken, Schatten und Farbverläufe stattdessen mit Hilfe von CSS (Cascading Style Sheets) abzubilden. Icons lassen sich mit Hilfe von Webfonts darstellen. Sie basieren auf Vektoren anstelle von Pixeln. Auf Basis von Text und CSS erstellte Grafiken skalieren auf den Retina-Displays ohne eine Verringerung der Qualität.
Natürlich kommt nicht jede Website völlig ohne Bilder als Strukturelemente aus, aber die Anzahl der Images auf das Nötigste einzudämmen, reduziert den Aufwand, eine Website für Retina zu optimieren.

Tipp: Mehr Bilder verwenden

Kommt man um Fotos oder Logos nicht herum, gibt es nur eine Lösung: die Bilder müssen hochauflösender eingesetzt werden. Um den Großteil der Besucher mit normal auflösenden Bildschirm nicht mit hohen Datenmengen zu bestrafen, benötigen wir Bilder in zweierlei Auflösung.
Doch woran erkennt WordPress, welche Bilder ausgeliefert werden sollen? Für Programmierer gibt es zwei Lösungen: Apple selbst zeigt auf seiner Webseite zunächst Bilder in Normalauflösung an und lädt mithilfe eines Javascripts hochauflösende Bilder nach, wird die Website mit einem Retina Display besucht. Das Problem ist aber auch mithilfe sogenannter “CSS Media Queries” zu lösen: Die Technik ermöglicht es, die Auflösung des Bildschirms zu erkennen und ein entsprechendes Bild anzuzeigen.

Mit einem Plugin zur richtigen Auflösung

Damit wir nicht programmieren müssen, verwenden wir ein Plugin, das die nötige Arbeiten für uns erledigt. Einmal installiert, erstellt das kostenlose Plugin WP Retina 2x automatisch für unsere Website die benötigen Bilddateien und regelt die passende Anzeige in Abhängigkeit der Bildschirmauflösung.
Ist die Auflösung der vorliegenden Bilder nicht hoch genug, werden Sie in der Medienübersicht gewarnt. Denn Bilder können nicht hoch skaliert werden, da sie sonst wieder unscharf werden. In diesem Fall müssen Sie die Bilder in einer höheren Auflösung erneut auf Ihren Webserver hochladen.
mediauebersicht-mit-wp-retina-2x

turned_in_notMedien, Plugins

6 Kommentare. Wir freuen uns über Ihren Kommentar

  • Hallo Thorsten,
    danke für die schnelle Antwort. Also ich habe das Plugin WP Retina 2x noch nicht gekauft. Wollte wissen ob durch die Installation des Plugins die Bilder auf dem Smartphone hochauflösend angezeigt werden. Oder meintest du generell es muss auch ohne Plugin hochauflösend sein?

    Antworten
  • Gilt das auch für die Smartphone Displays? Denn ich habe das Problem, wenn ich ein Bild in WordPress einfüge, es eine top Qualität anzeigt über Desktopansicht aber auf dem Smartphone sieht es verpixelt aus… Kann das Plugin dieses Problem auch lösen? Denn ich habe vor es vielleicht zu kaufen. Danke für den Beitrag.

    Antworten
    • Hallo Anna,
      vielen Dank für Deine Kontaktaufnahme. Mich wundert, dass die Bilder auf deinem Smartphone verpixelt dargestellt werden. Das sollte nicht sein, wenn sie auf dem Desktop-PC scharf angezeigt werden. Am besten stellst Du die Frage vor dem Kauf den Entwickler des Plug-ins.
      Ahoi!
      Thorsten

      Antworten
  • Liebe Redaktion,
    ein sehr interessanter Artikel zu einem in Zeiten von 4k und sogar 5k Monitoren immer wichtigeren Thema, in dem mir aber leider die wichtigste Information fehlt, nämlich eine konkrete Angabe über Pixelbreite und Auflösung, ähnlich wie im Artikel vom 7. Juli 2014:
    //elbnetz.com/worauf-sie-beim-einfuegen-von-bildern-in-wordpress-unbedingt-achten-sollten/
    Für eine Ergänzung wäre ich sehr dankbar, da man im Netz doch recht unterschiedliche Aussagen zu dem Thema findet.
    Herzlichen Dank, Andreas Schneider

    Antworten
    • Elbnetz Redaktion
      21. August 2016 9:59

      Moin Herr Schneider,
      Sie müssen die Größe der Bilder einfach nur verdoppeln. Wenn wir in dem von Ihnen genannten Beitrag von 800 bis 1.400 Pixel Breite sprechen, gilt für hochauflösende Bildschirme 1600 bis 2.800 Pixel.
      Wir hoffen, das klärt Ihre Frage.
      Beste Grüße,
      Die Elbnetz-Redaktion

      Antworten

Wir freuen uns über Ihren Kommentar!

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

Fill out this field
Fill out this field
Bitte geben Sie eine gültige E-Mail-Adresse ein.
You need to agree with the terms to proceed

expand_less
Elbnetz GmbH hat 4,96 von 5 Sternen 50 Bewertungen auf ProvenExpert.com