Responsive Images – native browser support and WordPress 4.4

Using responsive images means ensuring that the right type and size of image is sent to the browser requesting it. That means not sending a massive image file to a mobile browser that is only going to display it in a tiny window. It also means ensuring that if the user is viewing your site on a big, high resolution display that they don’t end up with something blurry and hard to make out.

Browsers have begun gradually to support [responsive images] natively

It is some time since I last looked at responsive images in detail, during which time browsers have begun gradually to support them natively – without the need for the various javascript workarounds that were required before.

There remain two approaches to the use of responsive images: a new <picture> element (which this site used to use), and new srcset and sizes attributes to extend <img> and <source> elements. A full explanation of the difference, and how they can be used together, can be found on the Responsive Images Community Group site; with more information about use cases in an excellent A List Apart article: Using Responsive Images (Now).

In short, the <picture> element allows for art direction-based selection – you can specify entirely different images to display at different browser sizes and have complete control over the process; the srcset attribute (and associated sizes attribute) lists the pool of source images from which the browser can pick to load depending on the browser environment. They are complimentary technologies – both can be used to ensure that, typically, a mobile browser is sent a smaller file than a desktop browser – and both are being drafted into the HTML 5.1 specification.

All of the leading browsers (and by leading browsers, I mean leading modern browsers, not Internet Explorer) now support the new srcset and sizes attributes, including:

  • Blink / Chrome / Opera
  • WebKit / Safari
  • Mozilla Firefox

One other, Microsoft Edge, has the attribute extensions in development.

The <picture> element is also supported by:

  • Blink / Chrome / Opera
  • Mozilla Firefox

As of iOS 9.3 and OS X 10.11.4 (both currently in beta), it will also be supported by WebKit / Safari. It is currently under consideration by Microsoft Edge.

This site used to use a plugin for converting images to use the <picture> element, but it’s no longer required because the latest edition of WordPress (4.4 at the time of writing) now includes native support for srcset and sizes attributes. This is a distinct improvement: along with the wider browser support it means that there is no longer a requirement to use javascript to deliver the right image or plugins to generate the necessary responsive image code. It also means that it is easy to add other classes (and other markup) to an image without it being lost in any plugin conversion.

So, if you are viewing this page in a relatively modern browser, the image below should vary in file size depending on the width of your browser and resolution of your screen. But it should always look good – as all Sinclair products should.

Photo - Sinclair Spectrum

You’ll get a different version of this image of a Sinclair Spectrum depending on your browser width and screen resolution