Auflösung
Auflösung bezeichnet im Webdesign-Kontext zwei verschiedene Dinge: erstens die Pixel-Anzahl eines Bildschirms (z.B. 1920×1080), zweitens die Pixel-Dichte (Pixel pro Zoll, ppi). Beide Werte beeinflussen, wie gut eine Webseite auf einem konkreten Gerät aussieht — und sie sind für Webdesigner relevant beim Asset-Export und bei der Wahl der Breakpoints.
Bildschirm-Auflösungen 2026
Die häufigsten Desktop-Auflösungen im deutschen Markt: 1920×1080 (Full HD, etwa 35 Prozent der Desktop-Nutzer), 2560×1440 (QHD, etwa 18 Prozent) und 4K-Varianten ab 3840×2160 (etwa 8 Prozent). Auf Mobile dominieren iPhone-Geräte mit Auflösungen zwischen 1170×2532 und 1290×2796 sowie Samsung-Geräte zwischen 1080×2400 und 1440×3088. Für das Webdesign relevant ist nicht die Hardware-Auflösung, sondern die effektive CSS-Pixel-Auflösung des Geräts (Hardware ÷ Pixel-Density-Faktor).
Retina und HiDPI
Apple prägte 2010 den Begriff „Retina-Display" für Bildschirme mit so hoher Pixel-Dichte, dass das menschliche Auge einzelne Pixel im üblichen Betrachtungs-Abstand nicht mehr unterscheidet — typisch ab 220 ppi. Heute sind hochauflösende Displays (oft als „2x" oder „3x" bezeichnet) Standard auf Smartphones und Premium-Laptops. Für Webdesign bedeutet das: Bilder müssen in der doppelten oder dreifachen Pixel-Dimension exportiert werden, sonst wirken sie unscharf.
Praxis-Konsequenzen
Drei Konsequenzen für die Webdesign-Praxis: Erstens, alle Pixel-Bilder werden in mindestens 2x-Auflösung exportiert und über das Picture- oder srcset-Attribut variantenabhängig ausgeliefert. Zweitens, Vektor-Grafiken (SVG, Icons) sind auflösungsunabhängig und der bevorzugte Standard. Drittens, das Layout selbst arbeitet in CSS-Pixeln — Breakpoints orientieren sich an typischen Geräteklassen, nicht an Hardware-Pixeln.
Verwandte Begriffe: Accessibility, Alt-Attribut.