Definition Resolution

Resolution (dt. Auflösung) bezeichnet die Anzahl der Pixel, aus denen ein Bildschirm in horizontaler und vertikaler Richtung aufgebaut ist. Sie wird als Pixelwertpaar angegeben, zum Beispiel 1920 × 1080 Pixel (Full HD) oder 3840 × 2160 Pixel (4K/UHD). Je höher die Auflösung bei gleicher Bildschirmgröße, desto kleiner die einzelnen Pixel und desto schärfer die dargestellten Inhalte.

Die im ursprünglichen Glossareintrag genannten Beispiele (iPhone 5s, iPad Air 1. Generation) stammen aus dem Jahr 2013 und sind nicht mehr repräsentativ. Aktuelle Richtwerte für gängige Geräteklassen:

• Smartphones (2024/2025): iPhone 16 Pro: 2.556 × 1.179 Pixel (460 ppi), Samsung Galaxy S25: 3.088 × 1.440 Pixel (QHD+, 501 ppi). Die physische Auflösung moderner Smartphones liegt weit über der logischen Darstellungsauflösung – mehr dazu im FAQ zu physischen vs. logischen Pixeln.
• Tablets: iPad Pro 13" (M4): 2.752 × 2.064 Pixel (264 ppi), Samsung Galaxy Tab S9 Ultra: 2.960 × 1.848 Pixel.
• Laptops: MacBook Pro 14" (M4): 3.024 × 1.964 Pixel (Liquid Retina XDR), Windows-Ultrabooks meist zwischen 1.920 × 1.200 und 2.560 × 1.600 Pixel.
• Desktop-Monitore: Full HD (1.920 × 1.080) bleibt am weitesten verbreitet; WQHD (2.560 × 1.440) und 4K/UHD (3.840 × 2.160) gewinnen im professionellen Umfeld an Verbreitung.

Das für Webdesign und Onlinemarketing wichtigste, im Original fehlende Konzept: Physische Pixel und logische Pixel (CSS-Pixel) sind nicht identisch – und diese Unterscheidung ist entscheidend für korrekte Responsive-Design-Implementierung.

• Physische Pixel: Die tatsächliche Anzahl der Bildpunkte auf dem Display-Panel – z. B. 2.556 × 1.179 beim iPhone 16 Pro. Diese Zahl beschreibt die hardware-seitige Auflösung des Bildschirms.
• Logische Pixel (CSS-Pixel): Die Einheit, in der Browser und Betriebssysteme Layout und Text darstellen – und in der CSS-Angaben wie width: 375px interpretiert werden. Das iPhone 16 Pro wird im Browser als 393 × 852 CSS-Pixel behandelt, nicht als 2.556 × 1.179. Das Betriebssystem skaliert alle UI-Elemente intern auf die physische Auflösung hoch.
• Device Pixel Ratio (DPR): Das Verhältnis zwischen physischen und logischen Pixeln. Beim iPhone 16 Pro beträgt die DPR 3 – jeder logische Pixel wird durch 3 × 3 = 9 physische Pixel dargestellt. Die DPR ist über die JavaScript-Eigenschaft window.devicePixelRatio und in CSS über min-resolution: 2dppx abfragbar.
• Retina-Displays: Apples Begriff für Displays mit einer DPR ≥ 2, bei denen die Pixeldichte so hoch ist, dass einzelne Pixel mit dem bloßen Auge nicht mehr erkennbar sind. Praktisch alle aktuellen Smartphones und viele Laptops haben DPR-Werte von 2 oder 3.
• Konsequenz für Webdesign: CSS-Breakpoints und Layout-Berechnungen arbeiten immer mit logischen CSS-Pixeln, nicht mit physischen Pixeln. Bilder müssen jedoch in ausreichend hoher physischer Auflösung bereitgestellt werden, um auf High-DPR-Displays scharf darzustellen – ein Bild mit 400 × 300 Pixeln erscheint auf einem DPR-3-Display unscharf, wenn es in einem 400 × 300 CSS-Pixel großen Container dargestellt wird.

Webdesigner und Entwickler orientieren sich nicht an physischen Displayauflösungen, sondern an logischen CSS-Pixel-Breiten – denn Breakpoints in Media Queries werden in CSS-Pixeln definiert. Die aktuell verbreitetsten Viewport-Breiten laut StatCounter (2024/2025) und ihre Designimplikationen:

