Author

Powered By

  • OpenWGA Blogs 2.4.1 Build 131
    Running on:
    womodo CMS Server 7.4.5 Maintenance Release (Build 663)
    www.openwga.com

Adaptive images with OpenWGA 6.3

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.

Use cases for "adaptive images"

On the whole there are three use cases for "adaptive images" - reasons to serve varying images under varying conditions.

Case 1 - Screen size

Depending on the available space on a pages chosen responsive layout smaller or larger variants of an image should be delivered.

Case 2 - Screen resolution

High resolution displays should receive higher quality pictures than displays with lower resolutions.

Case 3 - Art direction

Depending on the current screen width (and height) completely different images should be delivered, for example with differing size ratios or to display only a subsection of an image if the available space is too small.

While in case 1 and 2 we deliver the same image in differing variants, with the clipping and ratio staying the same, the third case serves completely different images depending on the display.

What is possible today?

First it should be clear that a necessary requirement for serving differing images variants in differing situations is the availability of those image variants. Of course you can leave the creation of variants to the website author, and regarding case 3 this is actually the only way. In reality however this frequently is asked too much of authors. In any case a manual process increases the effort for creating websites tremendously. If images will also be be uploaded by website users (user generated content) control of this task is extra problematic. So it is desirable that the CMS which is used to build the website automatically creates and manages variants for every uploaded image in differing sizes.

OpenWGA 6.3 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.

Another requirement for solving the problem is to somehow express, what image is to be used in which situation.

OpenWGA Image Derivates

OpenWGA 6.3 not only generates image variants automatically ("derivates"), 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 already possible today 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 extensions

Multiple extensions to the HTML standards are currently in discussion to offer solutions for all three use cases of adaptive images. One of these is a new HTML tag <picture> that currently however is not yet supported by any browser. Another 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.

The browser decides on its own which of the given images is loaded and displayed. In the example above a browser running on a device with retina display would load image "large.jpg", while other browsers would load "default.jpg".

The new HTML srcset attribute with the usage determination "device pixel ratio" is already supported by Google Chrome. Other browsers will most likely follow. In Safari it is already implemented in its "Nightly builds". An implementation for Mozilla Firefox is under way.

OpenWGA generates the srcset attribute with usage determination "device pixel ratio" 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.

Currently only Google Chrome supports these so called "client hints", and does so only if they are explicitly activated in the browsers settings. If client hints will really be supported by browsers in the future is unclear right now.

OpenWGA already supports those "client hints" today 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.

Summary

The use cases "image choice based on available space" and "image choice based on the screen resolution of the device" are already supported "out of the box" by OpenWGA today. OpenWGA generates the srcset attribute automatically and it also processes client hints sent via HTTP to adapt image sizes accordingly.

So today we already have Google Chrome - and other browsers in the near future - displaying optimized images for retina displays on OpenWGA sites without wasting bandwidth for other devices.

By determining desired sizes in the design OpenWGA already today is able to deliver image variants matching the available space on the website. This not only saves bandwidth and speeds up websites, it also frees authors from the task of coping with image sizes.

Comments:

pingback from wolfgang.schmidetzki.net 2014/05/11 13:23

Wolfgang.Schmidetzki.Net: Adaptive/Responsive Images

pingback from www.openwga.com:443 2014/09/14 22:56

OpenWGA Blog: FireFox 32 supports img attribute srcset

local pingback from OpenWGA Blog 2014/09/21 01:13

iOS8 and Safari 7.1 supports img attribute srcset

Enter Your Comment:

use markdown syntax