What are responsive images?
Once upon a time, in the distant past of dial-up modems, there were two image formats used on the web: the .jpg and everbody’s favourite, the .gif. To use them on the web, so that your clients could view them on their Netscape Navigators, you had to would open them in Adobe Photoshop, resize and compress them to get the files as small as possible.
If you didn’t, your clients would be left, as Kevin Bacon would say, with their “buffer face on”. Slowly, bit by bit, the image would appear, and sometimes people even had the patience to watch it all download.
Then the internet got faster, and file size didn’t matter so much. Giant images blossomed across homepage banners. We demanded more, we wanted high-resolution, and Apple fans started talking about “retina” images (which are exactly the same as hi-res but with a cool Apple name thought up by marketing bods).
While this was happening, we started to use mobile phones to browse the internet. That started with sites that were developed on WML, “wireless markup language”. I for one am extremely I learnt that, as it was promptly ditched in favour of mobile-specific sites, which had less text and smaller images.
Eventually, mobile-only sites also became unfashionable. Having a mobile-specific site as well as a desktop-specific site meant maintaining two websites at once, which was a headache for webmasters, but it also divided traffic flow and statistics. And so, with a sigh of relief at how easy life was getting, we turned to responsive website design.
What’s responsive web design?
Put simply, responsive website design is an approach that enables your website to fluidly adjust within the parameters of any device. You would use the same content for mobiles as you would for your desktop “retina” displays. Shrink your images down, hide some content and add a snazzy dropdown menu, and you have a version of your site that looks great on a mobile.
The main problem with this is that you see the same retina image (with corresponding big file size) on your desktop as on your mobile phone. So it’d look impressive and work well when you are on wifi, but if you’re browsing in the middle of Bute Park… not so great.
Quite a few people thought this was somewhat less than optimal, so the bods who developed HTML 5 thought up some cool ways of improving things.
Introducing the HTML 5 img srcset Attribute
(What’s HTML 5? Better. Yes, that’s a very clever lie that stops us from needing to explain the history of markup languages as well as the history of images. Just trust us on this one.)
The srcset attribute is a new attribute for the element. It allows you to specify different images for different monitor widths (viewport) and pixel densities – so you solve the problem of people moving between wifi and mobile internet. If you use srcset, you don’t have to worry about whether your images will download easily: the user’s browser decides if it is a high-resolution device and therefore uses the high-resolution image, or whether it needs to choose use the lower resolution images instead.
The best part is that if the user is using an old browser that does not support srcset, it doesn’t break your site: the older browser just uses the normal src attribute and ignores the srcset attribute – everybody wins.
The srcset attribute lists image URLs and the conditions under which to display that image. The conditionals could be pixel density or viewport size.
You can use pixel density as a condition
<img src="creo-logo.jpg" srcset="creo-logo-small.jpg 1x, creo-logo-large.jpg 2x">
In this example creo-logo-small.jpg 1x will be used on a standard monitor (one device pixel per CSS pixels displays). On a high pixel density “Retina” display the browser would choose to use the 2x (2 device pixels per CSS pixel) image file.
The example below uses the viewport size to set which image is used.
<img src=”creo-logo-medium.jpg” srcset =" creo-logo-large.jpg 1920w, creo-logo-medium.jpg 960w, creo-logo-small.jpg 480w">
The picture tag
The picture element looks like
<picture> <source media="(min-width: 650px)" srcset="images/creo-logo-large.png"> <source media="(min-width: 465px)" srcset="images/creo-logo-small.png"> <img src="images/creo logo.png" alt="creo logo"> </picture>
So should we be using srcset everywhere?
Yep. With the advent of auto-updating browsers I see little reason not to use srcset in modern web development. The same can be said of the picture element, although it works well with the polyfill.
Of course, doing so potentially comes at the cost of doubling (or even tripling) the number of image files in a site, which might be a headache for a webmaster. To keep things simple, I’d suggest starting with banner and hero images, given that these are usually the largest and most visually impressive features on a site, and would likely benefit most from the attention from your users – whether they’re on computers, or lounging around checking their phones in the park.