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
- viewport being displayed at
- width of image being displayed relative to viewport
- 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"/>
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>
Alternative to picturefill module
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.
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>
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.
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.