Was ist eine Bildschirmauflösung?
Wenn du auf einen Bildschirm schaust – sei es auf deinem Smartphone, Laptop oder Monitor – dann besteht das Bild, das du siehst, aus unzähligen winzigen Punkten. Diese Punkte nennt man Pixel. Die Bildschirmauflösung gibt an, wie viele dieser Pixel horizontal (also in der Breite) und vertikal (in der Höhe) auf dem Bildschirm angezeigt werden können. Eine Auflösung von 1920x1080 bedeutet beispielsweise, dass dein Bildschirm horizontal 1920 Pixel und vertikal 1080 Pixel anzeigen kann.
Generell gilt: Je höher die Auflösung, desto mehr Pixel befinden sich auf gleicher Fläche und desto schärfer und klarer wirkt das Bild. Allerdings hängt die wahrgenommene Schärfe nicht allein von der Anzahl der Pixel ab, sondern auch von der Größe des Bildschirms. Ein großer Monitor braucht beispielsweise eine höhere Auflösung, um ebenso scharf auszusehen wie ein kleinerer Bildschirm mit geringerer Auflösung.
Zusätzlich zur reinen Auflösung gibt es einen weiteren wichtigen Begriff: die Device Pixel Ratio (DPR). Aber was genau bedeutet DPR eigentlich?Die DPR beschreibt das Verhältnis zwischen den tatsächlichen Hardware-Pixeln eines Geräts (also den physischen Pixeln, die wirklich existieren) und den CSS-Pixeln, die für die Darstellung von Webinhalten verwendet werden. CSS-Pixel sind die Pixel, mit denen Entwickler Webseiten gestalten und auslegen – eine Art standardisierte Maßeinheit für die Bildschirmdarstellung. Wenn ein Gerät beispielsweise eine DPR von 2 hat, bedeutet das, dass jeder CSS-Pixel auf der Webseite mit 2×2, also insgesamt 4 Hardware-Pixeln dargestellt wird.
Warum ist das wichtig? Durch eine höhere DPR wirken Texte und Bilder besonders auf Smartphones oder hochauflösenden Bildschirmen deutlich schärfer und klarer. Allerdings bedeutet eine höhere DPR auch, dass Webentwickler darauf achten müssen, Grafiken und Bilder entsprechend hochauflösend bereitzustellen, damit sie nicht unscharf oder verpixelt aussehen.
Zusammengefasst lässt sich sagen: Auflösung und DPR bestimmen gemeinsam, wie klar, scharf und hochwertig deine Inhalte auf unterschiedlichen Displays erscheinen. Es lohnt sich also, beides im Blick zu behalten, wenn du für eine optimale Nutzererfahrung sorgen möchtest.
Verbreitete Auflösungen in Deutschland (März 2025)
| Auflösung | Verbreitung | Gerätetyp | Kommentar |
|---|---|---|---|
| 1920×1080 | 17,6% | Standard-Desktop | Immer noch dominierend |
| 1536×864 | 6,4% | Laptops | Geringere Variante von FHD |
| 390×844 | 3,8% | Smartphones | Hochformat-Auflösung |
| 2560×1440 | 3,7% | Gaming- und Business-Monitore | Sehr beliebt bei Power-Usern |
| 1366×768 | 3,4% | Ältere Notebooks | Veraltet, aber verbreitet |
Vergleich üblicher Bildschirmauflösungen
| Auflösung | Pixelanzahl | Seitenverhältnis | Anwendung |
|---|---|---|---|
| HD (720p) | 1280x720 | 16:9 | Mobil, Streaming |
| Full HD (1080p) | 1920x1080 | 16:9 | Standard bei vielen Monitoren |
| QHD (1440p) | 2560x1440 | 16:9 | Gaming, Design |
| 4K (UHD) | 3840x2160 | 16:9 | Multimedia, Arbeit |
| 8K | 7680x4320 | 16:9 | High-End-Visualisierung |
Retina-Schwelle berechnen
Die Retina-Schwelle beschreibt den Punkt, an dem das menschliche Auge keine einzelnen Pixel mehr erkennen kann. Berechne hier, ob dein Display "retina" ist:
Device Pixel Ratio & CSS-Pixel
Ermitteln Sie die CSS-Pixel eines Displays anhand seiner physikalischen Auflösung und der Device Pixel Ratio (DPR):
Device Pixel Ratio berechnen
Berechne hier die Device Pixel Ratio anhand der physischen Auflösung und der CSS-Pixelbreite: