Client hints are headers that the browser sends to servers that request additional runtime information from a browser. These hints allow the server to provide alternate resources based on client capabilities. Currently the below client hints can be taken into account by Peakhour when transforming images.
- DPR
- Width
- Save Data
Implementing client hints
Client hints may be implemented either by a tag or the corresponding server header Accept-CH. If Peakhour see's that a client hint is provided by a client, we assume that the hints are wanted by the developer and are taken into consideration when transforming images.
- Meta Tag in
<meta http-equiv="Accept-CH" content="DPR, Width, Viewport-Width">
- Server header
Accept-CH: DPR,Width,Device-Memory,Content-DPR,Downlink,ECT,Save-DataViewport-Width,rtt
Client hints specify several options without URL parameters
Client hints have the same effect as the following parameters:
- W
- DPR
- q=45 if Save-Data is present
Getting client hints to work
Sizes
The sizes attribute on an specifies the size an image should be according to a set
of media conditions.
<img sizes="100vw" src="/images/sample.jpg"/>
100vw tells the browser to assume the image fills the entire browser width. vw means 'viewport width'
Media Conditions
A media condition is not exactly a media query. It is part of a media query. It doesn’t allow us to specify media types, e.g. screen or print, but accepts the condition we usually add to a media type.
A valid media condition can be either -
A plain media condition, e.g. (min-width: 900px)
A “not” media condition, e.g. ( not (orientation: landscape) )
An “and” media condition, e.g. (orientation: landscape) and (min-width: 900px)
An “or” media condition, e.g. ( (orientation: portrait) or (max-width: 500px) )
Automating
lazysizes
https://github.com/aFarkas/lazysizes
Lazysizes can automatically calculate the sizes attribute for your responsive images.
<img data-src="image.jpg" data-sizes="auto" class="lazyload" />