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

Home >> Article >> 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.

First consider the article  srcset and sizes, essentially a way to serve responsive images without a whole range of media queries.

Part of this w3c standard is the srcset w attribute. Here we can simply use this srcset w attribute to effectively change the image being served depending on the viewport, display size and defintion of the users device. Heres an example.

<img src="https://ericportis.com/assets/2014-03-24-srcset-sizes/men-in-black/16th.png" srcset="https://ericportis.com/assets/2014-03-24-srcset-sizes/hammering/8th.png 1280w, https://ericportis.com/assets/2014-03-24-srcset-sizes/yay-peas/half.png 1880w" alt="A rad wolf"/>

http://jsbin.com

What we are doing is serving a small image as the default image (mobile first) and then, depending on the available width where the image will be placed, we serve the next image up. So in the example above, the image changes as we change our viewport. So on my Mac Book Pro, the image changes when the viewport is 640px, which means that the w property has automaically multiplied by my screens 'multiplier' and assumes that I will be displaying that image at an optimal level and that at 1280w or where the available viewport is 640px on a retina,  I should displaying a different image from the default.
 

Combining with the picture tag

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:

<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="https://attiks.com/sites/attiks.com/files/styles/w100/public/projects/breadgarden_2.jpg 100w, https://attiks.com/sites/attiks.com/files/styles/w200/public/projects/breadgarden_2.jpg 200w, https://attiks.com/sites/attiks.com/files/styles/w300/public/projects/breadgarden_2.jpg 300w, https://attiks.com/sites/attiks.com/files/styles/w400/public/projects/breadgarden_2.jpg 400w, https://attiks.com/sites/attiks.com/files/styles/w500/public/projects/breadgarden_2.jpg 500w, https://attiks.com/sites/attiks.com/files/styles/w600/public/projects/breadgarden_2.jpg 600w, https://attiks.com/sites/attiks.com/files/styles/w700/public/projects/breadgarden_2.jpg 700w, https://attiks.com/sites/attiks.com/files/styles/w800/public/projects/breadgarden_2.jpg 800w, https://attiks.com/sites/attiks.com/files/styles/w900/public/projects/breadgarden_2.jpg 900w, https://attiks.com/sites/attiks.com/files/styles/w1000/public/projects/breadgarden_2.jpg 1000w, https://attiks.com/sites/attiks.com/files/styles/w1200/public/projects/breadgarden_2.jpg 1200w, https://attiks.com/sites/attiks.com/files/styles/w1400/public/projects/breadgarden_2.jpg 1400w, https://attiks.com/sites/attiks.com/files/styles/w1600/public/projects/breadgarden_2.jpg 1600w, https://attiks.com/sites/attiks.com/files/styles/w1800/public/projects/breadgarden_2.jpg 1800w, https://attiks.com/sites/attiks.com/files/styles/w2000/public/projects/breadgarden_2.jpg 2000w" sizes="(min-width: 80em) 424px,  (min-width: 30em) 40vw,  50vw">
<!--[if IE 9]></video><![endif]-->
<img alt="" title="" src="https://attiks.com/sites/attiks.com/files/styles/w900/public/projects/breadgarden_2.jpg">
</picture>
 

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.

Add new comment

By submitting this form, you accept the Mollom privacy policy.