HTTP Width Header

Der HTTP-Header Width ist ein Request-Header, der die gewünschte Darstellungsbreite eines Bildes in CSS-Pixeln kommuniziert. Als Client Hint ermöglicht er Server-seitige Bildoptimierung basierend auf Layout-Anforderungen.

Typ

Request-Header

Syntax

Der Header sendet die gewünschte Bildbreite als Integer-Wert in CSS-Pixeln.

http 
Width: 800
Width: 400

Direktiven

Die Direktive definiert die gewünschte Bildbreite für die Darstellung.

<width>
Bildbreite in CSS-Pixeln, die im Layout verwendet wird. Ganzzahlwert, Server multipliziert mit DPR für optimale physikalische Pixelgröße.

Beispiele

Nachfolgend finden Sie praktische Anwendungsbeispiele für den Width-Header.

Beispiel 1 Responsive Image Request

http 
GET /images/hero.jpg HTTP/1.1
Host: cdn.example.com
Width: 800
DPR: 2
Viewport-Width: 1920

Browser fordert Bild an, das 800px breit im Layout dargestellt wird auf 2x-Display, Server liefert 1600px breites Bild.

Beispiel 2 Opt-In mit Accept-CH

Initial Response:

http 
HTTP/1.1 200 OK
Accept-CH: Width, DPR, Viewport-Width
Vary: Width, DPR

Nachfolgender Request:

http 
GET /gallery/photo.jpg HTTP/1.1
Host: images.example.com
Width: 400
DPR: 3

Client sendet gewünschte 400px Layout-Breite mit 3x DPR, Server berechnet und liefert 1200px optimiertes Bild.

Beispiel 3 Mobile Adaptive Serving

http 
GET /api/images/product.jpg HTTP/1.1
Host: api.example.com
Width: 320
DPR: 2
Viewport-Width: 375

Response:

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

[640px optimierte JPEG Datei]

Mobile Device mit 375px Viewport fordert 320px Produktbild an, CDN liefert 640px für Retina-Display und bestätigt mit Content-DPR.

Width Client Hints Flow

Width Client Hints für Responsive Images

Vorteile für die Systemarchitektur

  • Präzise Bildgröße: Server liefert exakt benötigte Auflösung statt oversized Downloads
  • Bandbreiten-Einsparung: 60-80% kleinere Bilder auf mobilen Geräten durch Width-optimiertes Serving
  • Automatische DPR-Handling: Kombination mit DPR-Header ermöglicht perfekte Retina-Display-Unterstützung

Spezifikation

HTTP Client Hints, Width https://httpwg.org/http-extensions/client-hints.html#width

Weitere Spezifikationen

Viewport-Width Header, Accept-CH Header