How we tackled images for responsive web design

Culture · May 4, 2017

Browsing the web on the go is something that we are all familiar with, and this is no exception for Telus customers and users of our website. Around 66% of our traffic is currently accessing our site through mobile browsers on their phones and other devices. Having a website that is optimised for mobile and doesn’t eat a huge chunk of our users’ data plan is crucial.

As you all know, images are crucial in how we consume the web. Typically a website will serve up the same image for any device but will resize that image to the dimensions required for your rendered layout. The problem with this however, is that regardless of what size the image you wish to see on your device, the browser still has to download the largest image size. This means that if you are trying to handle retina quality images for the largest desktop layout, you will end up serving this huge image, and a huge amount of data to a little iPhone 5 that has a 320px maximum width. For instance, a large retina image could be close to a megabyte, so you can imagine a site with ten of those images could easily eat into your 3GB data plan.

Responsive design, is the ability to have a single website that adapts for any screen, whether it is a mobile, tablet or desktop. We do this in a number of ways and using CSS media queries to detect the width of your browser, which serves up the relevant styles for your viewport. 

Having a single website that is intelligent enough to behave appropriately for every device, is crucial when people expect a seamless experience through any means available. TELUS.com has been responsive for the last three and a half years. However, there is one thing that has taken the web development community longer to answer, and that is images.

responsive-design-rollerskate-monkey

Responsive images also allow us to handle cases where serving up a larger image is desired. For instance, devices and screens, such as HD or  4K TV screens that may be browsing the website can support and display larger and higher resolution images. With responsive image technology we are able to display these images so that you get sharp crystal clear resolution.

So what is the answer then? We started looking into available solutions a year ago. There are now native html tags that can be used that support media queries. This means we can serve up the appropriate image size for the appropriate device, without downloading the retina image every time. These tags, the element and attribute are supported in all modern browsers (essentially from IE11 forwards and it’s peers). For older browsers, there are polyfills that do the trick (essentially javascript code that emulates the correct browser behaviour), such as Picturefill.

Here’s a code snippet for those who are web dev savvy: You can see that we have several source tags that get swapped out by the browser depending on the viewport width, using media queries much like in css. It also has the “2x” declarations so we can specify individual retina display images for screens with high resolutions.

For those less technical, what you see below is the code the renders a responsive image. The “picture” element you see that encloses the code is part of the new technology that tells the browser this is a responsive image. The source tags, are also part of this new spec and these contain the details of what path and filename to display for each particular device. If your device has a screen width of 320px and is not retina then we display the mobile image (which is shown on line 7, and if it is retina we display the regular desktop image which is larger and higher quality.

responsive-design-code

So that brought us one step closer to a solution. There was still work to be done however. In order to start using this technology we needed to adapt our processes as there are lots of considerations in how we generate the necessary different image sizes, and then how we deal with the technology side. So, during a code jam, we developed the following: 

  • Sass mixins (these are functions that output css - our page styles, and take in variables)

  • Grunt image resize tasks (grunt is a technology we use to compile our code, and with a grunt task we are able to automate image resizing and image optimisation)

  • An adapted deployment build process - we needed to build responsive images into the deployment process which is getting code compiled, and ready to be deployed into production (the live site)

  • Responsive image angular directives (we use angular in some places which is a javascript platform and so we wrote code that renders responsive images for angular as well)

  • Twig templates (Twig is a PHP templating platform that manages our front end code and we built specific templates or include to handle responsive images, which the code snippet above is part of)

The last piece of that is a built-in image resize tool in our image manager that stores a lot of our images. With all of these tools in place, we are in a great position to give our customers the best browsing experience, regardless of what device you are on. And… we are gradually moving our website across to a new stack that will support all of these tools as part of our ongoing innovation.

Authored by:
Mike Bunce
Mike Bunce
Senior Developer Analyst