Webkit nyní podporuje tzv. Client Hints („rady od klienta“), pomocí kterých můžete na serveru připravit obrázky a ostatní zdroje tak, aby se co nejlépe hodily pro příslušný prohlížeč nebo zařízení.

Když prohlížeč požádáte, může v každém požadavku poslat údaje o rozlišení a rychlosti připojení zařízení, takže budete přesně vědět, co si můžete dovolit stáhnout a zobrazit, aby to neovlivnilo rychlost zobrazení a kvalitu stránky.

Vyžádání rad od klienta

Základem Client Hints je HTTP hlavička, kterou může server poslat s každou odpovědí (resp. s odpovědí s HTML obsahem):

Accept-CH: DPR, Width, Viewport-Width, Downlink

Např. v PHP můžete hlavičku poslat takto:

<?php header('Accept-CH: ' .
   'DPR, Width, Viewport-Width, Downlink');

Případně v čistém HTML můžete použít META tag:

<meta http-equiv="Accept-CH" content="DPR, Width, Viewport-Width, Downlink">

Rady v požadavku

Pokud prohlížeč (momentálně Chrome 46+ pro desktop a android a Opera 33+; Client Hints vymysleli v Googlu) najde daný údaj v HTTP hlavičce nebo HTML META tagu, začne do všech požadavků z příslušné stránky posílat v hlavičce požadované údaje:

GET /images/logo.jpg HTTP/1.1
host myserver.com
DPR: 2.0
Width: 600
Viewport-Width: 320
Downlink: 5.0
Save-Data: on

V seznamu samozřejmě můžete uvést jen údaje, které vás zajímají; např. pokud jen chcete vědět rozlišení pixelu, stačí uvést:

Accept-CH: DPR

a server bude posílat v hlavičce jen údaj DPR.

Vysvětlivky

Ostatní údaje znamenají:

• DPR = počet fyzických pixelů na jeden logický
• Width = aktuální šířka obrázku; posílá se jen pro obrázky, a jen pokud je šířka přesně dána – např. se nepošle, pokud je šířka obrázku definována pomocí procent; jde o fyzickou šířku, tedy CSS šířka vynásobená DPR (server tedy již nic nemusí přepočítávat)
• Viewport-Width = aktuální šířka obrazovky (resp. velikosti okna); tato šířka nezahrnuje hodnotu DPR a odpovídá CSS hodnotě pro min-resolution, max-resolution apod.
• Downlink = maximální rychlost stahování (uváděná v Mbps)
• Save-Data = uvádí, zda je připojení tzv. drahé, tedy zda se platí za přenesená data (pay-per-data); server by se pak měl snažit o co největší úsporu přenesených dat – hlavička se posílá, pokud je uveden Accept-CH: Downlink

Jak je využít?

Díky hlavičkám může server posílat jiné obrázky pro vysoké rozlišení (např. na základě htaccess přesměrování) nebo přímo skriptem generovat a ořezávat obrázky pro dané rozlišení.

Jelikož se hlavičky posílají do všech požadavků, můžete je použít i pro stahování CSS a skriptů, které mohou být dynamicky generované (nebo předgenerované) tak, aby rovnou počítali s daným rozlišením a připojením (např. podle DPR upravíte border-width, aby se lépe zobrazovala, nebo pro nízké rychlosti stahování vymažete obrázky na pozadí a nepotřebné styly a skripty).

Hlavičky v odpovědi

Společně s upraveným obrázkem (nebo jiným zdrojem) může server opět poslat několik hlaviček, pomocí kterých prohlížeči upřesní, jak jeho rady (client hints) použil a jak má se staženými daty klient zacházet.

Základní údaj, který by měl server poslat je hlavička, ve které řekne, na základě jakých údajů byl zdroj vytvořen a tudíž za jakých podmínek je možno ho znovu použít (tedy zobrazit z cache) a kdy je potřeba ho znovu stáhnout:

Vary: DPR, Width

Tento údaj říká, že soubor je upraven pro dané DPR a šířku a naopak je zcela nezávislí na šířce obrazovky a rychlosti připojení. Pokud se tedy změní např. šířka obrázku, měl by prohlížeč znovu stáhnout soubor pro příslušnou šířku.

Aby prohlížeč nemusel znovu stahovat obrázek, pokud se jeho šířka změní jen o pár pixelů, může server nadefinovat rozsahy, pro které je daný zdroj použitelný.

Pokud je rozdělení pouze na 2 množiny, např. pro mobily a pro ostatní, stačí poslat hlavičku:

Key: Width;div=320

Která říká, že pro šířku obrázku do 320px je potřeba jiný obrázek nebo pro šířku 321px a více. Pokud je potřeba rozsahů více, stačí hlavičku upravit:

Key: Width;partition=320:767:1200

Tato hlavička definuje 4 rozsahy pro šířku obrázku do 320px, pro 321 – 767px, 768 – 1200px a více než 1200 pixelů. Pokud tedy prohlížeč stáhl obrázek pro rozlišení 480px a šířka obrázku se změní na 640px, může stále použít ten samý; pokud by se ale změnila šířka na 800px, musel by ho znovu stáhnout ze serveru.

Stejně tak lze pracovat i s ostatními parametry:

Key: DPR;partition=1:2.5

Říká, že je potřeba rozlišovat obrázky pro desktop (DPR do 1), mobily (DPR 1.1 až 2.5) a phablety (DPR větší než 2.5).

Key: Downlink;div=1

Tato hlavička označuje, že pro připojení pomalejší než 1Mb/s by se měl používat jiný (menší) soubor než pro rychlejší připojení.

Skutečné rozlišení obrázku

V případě obrázku může (resp. musí) server ještě poslat hlavičku, která určuje, jaké je skutečné rozlišení obrázku v případě, že pro dané rozlišení prohlížeče žádný vhodný nenašel (resp. musí ji poslat i když odpovídá požadavku):

//Požadavek:
get /image.jpg HTTP/1.1
host myserver.com
DPR: 3.0
width: 900

//Odpověď:
HTTP/1.1 200
Content-Type: image/jpeg
Content-DPR: 2.0

V tomto případě prohlížeč požaduje obrázek o šířce 900px při rozlišení 3.0 (CSS šířka obrázku je tedy 300px), ale server pošle například obrázek 800px široký, což by znamenalo, že prohlížeč by ho roztáhl na 900px tím, že by vše vynásobil 1,125 (900 / 800). Ale tím, že server uvádí DPR obrázku 2.0, označuje, že prohlížeč by měl nejprve přepočítat obrázek na požadované rozlišení 3.0 (tedy vynásobit 1.5), čímž získá obrázek o šířce 1200px a pak teprve ho zmenšit na rozlišení 900px (tedy vynásobit 0.75).

Ve výsledku by mělo zobrazení vyjít lépe, když se počítá s kulatými násobky 1.5 a 0.75 než kdyby se počítalo rovnou s 1.125. Skutečný algoritmus ale závisí na prohlížeči (např. zda používá bilineární, bikubický nebo jiný přepočet).