Using responsive images
Images are a massive part of the internet. Traditionally adding images to a web page was simple. We would use the image element and set a source, height and width. It would then display at those sizes, regardless of the device or screen size you were displaying it on.
In 2011 responsive web design started to become mainstream. Responsive web design allows people to receive an optimised browsing experience, regardless of screen size and device. This means we can no longer dictate the size of an image but instead, we must allow it to resize to fit the available space on the screen.
What’s the problem with images?
When adding images to a responsive website we need to upload the largest size it will be displayed. For example, if the image is 200px wide on a desktop, we need to upload an image that size. If we consider retina displays this image could be twice that size again.
In the example below, the same image is used regardless of screen size. The means that mobiles, tablets and computers download a 2000px wide image. This creates two issues:
- Smaller devices tend to have a portrait aspect whereas larger ones are landscape. Ideally we would change the aspect ratio of the image to better suit the orientation of the device.
- Optimising the website as much as possible is important to ensure a fast loading time. Mobile users may have slower internet connections, browsing from 3G or worse so ensuring the page is as small as possible is important. Using a 2000px wide image for a device that is 320px wide is unnecessary and heavily impacts performance. In a study by Kissmetrics, 40% of users abandoned a web page that took longer than three seconds to load.
What’s the solution?
For many years web developers were showing different images for different devices by hiding and showing different elements. This method works well visually but unfortunately does not solve performance issues.
Recently two new methods of embedding images on a page were introduced to help solves these issues – srcset attribute and the picture element.
Srcset is an attribute added to the normal image element. It allows you to specify multiple versions of the same image. The browser then chooses the most appropriate image from the sizes specified.
Below is an example an image element using the srcset attribute. In this example we have a small.jpg, medium.jpg, and large.jpg. The value after the image path, for example ‘1024w’, tells the browser the width of that image. The browser then reads this information and makes an intelligent decision on which to use.
When the browser window is growing in size you can see the images change from 320 to 640 and finally 1024. This is the browser selecting the appropriate image for the screen size.
You may notice that when shrinking the window the browser continues to use the largest available size. Why is this? The browser knows a larger image has been downloaded so will continue to use the best quality available before downloading another. It understands that there is no benefit in downloading a lower quality image.
The srcset attribute handles most cases of responsive images where you want to serve the same image just at different sizes. If you want more control over the art direction, changing the aspect ratio at different screen sizes, srcset will not achieve this.
The picture element is another implementation of responsive images. The picture element allows for much more control and flexibility. You can use the picture element to art direct your images, showing different aspect ratios at different screen sizes. This is ideal for banners where you want a portrait image on smaller devices and a landscape one on desktop computers.
Below is an example of the picture element. In this example we are specifying three different images. The smallest image is declared as an image element. This has been intentionally done so older browsers will still display an image, even if they don’t support the newer picture element. Building mobile first this allows the smallest (both in pixel size and file size) to load first. The browser then reads the source element that specifies two larger versions of the image. The media attribute tells the browser to ignore this code unless wider than 20em. If it is, like when using the image srcset, it reads the width and intelligently chooses the most appropriate version to use.
Below shows the Picture element in action. It grows from the smallest image, until the browser exceeds the minimum width of 20em width we specified earlier. At that point the browser then reads the srcset values and determines which is the correct image to display.
Notice that unlike the earlier example, when using the srcset attribute on an image, the browser changes the image for the smaller versions as you decrease the width. This is an important distinction as it allows us to art direct images, using different aspect ratios for different screen sizes. Making the picture element ideal for banners.
How well supported are they?
Both elements have good support when using modern browsers. Microsoft Edge, Chrome and Firefox fully support both srcset and the picture element. Safari supports the srcset attribute but does not yet support the picture element but is planned in their next release, 9.1.
While most modern browsers fully support the technology, most older ones don’t. Luckily built into both the srcset attribute and picture element exists the standard image element that we’ve been using for two decades. This means that you will always have an image display, unfortunately it just might be a low quality version.
WordPress 4.4 added support for responsive images using the Srcset attribute. However by default WordPress won’t put images larger than 1600px in the Srcset attribute, this can be overridden if necessary.
Want to discuss a project?
Talk to our Magento experts on 01785 279920