OpenWGA 7.0 - OpenWGA Concepts and Features

Design and development » File derivates

File derivates and "Client Hints"

HTTP Client Hints is a new and emerging web standard, currently in draft, which tries to solve a problem that was introduced with modern hi-resolution computer/table/smartphone displays like the Apple Retina.

The resolution of these displays and therefor their pixel density is so high that for most images it does not make sense to use the same pixel-based image sizing on them which is used for other displays. Because of this devices with high-resolution display show images that are intended for regular screens with a device pixel ratio, or short DPR. The DPR denotes how many physical display pixels are used to show a single image pixel. A DPR of 2 says, that to show a 32x32 pixel image the display uses 64x64 screen pixels. To still provide  good display quality the screen interpolates those "multiplied pixels" so that transitions are still smooth and the display not too "blocky".

HTTP Client Hints now is the proposal of a standard by which a webbrowser can tell a website if it has a high-resolution display and what DPR factor it would use to display regular images. The website then can return the most appropriate version of any image back to the webbrowser, telling it if it returned an image optimized for the available screen resolution or a regular image which should be "stretched" and interpolated by DPR.

OpenWGA since Version 6.3 implements experimental support for client hints which is closely connected to the file derivate functionality:

  • If a browser promotes its DPR while asking for a derivate of an image then OpenWGA will multiply eventually specified image sizes by the given DPR. So a derivate query asking for "width~200", queried by a browser with a DPR of 2 will actually ask for "width~400".
  • If there is a derivate matching this size it is returned, telling the browser that the DPR was used to find the right image. The browser then can show this derivate without interpolating.
  • If there is no appropriate derivate of that multiplied size a derivate of the unmultipied size is queries. This is returned, if available, but the browser needs to "stretch" the image.
For this to work however you need a browser that actually reports its "client hints" to the server. At the time of writing of this documentation this was only Google Chrome, either via launch parameter "--enable-client-hints" or via addon "Client Hints".