Ein Pixel ist ein Pixel ist kein Pixel

Über die Einheit "Pixel" in CSS.

Nimmt man mit einer Fotokamera ein Bild auf, wird das Bild von einem elektronischen Bauteil aufgenommen. Der Chip besteht aus einem Raster aus Sensoren, die die empfangene Lichtmenge in Helligkeitswerte umwandelt. Jeder Sensor erzeugt so einen Bildpunkt, einen Pixel. Das entstandene Bild ist dann so hoch und breit wie der Sensor, z.B. 3000 x 2000 Pixel (ein 6-MB-Bild).

Pixel ist die Abkürzung von "Picture Element", also Bildpunkt.

Computerbildschirme sind auch als Raster von Punkten aufgebaut. Jeder Pixel kann eine bestimmte Farbe haben. Öffnet man ein Bild auf einem Computer, zeigt der Computer (bei 100%, also ohne Bildvergrösserung), jeden Pixel des Bildes auf einem Pixel des Bildschirms an.

Beispiel:
Mein MacBook Air hat eine Bildschirmauflösung von 1440 x 900 ppi. Das obige Bild von 3000 x 2000 Pixel wird also zu gross sein und nur abgeschnitten dargestellt werden.

Pixeldichte (Auflösung)

Je nach Bildschirm sind mehr oder weniger Pixel pro Zentimeter vorhanden. Bei alten Röhrenmonitoren sind es ca. 35 Pixel pro Zentimeter, bei einem iPhone X sind es 180 Pixel pro Zentimeter. Wir müssen hier übrigens mit der alten Einheit inch vorlieb nehmen, ein inch entspricht 2.54cm, der Röhrenmonitor hat also eine Auflösung von 90 Punkt pro Inch (ppi), das iPhone X eine Auflösung von 458 ppi.

Als das Web seinen Anfang nahm, war die Auflösung der Bildschirme noch überschaubar. Man hatte Röhrenmonitore, später LCD-Displays, die aber keine erhöhte Auflösung hatten. Mit Auflösungen von 72 - 96 ppi waren die Unterschiede der Bildschirme nicht allzu gross.

So etablierte sich die Einheit "Pixel" (kurz px) schnell als Standard für viele Grössenangaben im Web.

Auflösungsunabhängige Definition

Mit dem Aufkommen von hochauflösenden Monitoren wurde es wichtig, dass die Einheit Pixel gleich weiterverwendet werden konnte. Schliesslich soll ein Text mit 16px Schriftgrösse auf einem Retina-Display nicht unleserlich klein erscheinen, nur weil viel mehr Pixel auf engem Raum zu finden sind.

Deshalb ist die Einheit Pixel in CSS abstrakt definiert: Wenn man eine Armlänge von einem Monitor enfernt sitzt, ist ein CSS-Pixel 1/96 inch breit und hoch.

(Exakt ist der Pixel mit einem Winkelmass des Gesichtsfeldes definiert, aber die obige Kurzform ist einfacher zu merken und kommt auf dasselbe raus.)

In der Praxis heisst das, dass der Abstand des Betrachters vom Bildschirm eine Rolle spielt für die Grösse eines CSS-Pixels. Diesen Abstand kann man als Webdesigner nicht vorhersehen (dank dieser Abstraktion muss man das auch nicht!), aber der Geräte- und Betriebssystemhersteller kann das.

Auf einem Werbescreen in der Bahnhofshalle kann der Pixel gross sein, da man weiter davon entfernt ist. Auf dem Handy sollte er kleiner sein, da man dieses näher am Gesicht hat.

Das iPhone 3G hat eine Auflösung von 163 ppi. Da man es ca eine halbe Armlänge von einem selbst entfernt betrachtet, sieht ein Pixel in etwa gleich gross aus wie ein Pixel auf dem Desktop-Bildschirm. Das iPhone 4 hat eine Auflösung von 326ppi. Apple entschied sich bei der Programmierung des Mobile Safari-Browsers dazu, einen CSS-Pixel auf 2x2 Bildschirmpixeln anzuzeigen.

Ab dem iPhone 6+ haben sich CSS-Pixel und physische Pixel komplett voneinander gelöst, es gibt es keinen einfachen Weg mehr CSS-Pixel in Bildschirmpixel umzurechnen, mehr dazu in dieser Übersicht.

Was heisst das in der Praxis?

Als Webdesigner können wir davon ausgehen, dass jeder Betrachter einer Website eine Angabe in Pixeln ungefähr in derselben Grösse sieht. Das macht uns grundsätzlich das Leben einfacher.

Dafür gibt es einige Spezialfälle die zu beachten sind:

Schrift wird auf die Bildschirmpixel gerendert, sieht also auf einem Retina-Display gestochen scharf aus. Für Bilder gilt das nicht. Ohne Angabe wird ein Bildpixel auf ein CSS-Pixel (also auf mehrere Bildschirmpixel!) gerendert. Damit das Bild auf dem Retinadisplay gut aussieht, muss es verkleinert dargestellt werden, bzw. mit einer grösseren Auflösung eingebunden werden.
- Beispiel 1: man hat in einem Layout einen Bereich von 300x200 Pixel für ein Bild reserviert. Nun sollte das Bild 600x400 Pixel gross sein, damit es scharf aussieht.
- Beispiel 2: man hat ein Bild, dass in einem Layout so dargestellt wird, dass es auf 100% der Bildschirm-Breite angezeigt wird, aber maximal mit 1600 Pixeln Breite. Hier könnte man z.B ein Bild von 1600 Px Breite nutzen. Auf kleineren Geräten wird das Bild verkleinert dargestellt, grössere Bildschirme haben nicht zwingend eine so hohe Auflösung. (In der Praxis fliessen hier noch weitere Überlegungen ein: wie gross wird das Bild in Byte, wie lange braucht das zum laden? Wie gut sieht es wann noch aus? Ausserdem besteht die Möglichkeit mit CSS media queries anzugeben, dass je nach Bildschirmauflösung ein anderes Bild genutzt werden soll.)
Eine Linie von der Dicke eines Bildschirmpixels ist im Web nicht ohne weiteres erzeugbar. Die Einheit Pixel akzeptiert keine Kommastellen, Abhilfe schafft das verwenden einer anderen Einheit (0.03rem entspricht ca 0.5px bei 16px Schriftgrösse) oder der CSS-Eigenschaft transform.

Was ohnehin gilt: Exakte Masse (cm, mm) sind im Web obsolet, man kann nie garantieren, dass ein Zentimeter eines Designs auf jedem Bildschirm als 1 Zentimeter angezeigt wird.