Using Responsive Images

The Widget Framework has the ability to switch image representations to suit the available space on different devices and in different browser window sizes.

This functionality is provided by:

• A tag in the Widget Framework Core Tag Library, wf-core:image that generates the required HTML markup.

• Javascript code for determining which image representation image is required. Two different methods are available:

  adaptive

  This is the default method. It calculates which image representation to load based on the img element width.

  picturefill

  This is a slightly simpler method based on a Javascript library called picturefill.js (see https://github.com/scottjehl/picturefill). Inspired by the proposed HTML picture element (see Responsive Images Community Group), this library uses a set of viewport breakpoints to select an appropriately sized image for the current device/browser window size. The picturefill.js library shipped with the Widget Framework is modified slightly to provide better support for the wf-core:image tag.