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.
- 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
Client hints specify several options without URL parameters
Client hints have the same effect as the following parameters:
- q=45 if Save-Data is present
Getting client hints to work
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'
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) )
Lazysizes can automatically calculate the sizes attribute for your responsive images.
<img data-src="image.jpg" data-sizes="auto" class="lazyload" />