HTTP DPR Header

Typ

Der DPR-Header ist ein HTTP-Request-Header und Client Hint, mit dem der Client das Device Pixel Ratio seines Displays an den Server übermittelt.

Syntax

Der Header enthält einen numerischen Wert, der das Verhältnis zwischen physischen und CSS-Pixeln angibt.

http 
DPR: 2
DPR: 1.5

Direktiven

Der DPR-Header verwendet einen einzelnen numerischen Wert:

ratio
Das Device Pixel Ratio als Dezimalzahl. Typische Werte sind 1 (Standard-Display), 2 (Retina/HiDPI), 3 (Ultra-HiDPI). Höhere Werte erfordern höher aufgelöste Ressourcen.
opt-in-required
Der Header wird nur gesendet, wenn der Server zuvor per Accept-CH: DPR das Opt-in angefordert hat.

Beispiele

Bildauslieferungs-API mit DPR-Optimierung

Ein Client fragt ein Bild von einer CDN-API an:

http 
GET /api/v1/images/product-hero.jpg HTTP/1.1
Host: cdn.example.com
DPR: 2
Viewport-Width: 1920
Accept: image/webp,image/jpeg

Die API liefert ein für Retina-Display optimiertes Bild:

http 
HTTP/1.1 200 OK
Content-DPR: 2
Content-Type: image/webp
Vary: DPR, Viewport-Width
Cache-Control: public, max-age=31536000

[WebP-Bild mit doppelter Auflösung: 3840x2160]

Responsive-Image-API mit Accept-CH

Eine Bildverarbeitungs-API fordert DPR-Client-Hints an:

http 
GET /api/v1/media/banner HTTP/1.1
Host: media.example.com

Der Server fordert DPR für zukünftige Requests an:

http 
HTTP/1.1 200 OK
Accept-CH: DPR, Viewport-Width, Width
Vary: DPR
Content-Type: image/jpeg

[Standard-Auflösungsbild]

Client sendet nachfolgenden Request mit DPR:

http 
GET /api/v1/media/banner HTTP/1.1
Host: media.example.com
DPR: 3
Viewport-Width: 1440
Width: 1440

Adaptive-Assets-API für verschiedene DPR-Stufen

Eine API liefert unterschiedliche Asset-Versionen basierend auf DPR:

http 
GET /api/v1/assets/icons/logo HTTP/1.1
Host: assets.example.com
DPR: 1.5
Accept: image/svg+xml,image/png

Der Server wählt die passende Icon-Version:

http 
HTTP/1.1 200 OK
Content-DPR: 1.5
Content-Type: image/png
Content-Location: /api/v1/assets/icons/logo@1.5x.png
Vary: DPR, Accept

[PNG-Icon mit 1.5x Auflösung]

DPR-Client-Hint-Flow

Der Ablauf der DPR-basierten adaptiven Ressourcenauslieferung.

plantuml 
@startuml
actor "Browser\n(Retina Display)" as Browser
participant "CDN API" as CDN
participant "Image Service" as Images
database "Asset Store" as Store

Browser -> CDN: GET /images/hero.jpg\n(first visit, no DPR)
CDN --> Browser: 200 OK\nAccept-CH: DPR, Viewport-Width\n[standard image]

Browser -> Browser: Store Accept-CH\nfor domain

Browser -> CDN: GET /images/product.jpg\nDPR: 2\nViewport-Width: 1920
CDN -> Images: Request optimized image\nfor DPR=2, width=1920
Images -> Store: Fetch/generate 2x image
Store --> Images: 3840x2160 WebP
Images --> CDN: Optimized 2x image
CDN --> Browser: 200 OK\nContent-DPR: 2\nVary: DPR, Viewport-Width\n[retina-optimized image]

note right
Sharp, crisp image on
high-DPI display without
bandwidth waste
end note
@enduml

Vorteile für die Systemarchitektur

  • Reduziert Bandbreite durch Auslieferung der optimal aufgelösten Ressourcen
  • Verbessert visuelle Qualität auf High-DPI-Displays ohne Over-Delivery
  • Server-Side-Optimierung ermöglicht besseres Caching als JavaScript-basierte Lösungen
  • Vary-Header erlaubt effizientes CDN-Caching für verschiedene DPR-Stufen
  • Kombinierbar mit anderen Client Hints für vollständig adaptive Content Delivery

Spezifikation

Der DPR-Header ist im Client Hints Infrastructure Draft definiert.

Weitere Spezifikationen

Accept-CH Header, Content-DPR Header