Die BASE ist HD-Ready

11. Dez 2012

Die BASE wird ab sofort HD-Ready ausgeliefert. Hochauflösende Icons sind bereits im Paket enthalten. Auch ein hochauflösendes Logo kann genutzt werden.

Die BASE wird ab sofort HD-Ready ausgeliefert. Hochauflösende Icons sowie die Auswahlmöglichkeit für ein HD-Logo sind bereits vorhanden. Bei entsprechender Lizenz können auch Bilder im Inhaltsbereich hochauflösend dargestellt werden.

Vergleich Standardversion zur HD-Version
Vergleich Standardversion zur HD-Version

HD im Web

Während normale Monitore pro Pixel ein Bildpunkt zur Darstellung zur Verfügung haben, gibt es inzwischen immer mehr HiDpi Bildschirme, die aufgrund der hohen Pixeldichte mehrere Bildpunkte für ein Pixel nutzen. Retina® Displays haben z.B. ein Device Pixel Ratio von 2 und können so Bilder auch in doppelter Auflösung darstellen. 

HD im Sinne von hoher Pixeldichte ist also nicht mit dem von Fernsehgeräten oder Monitoren bekannten Full HD zu vergleichen. Dort handelt es sich lediglich um die Angabe einer absoluten Pixelzahl. Die Pixeldichte spielt dabei keine Rolle. Wenn Sie also einen Full-HD Monitor mit 1920 horizontalen Pixeln haben, werden Sie dennoch keine Web-HD Bilder betrachten können, da dieser jedes Pixel für die Darstellung eines Web-Pixels nutzt. Er kann also eine Webseite mit einer Breite von knapp 1920 Pixel anzeigen.

Ein iPad 3 mit Retina® Display mit 2048 horizontalen Pixeln, verhält sich aufgrund seines Device Pixel Ratio von 2 bei der Darstellung von Inhalten wie ein iPad 2 mit nur 1024 Pixel. Bekommt es hingegen ein Bild in doppelter Auflösung geliefert, nutzt es alle verfügbaren Pixel, um das Bild in brillanter Qualität darzustellen.

Neben iPad und iPhone haben aber inzwischen auch MacBooks und Android Geräte höhere Auflösungen und sind so in der Lage HD-Bilder darzustellen. Diese Entwicklung wird sich fortsetzen, so dass zukünftig ein immer größerer Anteil an Kunden den Unterschied zwischen einer normalen Webseite und einer HD-Webseite erkennen wird. Ob Smartphones oder Tablets, neue Spitzenmodelle haben fast nur noch HiDpi Displays, weshalb HD optimierte Webseiten immer wichtiger werden.

Wer einmal HD gesehen hat, will nichts anderes mehr und so wird eine HD-optimierte Webseite von immer mehr Besuchern als deutlich hochwertiger wahrgenommen.

Das HD Prinzip in Weblication® CMS

In der aktuellen BASE ist die HD-Funktion bereits integriert. Neben einem HD-Logo werden auch Icons in HD-Versionen über Media-Queries angeboten. 

Weblication® CMS selbst bietet die HD-Funktion für die optimierte Darstellung beliebiger Bilder als Zusatzmodul an. 

Abhängig von der Projekteinstellung können Bilder dann immer, nie oder elementabhängig in HD generiert werden. Des Weiteren lässt sich einstellen, ab welchem Device Pixel Ratio HD-Bilder ausgeliefert werden sollen. Während Retina®-Displays z.B. ein DPR von 2 haben, besitzen ältere Smartphones, wie z.B. das Galaxy S1 ein DPR von 1,5 und das Nexus 7 ein DPR von 1.325. 

Die BASE erkennt, ob der Besucher mit einem HD-fähigen Endgerät auf die Seite zugreift und liefert in diesem Fall das HD-Bild aus. Als Entwickler müssen Sie deshalb in der aktuellen BASE keine Anpassungen vornehmen, um HD-Bilder auszuliefern. Alle Einstellungen können Sie über die Projektkonfiguration machen.

Im Vergleich zu den bekannten Retina®-Tools, ist die Lösung vollständig im CMS integriert. Zusätzliche PHP-Prozesse oder AJAX Aufrufe entfallen dadurch, da bereits beim Generieren der Seite bekannt ist, ob ein HD-Bild vorliegt.

Damit die Bilder in hochauflösend ausgeliefert werden können, müssen diese mindestens in der doppelten Größe abliegen. Ein Bild, welches im Inhaltsbereich 320 Pixel breit dargestellt wird, muss also mindestens 640 Pixel breit vorliegen. Der DPI Wert spielt dabei keine Rolle, da im Web grundsätzlich nur Pixel zählen. Was daraus gemacht wird, liegt dann daran, was das Endgerät basierend auf dessen Displays daraus macht.

Vergleich zwischen normaler Darstellung und HD

Wenn Sie zu den Besitzern eines Retina®-Gerätes zählen, ein HTC X bzw. Samsung Galaxy S3 besitzen oder zu denen gehören, die ein Nexus 10 ergattern konnten, erübrigt sich jede Argumentation. Sie sehen auf diesen Geräten einen enormen Unterschied zwischen HD-optimierten Seiten und solchen, die noch nicht für HD optimiert sind.

Falls Sie noch nicht in den Genuss eines hochauflösenden Bildschirms gekommen sind, finden Sie hier einen kleinen Test, mit dem Sie auch auf einem konventionellen Desktop-Monitor ein Gefühl für den Unterschied zwischen der Standarddarstellung und der HD-Darstellung von Bildern auf einer Webseite bekommen können. 

Führen Sie für den HD-Vergleich folgende Schritte durch:

  1. Öffnen Sie den folgenden Link HD-Vergleich
  2. Betrachten Sie nur das linke Bild
  3. Entfernen Sie sich langsam so weit, wie Sie mit der Qualität links gerade noch zufrieden sind.
  4. Wechseln Sie aus dieser Entfernung nun zum rechten Bild und vergleichen Sie die Qualität.

Eine weitere Möglichkeit, die HD-Darstellung zu simulieren besteht darin, dass Sie die Darstellungsgröße im Browser auf 200% erhöhen (z.B. 5 x Strg+). Dieser Ansatz ist zwar nur bedingt aussagekräftig, man sieht aber schön, dass die Bilder interpoliert werden, was zu verlustreicher Unschärfe führt, während die vektorbasierten Schriften sauber gerendert werden können. Der Qualitätsunterschied wird mit diesem Test gut sichtbar. Wenn Sie in den Media-Queries des CSS das Limit für das Device-Pixel-Ratio auf 1 stellen, können Sie auch die bessere Qualität der Icons erkennen. Bei diesem Test zur Simulation von Retina bzw. HD Displays müssen Sie zwar immer genügend Abstand zum Bildschirm halten, bei einem Full HD Bildschirm können Sie so allerdings eine komplette Webseite betrachten.