Responsive Image Techniques
Posted 30 October 2013
Images are an essential ingredient in a successful website design.
However, as the number of mobile users continues to soar and the average size of a web page rapidly closes in on 2MB, images are also the source of all kinds of problems.
The issue is that whilst high-resolution images look beautiful on larger devices, most users want to be able to access your website on a mobile device or tablet. This is where it starts to get complicated, for 2 primary reasons:
1. Mobile users need images which are displayed correctly on their device.
2. Mobile users need images which load quickly on their device.
Unfortunately, traditional web design techniques are unable to overcome these challenges. Web designers face a choice between uploading images in a lower resolution (unimpressive for desktop website visitors) or a higher resolution (frustrating for mobile visitors).
How Do Responsive Images Work?
The theory behind creating responsive images is very straightforward. By using a variable width functionality, we ensure that the images (and other parts of the site such as menus, logo, content etc) are loaded in a resolution which is proportional to the device used. This means that we get a consistent viewing experience across all devices. This fluid approach underpins much of responsive website design theory.
This means that users viewing your website on an iPhone will experience your images in an appropriate size for their device. It also ensures that those with larger devices and high-speed connections will be impressed by the quality of your high-resolution images. It enables you to engage and win both categories of site visitor.
Responsive Images and Download Speed
However, whilst this addresses the resolution issue, it doesn’t necessarily help us with download speed, particularly if your website makes use of multiple high-resolution images. It’s great that mobile visitors using WiFi can access your content, but what if they’re using a slow or limited connection?
An increasingly popular solution is adaptive design. This means that the website is built with multiple images. The browser is then served an image which is most appropriate for the device. In other words, a desktop browser will generally be using a high-speed connection and cope with downloading a larger image. A mobile browser, which tends to connect at lower speeds, can then download a much smaller image file.
Responsive Images and Image Orientation
This is typically a perfectly adequate solution for most companies. If your website is responsive and images can be downloaded in a suitable format for your device and connection, you’ll be making huge strides in accessibility. At this point you can safely say that site visitors won’t leave your website because of your lack of mobile web design.
However, for companies who want to take things to the next level, the current challenge is addressing image orientation and functionality. This means taking into consideration the purpose of the image on the website and how it should be presented on different devices. Web designers are also developing new ways of cropping images so that mobile viewers can process this information even in lower resolution.
As Responsive Web Design continues to evolve we’re expecting new responsive image techniques to spring forth.
If you’ve got questions about making your website design as accessible as possible then why not contact us today for more information.