• 360–414 px (kleine bis mittlere Smartphones): Der meistgenutzte Bereich – Android-Midrange-Geräte (360–390 px), iPhone Standard (390 px), Samsung Galaxy (384–412 px). Dieser Bereich definiert den mobilen Basis-Breakpoint der meisten Design-Frameworks.
• 430–480 px (große Smartphones, Plus-Modelle): iPhone Pro Max (430 px logisch), große Android-Flaggschiffe. Zunehmend relevant durch wachsende Beliebtheit großformatiger Smartphones.
• 768–1.024 px (Tablets): iPad-Standard-Viewport (768 px im Hochformat, 1.024 px im Querformat), Android-Tablets. Typischer Tablet-Breakpoint.
• 1.280–1.440 px (Laptops und kleine Desktops): Der häufigste Desktop-Breakpoint. Viele Design-Systeme definieren hier den Übergang zu breiten Desktop-Layouts.
• 1.920 px und breiter (Full-HD-Monitore und größer): Bei sehr breiten Viewports ist eine maximale Content-Breite (z. B. max-width: 1.280px mit zentriertem Layout) wichtig, um übermäßig lange Textzeilen und unlesbares Layout zu vermeiden.
• Empfehlung für Breakpoints: Statt an spezifischen Gerätewerten sollten Breakpoints inhaltsbasiert gesetzt werden – dort, wo das Layout bei zunehmender Viewport-Breite beginnt, visuell unbefriedigend zu wirken. Tailwind CSS nutzt z. B. die Breakpoints sm (640 px), md (768 px), lg (1.024 px), xl (1.280 px) und 2xl (1.536 px) als weit verbreiteten Referenzrahmen.

Resolution ist eine der Eigenschaften, die Media Queries abfragen können – wobei in der täglichen Responsive-Webdesign-Praxis die Viewport-Breite (width) die wichtigste Abfragedimension ist, nicht die physische Auflösung. Der Zusammenhang im Detail:

• Viewport-basierte Breakpoints (Standard-Praxis): Die meisten Responsive-Design-Entscheidungen basieren auf der Viewport-Breite in CSS-Pixeln: @media (min-width: 768px) { ... }. Diese Abfrage reagiert auf die logische Breite des Browserfensters, nicht auf die physische Displayauflösung.
• Auflösungsbasierte Media Queries (für High-DPR-Grafiken): Mit @media (min-resolution: 2dppx) oder dem WebKit-Präfix @media (-webkit-min-device-pixel-ratio: 2) können hochauflösende Grafiken gezielt für Retina-Displays ausgeliefert werden. Ein Beispiel: Normales Display erhält ein Standard-Hintergrundbild, High-DPR-Display eine doppelt so große Version desselben Bildes.
• Responsives Bildformat-Serving mit srcset: Statt CSS-only-Lösungen ist das HTML-Attribut srcset die empfohlene moderne Methode, um verschiedene Bildgrößen für verschiedene DPR-Werte und Viewport-Größen bereitzustellen. Der Browser wählt automatisch die optimale Bildgröße: <img src="bild.jpg" srcset="bild-2x.jpg 2x, bild-3x.jpg 3x" alt="...">.
• Orientation-Abfragen: Neben Viewport-Breite und Auflösung können Media Queries auch die Geräteausrichtung abfragen: @media (orientation: portrait) vs. @media (orientation: landscape). Relevant für Layouts, die sich im Hoch- vs. Querformat grundlegend unterscheiden sollen – z. B. auf Tablets.
• Container Queries als neuere Alternative: Während klassische Media Queries auf den gesamten Viewport reagieren, ermöglichen CSS Container Queries (@container), Layouts relativ zur Größe ihres Elterncontainers anzupassen. Das ermöglicht wiederverwendbare Komponenten, die sich unabhängig vom Gesamt-Viewport korrekt anpassen – ein bedeutender Fortschritt gegenüber klassischen Breakpoints.

Die Displayauflösung hat direkte Auswirkungen auf die Bildqualität in Websites und digitalen Werbemitteln – und erfordert eine auflösungsbewusste Bildstrategie:

