Try opening any webpage, and you’ll find that more often than not, the majority of network requests made to load that page are just for images.

In fact on average, over 60% of the bytes downloaded to show a webpage are made up of images (excluding videos). That’s because images are an important part of content – enriching our experience of the web and engaging users.

However, we also need to consider how images are contributing to user experience as a whole, where the product could work in different ways depending on the device it is consumed from. This is because each device brings with it different contexts and limitations.

70% of Medium.com’s network requests are for images

As an example, lets look at the the number of network requests made to load the Medium homepage this morning through Chrome Dev Tools:

medium screenshot of network requests

You can see there are 101 requests are made in total.
71 of the 101 network requests are for images, that’s about 70%!

Thinking responsively for images

Great designers don’t optimise for mobile, they think responsively across all devices. –Sam Dutton, Developer Advocate at Google

Get on the train

Imagine being on a train on a limited 3g connection – you can barely get any signal to download the webpage, and you’re restricted to the bandwidth available – in this situation, how important are images?

In my opinion, images are an essential part of content, so we need to think of ways in which we can download these images efficiently, so that the user has the same content experience on the move, as they would on a desktop screen in an office.

One way we could do this is by reducing the size of the images – Medium has actually done this well, as each of their images are a small number of bytes, with only 1.4mb being transferred for all those requests.

Think across devices

Don’t only think mobile first, think completely responsively. Thinking responsively across all devices enables us to make use of images more effectively. For example, it brings us to consider:

the hardware and screen we’re working with – the DIP ratio differs across devices
whether the screen is landscape or portrait mode, or whether it can be both
the bandwidth available to the device
the person viewing the website – are they visually impaired? If so how can we make the images accessible to them.

In the responsive images course on Udacity, Sam Dutton pointed out this great quote by Brian Fling, author of Mobile Design and Development:

“Create a product, don’t reimagine one for small screens. Great mobile products are created, never ported.”

We’re not optimising a site to work on a mobile, mobile is simply part of the overall product, as is desktop and any other device. Therefore, by tackling problems that exist on mobile, we are only optimising our desktop solution. If it loads fast on a mobile where there are greater constraints, it will only be better on a desktop where those constraints are lifted.

Round trips

Going back to the mobile phone on a train journey scenario, it matters little if the total page size is small in terms of data transferred. For instance, even though only 1.4mb of data was transferred by medium.com in the example at the start, there was a total of 71 image requests. That means the browser had to do quite a few round trips to the server to fetch those images, and those round trips are actually one of the biggest factors for slow load times on mobiles.

This is because there is a delay between requests and responses from the server – known as latency. Every time the browser asks for an image from the server (a request), there can be delays in the response for unpredictable reasons which has created a new bottleneck for websites. We’re getting good at compressing the images, but reducing latency is a newer challenge being tackled by HTTP/2 which will make multiple requests less costly.

For now though, as well as keeping image size low, we need to limit the number of requests, which does actually help you consider if the image is actually an essential part of your design as one way to decrease image requests is by removing images altogether.

Do you really need the image?

Overall, it’s important to consider where images are necessary, and where they can be replaced. Use of space, layout and typography can create striking visual appearance alone. Furthermore, with the use of CSS effects, we can create visually appealing websites with extremely fast load times, resulting in a better user experience overall.

Performance is a big a part of UX as anything else – if your page is slow and can’t even be loaded then it’s not a good experience to start with.

Get on the train: Images — good or bad for UX?

Cool stuff, every week

More Articles