robsite

In pixel

High DPI Web Sites

Man rumort, das MacBooks und andere Rechner bald ein Àhnliches High-DPI-"Retina"-Display bekommen wie iPhone und iPod touch. OS X Lion enthÀlt auch schon die passenden Grafiken in doppelter Auflösung. Dadurch sehen Interface, Text und Vektorgrafiken schön scharf aus, schnöde Raster/Pixel-Bilder aber nicht. Selbst auf normalen Displays kann man durch die Zoomfunktion nicht mehr von einem 1:1-VerhÀltnis zwischen CSS-Pixel und Display-Pixel ausgehen.

/images/posts/0000/2920/df_logo_scaling_big.png

Dave Hyatt gibt einen guten Überblick der Situation und schlĂ€gt ein paar Lösungen vor. FĂŒr Vektorgraphiken bieten sich SVG oder JS-Libraries wie RaphaĂ«l an. Pixelbilder kann man mit hoher Auflösung speichern und per CSS runterskalieren, sodass sie beim Zoomen keine SchĂ€rfe verlieren (Beispiel: Das Daring Fireball-Logo).

Der Artikel ist zwar schon 5 Jahre alt, wird aber immer relevanter, je mehr GerÀte hochauflösende Displays haben und Browser mitbringen, die Webseiten beliebig skalieren.

Mehr:

· pixel, webdesign · ★
Mastodon