A Better UX Across Devices – using srcset for beautiful design

Developing a site recently for the wonderful folks over at The Ram Inn at Firle, near Lewes, East Sussex raised some interesting technical dilemmas that needed solving.

The most pressing was images. This beautiful Inn had invested significantly not just in the stunning decor of their rooms but the photography to show it off. A website that failed to give the photography the space and attention it needed would have been a failure.

The site designs therefore utilised these large, wide letterbox style spaces for the photography to sit within. This was perfect, but it presented the challenge of ensuring that the images were displayed well without the site being sluggish. As much as we want to show off this lovely location, we also don’t want users to have to wait ages to see it.

Thankfully we’ve got some brilliant images tools at our disposal, most notably kraken.io which in my tests was the best tool for stripping as much filesize away from images without compromising too much on quality and detail.

I tested the site having optimised all the images, but I was still seeing slow load times and low pagespeed scores, particularly on mobile.

On mobiles and tablets, we were still loading 2700px wide images. This is obviously crazy, most phones are no wider than about 600px, we’re wasting a lot of filesize.

Testing on a mobile also presented me with another common problem. Whilst on a desktop, landscape screen, letterbox style imagery looks fantastic. It utilises the space of the screen very well – but not so much on a mobile. Mobiles are mostly viewed portrait, so those wide letterbox images become so short in order to fit on the screen, they’re very small and we lose most of the the focus and detail in the image.

Some devs might shrug their shoulders and leave it, but at Neptik we think it’s critical to make sure our sites work beautifully, for everyone – especially those on a mobile!

Both of these dilemmas were solved by using the srcset attribute on the img tag. This solution allows for responsive images – in other words, we can load in an entirely different image depending on screensize.

I’ve previously used the picture element for responsive images, however, picture is better intended for art direction. For simply loading in a different size image, srcset would do the job beautifully.

This attribute works as follows, courtesy of this image from this excellent article on srcset.

The numbers after each image source refer to the width, in pixels, of the image itself. So, if your first image is 160px wide, the source should be followed by “160w”. You can also use pixel density values to load in different pixel quality images.

So in my case, I wanted to load a large image for those big desktop screens, a smaller image for more traditional sized desktops, and a smaller still image for mobiles and tablets. I could have taken it further, but I didn’t want to create too many crops and I felt the three sizes would cover what I needed.

My image elements then were as follows:

Please excuse the dumb naming of one of my crops to “medium_large” – I couldn’t tell you where this crop came from but it fitted what I needed very well.

Ok – so we have loaded in our different image sizes, but how do we choose which one to display and when? Simply, we don’t. The magic of srcset is that the ultimate decision as to which image to actually display, is made by the browser. All you do is supply the browser with a list of images (and their widths) to choose from, and the browser then chooses the most appropriate image to display.

If you want full control over which image to display and when, you’ll need to look at the element. But it comes with a warning, without the picturefill.js polyfill, it won’t work at all in Internet Explorer and some older browsers. Implementation is a little more tricky too, so for most use cases, srcset does a pretty spot on job.

For a more in-depth developer guide to srcset, try this excellent Mozilla resource.