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.

• 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.