High-Resolution Web (Retina, HiDPI)

Viele moderne Engeräte haben mittlerweile eine höhere Pixeldichte als gewöhnliche Monitore. Zumindest bei mobilen Geräten (Smartphone, Tablets, etc) scheint sich dieser Trend durchzusetzen.

"Retina display's pixel density is so high your eye is unable to distinguish individual pixels." – Apple.com

Eine größere Auflösung bedeutet, dass die einzelnen Pixel von dem menschlichen Auge nicht mehr erkannt werden können — damit sehen Texte & Grafiken gestochen scharf aus.

Der Nachteil bei Bildern (Raster/Pixelgrafiken) liegt darin, dass diese in der passenden Größe/Auflösung vorliegen müssen. Bei einer doppelten Pixeldichte, muss das Bild nun viermal so viele Pixel haben. Darum sollten auch nur die entsprechenden Geräte die größeren Grafiken laden, damit die Internetseite für "normale" Benutzer schneller geladen werden kann und um die Bandbreite nicht unnötig zu belasten.


Bei einer doppelter Pixeldichte werden aus einem Pixel gleich vier Pixel.

Schriften und Vektorgrafiken sind davon nicht betroffen. Leider unterstützen nicht alle Browser Vektorgrafiken und von diesen nur wenige Formate, wie zum Beispiel SVG (Scalable Vector Graphics). Für einfache Grafiken wie Icons, können auch sogenannte Icon-Fonts benutzt werden. Dafür wird eine Schrift erstellt, die Anstelle der Buchstaben die Icons enthalten. Diese können dann auch ohne Qualitätsverlust beliebig groß skaliert werden.


Schriften und Vektorgrafiken werden in Kurven beschrieben. Pixelgrafiken in einem fest definierten Raster — Breite x Höhe.

Wir beraten Sie gerne, ob diese Technik für Sie Sinn macht — technisch ist es für uns kein Problem Ihre Website für Retina & Co aufzuhübschen.

 

+49-251-7779928-1

E-Commerce

Up-2-Date

Drupal