← back to the writings

Get on the train

Posted on January 3rd, 2016 by Graeme

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, what if the very same thing used to engage users was actually ruining their experience and pushing them away? We need to think about how images are contributing to the user experience as a whole, where the product could work in different ways depending on the device it is consumed from, with each device bringing different situations and limitations.

Image use on Medium

medium logoAs an example, lets look at the the number of network requests made to load the medium homepage this morning:

medium network requests screenshot

You can see in the developer tools network tab ( the right hand side of the image above) that 100 requests are made in total. Looking at the type of those resources, it's evident that the majority are images. To get a more accurate picture, clicking the image filter in dev tools allows us to filter all those requests to just show image requests:

medium screenshot of network requests

Upon doing so, we can see that 71 of the 101 network requests are in fact images, that's about 70%! And this is for a site that focuses on written content.

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

Now, 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. Clearly images are an essential part of content, so we need to think of ways in which we can download these images efficiently so the user has the same intended content experience on a mobile phone on the move, as on a desktop screen in an office.

Evidently, one way to do this is to reduce the size of the images - Medium has actually done this well as each image is very small in byte size, 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.

Find out more

If you want to learn more about performance, check out my previous article:

A lot of the concepts in this article were from my notes about responsive images from the following Udacity course:

Have any thoughts?