Responsive images on the web

DevToolsGuy / Tuesday, March 8, 2016

According to http archive, the top 100 websites on the Internet today look something like this:

That’s right, exactly two thirds of websites in November 2015 are dominated by images. Website sizes are getting ever more bloated, and this can lead to slow load times and a poor UX, especially on mobile devices.

However, as we all know, a ‘picture paints a thousand words’ and clients are very keen on having image rich pages on their websites, regardless of the device used to view them. They understand that customers won’t read every word of text on their website, but images can create a far bigger impact in terms of perception and understanding of their brand. Naturally, they want those images to look great, run fast and fit to the parameters of any device.

So, images are getting ever more popular, yet they can damage User Experience. Responsive images are the solution here, and can play a big role in overcoming slow load times. However, as useful as they are, responsive images aren’t the easiest thing to implement. There are numerous methods of deploying them, yet each has its own limits and drawbacks.

There’s been a lot said about how to implement responsive images (see detailed guides here, here and here). Today we’re going to overview responsive web design more generally, and think about the kinds of questions you need to ask when selecting your method.

The basic approach

The basic approach to making an image responsive is to set its maximum width at 100%. This means your image will always fit to the container around it and won’t ever exceed it either. This works for basic pages, yet if you have a number of different elements working together, you’ll soon run into problems. Other factors to take into account include:

Performance and bandwidth

The principal drawback of the ‘basic’ solution is that every device receives the same image. This is OK if your site is populated by small logos or images. However, if you’re using big pictures, sending these to devices which are connecting over limited mobile data connections will hold up load times considerably.

Art Direction

A second drawback with the ‘basic’ approach is that while images will fit on any device, they may lose their impact or power on each. The city vista or mountain view that looks great on a landscape desktop screen may look muddled or out of place on a smartphone. The message it’s trying to convey might be lost; you may prefer the mobile screen version to ‘zoom in’ on a certain aspect of the website image.

So, how can you overcome these issues with the basic approach?

Questions to ask

Before delving into solutions, you first need to decide which issue you want to solve. There are a range of solutions to the responsive image problem that have been proposed. However, each has its own specific strengths and limits. Some will help with certain issues; others will be stronger on others. It’s most important here to understand what your client is looking for; this should inform the solution you choose.

Is the problem one with art direction?
Does the client have a huge website where they want every image to become responsive?
Should all images load, or should they load dynamically via JavaScript?
Is testing the user’s bandwidth a priority - so you can see whether their connection can handle high-res images?
Can you make use of a third party solution, or do you need to keep is hosted in-house?

There are a lot of solutions out there that have been created to respond to the responsive design dilemma. The following are some of the most exciting solutions that have been developed:

1. PictureFill

PictureFill offers a very simple script that displays adaptive images at page loading time. It does require some JavaScript markup and doesn’t do any bandwidth detection, however.

2. HiSRC

A jQuery plugin that lets you create low, medium and high-res versions of an image. The script detects network speed and retina-readiness to show the most appropriate version. You will need to be using jQuery however, and it requires customer markup in the HTML.

3. Adaptive Images

Adaptive Images is a largely server-side solution. You’ll need to install it (which can take a good while). However, once installed and configured, the PHP script will resize any image for you. It doesn’t, however, detect bandwidth and doesn’t solve art-direction problems.