• Retina-Grafiken für High-DPR-Displays: Rasterbilder (JPEG, PNG, WebP), die für DPR-1-Displays ausgerichtet sind, wirken auf Retina-Displays (DPR 2–3) unscharf. Die Lösung: Bilder in doppelter oder dreifacher physischer Auflösung bereitstellen und über srcset oder CSS-Auflösungs-Media-Queries dem richtigen Gerät zuordnen. Ein 400 × 300 px großes Bild benötigt für ein DPR-2-Display ein 800 × 600 px Quelldatei.
• Vektorgrafiken (SVG) als auflösungsunabhängige Alternative: SVG-Grafiken skalieren verlustfrei auf jede Displayauflösung und jeden Zoom-Level. Für Logos, Icons, Illustrationen und einfache Infografiken ist SVG das bevorzugte Format für alle modernen Webprojekte – unabhängig von der Device Pixel Ratio.
• Moderne Bildformate für effiziente Komprimierung: WebP und AVIF bieten deutlich bessere Komprimierung als JPEG bei gleicher oder höherer visueller Qualität – 25–50 % kleinere Dateien. Das ist besonders relevant, wenn hochauflösende Bilder für DPR-2- und DPR-3-Displays bereitgestellt werden müssen, da diese ohnehin größere Dateigrößen haben.
• Displayauflösung und Banner-Werbemittel: Standardformate für Display-Werbung (z. B. Leaderboard 728 × 90 px, Medium Rectangle 300 × 250 px) sind in CSS-Pixeln definiert. Für scharfe Darstellung auf Retina-Displays sollten Werbemittel-Grafiken in doppelter Auflösung (1.456 × 180 px, 600 × 500 px) exportiert werden – in der HTML-/CSS-Einbindung aber auf die nominale Größe begrenzt bleiben.
• Video-Auflösungen: Für eingebettete Videos gelten analoge Überlegungen: Full HD (1.920 × 1.080) ist für die meisten Web-Anwendungsfälle ausreichend; 4K-Video verbessert die Darstellungsqualität auf großen High-DPR-Displays, erhöht aber Ladezeit und Streaming-Anforderungen erheblich.

Die Displaytechnologie entwickelt sich rasant weiter – mit direkten Konsequenzen für Webdesign, Bildoptimierung und die Zukunft des Responsive Designs:

• OLED und MicroLED als neue Displaystandards: OLED-Displays (aktuell dominant in Premium-Smartphones und MacBooks) bieten perfektes Schwarz, hohe Kontrastwerte und breite Farbraum-Abdeckung (P3, Rec. 2020). MicroLED wird die nächste Technologiegeneration für Smartphones und Smartwatches – mit noch höherer Pixeldichte und Effizienz. Für Webdesigner bedeutet das: Farbgebung und Kontraste, die auf sRGB-Displays entwickelt wurden, können auf OLED-Displays mit P3-Farbraum übersättigt wirken.
• Faltbare Smartphones und variable Viewports: Faltbare Geräte wie das Samsung Galaxy Z Fold oder das OnePlus Open haben zwei verschiedene Viewport-Größen – gefaltet (ca. 380 × 900 px) und aufgeklappt (ca. 720 × 900 px). CSS Container Queries und flexible Layout-Systeme werden durch diese Geräteform besonders relevant, da klassische Breakpoints die variable Viewport-Dynamik nur unzureichend abbilden.
• Smartwatches und Wearable-Displays: Apple Watch (396 × 484 px) und Galaxy Watch besitzen eigenständige Displays mit eigenen Browsing-Funktionen. Für Webinhalte mit Wearable-Relevanz (z. B. kurze Transaktionsnachrichten, Bestätigungsseiten) sind Breakpoints unter 400 px zunehmend relevant.
• AR/VR-Displays: Apple Vision Pro und zukünftige AR-Brillen nutzen hochauflösende Displays (Vision Pro: 3.386 × 3.096 Pixel pro Auge) in völlig neuen Interaktionsparadigmen. Webinhalte werden in diesen Umgebungen über WebXR-APIs und spezielle Browser-Modi dargestellt – ein noch junges, aber wachsendes Design-Feld.
• KI-gestützte Bildoptimierung: KI-Bildverarbeitungssysteme (z. B. Adobe Firefly, Topaz AI) können niedrig aufgelöste Bilder durch Super-Resolution-Algorithmen auf höhere Auflösungen hochskalieren – mit visuell überzeugenden Ergebnissen. Auf Server-Ebene nutzen Bildoptimierungsdienste (Cloudflare Images, Imgix, Cloudinary) KI, um Bilder automatisch in der optimalen Auflösung und im optimalen Format für das jeweilige Endgerät auszuliefern.