Responsive Images, Retina Displays and srcset sizes v's multipliers

If you have a website the chances are you probably have some images or photos to break up your text or help to convey a message or story etc. Well if your website has been created fairly recently, chances are that your site responds to different viewports.

For example many websites today may display more columns on a wider viewport, and we might have a full screen image for desktop that is displayed at a fraction of the size for say mobile or tablet. Not to forget wider viewports where actually the image displayed may be viewable at a much larger, (possibly smaller depending on the design) size.

PPI Pixels Per Inch increasing

The serving of images is complicated further by the support for high definition or retina displays. This was pioneered in part by Apple who introduced the iphone 4 with support for retina which effectively doubles the viewport dimensions and therefore roughly increases by a factor of 4 the size of the image in pixels.

Well things have moved on from the iphone 4 and for example the iphone 6 plus offers x3 normal or traditional definition (previously (~72-96 dpi) whreas other devices such as Google Nexus 6 offers support for xxxhdpi or in layman's terms x 4 muliplier.

Therefore of you have alot of images on your site and are interested in the users best experience there are many considerations. Here are few

1. viewport being displayed at
2. width of image being displayed relative to viewport
3. definition or resolution of support.

The definition is important because if we serve a normal image to a retina or higher definition display, we may not be making the best experience for the device. On the contrary the image may actually look worse than say on a traditional definition device and even look blurry, out of focus and any image artefacts more prominent and noticable.

Being a drupal afficianado, one approach for serving images was to use the adaptive images module that works with drupals built in image styles module and allowed for your images to be responsive, In other words using a combination of media queries we can serve an image that is suitable for your viewport.

This in turn was suceeded by the picture module, which in turn is a drupal 7 backport of the forthcoming responsive image module that will be bundled with core drupal 8 when it is eventually released.

Here's where things get interesting. It appears that using media queries to serve images can get quite complicated especially if you are serving a variety of devices at different viewports and resolutions.

So another approach is to use multipliers in combination on the w3c recommended picture elelment in combination with srcset mulipliers. Also to support IE9, IE9 has a little conflict to work around. To support IE9, you will need to wrap a video element around the source elements in your picture tag. You can do this using conditional comments, like so:

<picture>
	<!--[if IE 9]><video style="display: none;"><![endif]-->
	<source srcset="examples/images/large.jpg, examples/images/extralarge.jpg 2x" media="(min-width: 800px)">
	<!--[if IE 9]></video><![endif]-->
	<img srcset="examples/images/small.jpg, examples/images/medium.jpg 2x" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
</picture>

This alternative is advocated by the authors of the picture fill modules 1 and 2 branches. The picture element and associated features are W3C standard HTML features that allow web developers to deliver an appropriate image to every user depending on a variety of conditions like screen size, viewport size, screen resolution, and more. Picturefill is a JavaScript file (or a polyfill to be more specific) that enables support for the picture element and associated features in browsers that do not yet support them, so you can start using them today!

Alternative to picturefill module

Ok so the Drupal 7 Picture module works with the picture fill javascript library to provide legacy support for the picture element that the module relies on. Howver there are alternatives that seem to provide support for the srset sizes w desciptor. It is worth mentioning this should be used as an alternative to the multiplier and not in combination.

One alternative is the responsive Images library that provides support for srcset sizes and the w attribute tha t can be used on a image tag.

https://github.com/aFarkas/respimage

Demo here http://codepen.io/aFarkas/pen/KwKdpY

So in order to provide support for retina displays and responsive images for each image you may end up with something like this in your markup:

https://attiks.com

Browser support

We do not yet have full browser support for srcset w, but it is not far away with only Safari and Internet Explorer lacking. It looks like Safari support is just around the corner (already supported in nightly build). Howver we have at least one polyfill that can be used to provide support for older browsers.

One thing I did notice is that different browsers behave slightly differently, with Firefox only working if you hard reload the page, i.e. not on resize and Chrome upsampling images but not downsizing, so for example it you make your screen bigger the image size will increase, but if you make it smaller and you have already loaded the image it will not substitute the smaller image.

Conclusion

So going forward, thinking about Drupal 8, responsive images  and support for retina or higher definition displays, it seems that Drupal developers have a new tool in their box to simplify and provide the best experience to end users. That said, take up of this new approach to responsive images with support for srcset w, is complicated by the need to still support legacy devices that we can still target using media queries, unless we simply want to just supply a default (proably smaller) image to these legacy devices as a fallback. 

For the widest user support, the use of srcset sizes in combination with the w3c recommended picture element seems like the way to go.