Adaptive images with OpenWGA

Until some years ago it was usual and normal that a website would be given to every user in identical form. All received the same layout, the same content and identical images. This has changed especially with the rise of mobile devices like smart phones and tablets. Because of the varying screen sizes it is now common to serve an optimized version of a website for every device.

Responsive design

With "responsive designs" there now is a broadly accepted technique to solve this problem at least partially. With it the web designer defines differing style sheets for differing screen sizes or screen resolutions and the browser of the device uses the style which is best-suited.

OpenWGA supports responsive designs with its "Basic Website Kit". Websites that are created using the kit are automatically "responsive" and adapt their layout dynamically to the current screen and window sizes respectively.

Responsive (adaptive) images

However, adapting the layout to the available screen size is only half the trick. The contents that get delivered are still the same for every device. They are only displayed in adapted layouts.

This especially is problematic regarding the images of a website. All devices receive the same images, even when the device is not able to display it in the delivered detail. This ultimately is a waste of network bandwidth and especially dissatisfying when the website is to be loaded via mobile network which may be slow and potentially expensive to use. Because of this it is desirable to not give every user the same images.

Another motivation for adapting images to devices are high resolution screens. Modern screens have a high pixel density and are able to display high resolution images in "print quality" detail. If a website wants to support these displays, like the "Retina" displays that are used on Apples recent iPhones and iPads, it needs to provide website images in maximum available quality. But as not every screen today supports these high pixel density most of the users receive images that are much too large.

How does OpenWGA support adaptive Images?

A necessary requirement for serving differing image variants in differing situations is the availability of those image variants. OpenWGA satisfies this requirement: For every image that is added to the CMS multiple variants in varying sizes are created by OpenWGA. This happens in the background, completely transparent to the author.

OpenWGA Image Derivates

OpenWGA not only generates image variants ("derivates") automatically, it also offers a way to express what variant to use. This is either done on the <tml:image> tag for a single picture or on the <tml:range> tag for all images inside a certain range of the page, for example on a small teaser column to the right. Both tags offer an attribute that is used to determine the desired size of the image. On publishing the page OpenWGA automatically selects the smallest available image variant that is still larger than the determined size.

Using this technique it is possible to deliver images of differing sizes dependent on their position on the page and the available place there. This process is completely transparent to the author.

HTML extension "srcset"

Multiple extensions to the HTML standards are currently in discussion to offer solutions for the use cases of adaptive images. One promising extension is a new "srcset" attribute on the HTML <img> tag. The srcset attribute receives a comma-separated list of URLs to available images together with a "usage determination". Such a usage determination may be a certain pixel density:

<img src=„default.jpg“ srcset=„default.jpg 1x, large.jpg 2x“>

The terms 1x and 2x determine the "device pixel ratio", the pixel density of the display actually, on which the website is displayed.

OpenWGA generates the srcset attribute automatically since version 6.3.1 for all <tml:image> tags with derivate determination. Additionally the content management module "Image" also creates the srcset attribute without any action needed by author or designer.

HTTP client hints

A different approach discussed by browser developers is based on an extension of the HTTP protocol. It uses additional HTTP headers to let the browser tell the server about the pixel ratio of the used display on every request. The server then decides the resolution in which images are served.

OpenWGA supports "client hints" when they are provided by browsers. It multiplies the desired size of images, like it is determined in design, by the device pixel ratio given by the client.