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.

  1. Meta Tag in 
<meta http-equiv="Accept-CH" content="DPR, Width, Viewport-Width">
  1. 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" />