Hochauflösend: Optimierte Websites für Retina-Displays

Displays mit sehr hoher Auflösung und Pixeldichte finden immer mehr Verbreitung. Seitdem Apple mit seinen Retina-Displays in iPhone, iPad und MacBook erstmals beeindruckende Schärfe demonstrierte, werden in immer mehr Geräten hochauflösende Bildschirme verbaut, auch bei Samsung, Sony oder in Googles Nexus-Geräten. Diese haben eine deutlich höhere Pixeldichte als herkömmliche Monitore. Das menschliche Auge kann nicht mehr den einzelnen Pixel  erkennen, was die Darstellung extrem scharfer Texte und Grafiken ermöglicht.

Pixelgrafiken, die für herkömmliche Monitore erstellt wurden, würden auf einem hochauflösenden Retina-Display der gleichen Größe nur einen Bruchteil der Größe einnehmen, da einem Pixel bei einem herkömmlichen Display ein Vielfaches an Pixel auf einem hochauflösenden Display entspricht. Geräte mit hoher Pixeldichte rechnen die Bilder aber automatisch auf die korrekte Größe hoch, wodurch allerdings Bildqualität und Schärfe verloren gehen.

Neben dem Einsatz von Webfonts und Vektorgrafiken müssen daher über den Quellcode speziell optimierte Grafiken mit höherer Auflösung den Geräten bereitgestellt werden, die über eine besonders hohe Pixeldichte verfügen. Je nach Gerät sollten dabei unterschiedlich optimierte Pixelgrafiken geladen werden. Nur so erreicht man eine jeweils scharfe Darstellung von Bildern auf hochauflösenden Displays.

webvisio mediadesign