What is the optimal image size for your website? Here’s how to do the math

Kyle HenwoodWeb Development7 Comments

what is the optimal image size for your website? Here's how to do the math

As designers and developers, we want the images on our website to be of the highest quality and appear crystal clear every time for the end user, regardless of device. Being in the Real User Monitoring space, we often get questions around what the optimal image size for your website is. The ultimate aim here is to ensure that image quality and load times remain consistent for our end user regardless of device.

So, it makes sense to start with your end users, right?

How to make sure you create the optimal image size for your website

Achieving the best image size is actually hard to get right if we focus on size alone. As you know, the same image can load at different speeds depending on many variables. Although, as web professionals, we want to present our very best images, Nadav Soferman writing for Smashing Magazine says that “delivering the highest image resolution to all users” is a mistake.

He says:

“Website owners want their site to look perfect on modern high-resolution devices. Often developers deliver the same hi-res version of each image to everyone: all device resolutions, browser window dimensions and device pixel ratios (DPR).

Nadav Soferman

So, rather than just throwing out an arbitrary value and saying it’s too large for an image, I want to go into more detail. In fact, you can create these values for yourself using your customer’s bandwidth as a benchmark for the optimal image size for your website.

This way, you are guaranteed to give your end users the best possible experience on every device.

How to discover ideal image size using bandwidth

The first step is always to compress / gzip / and run images through your usual optimization process before using them online. Sacrificing a little quality for an image ¼ the size is definitely worth it in the long run!

At Raygun, we believe optimizing for bandwidth instead of image size makes your website more consistent for end users and gives you a chance to measure customer experience with more accuracy.

However after optimization, your images could still be loading slowly for certain users, which brings us to bandwidth. There’s no point having a webpage that has megabytes of images when your target audience is on a 2G connection. Optimizing load times for all visitors, regardless of connection speed, is good practice. Each and every website’s audience is different, therefore, one size doesn’t fit all. First, understand your audience, then optimize.

So, let’s do the math

Most articles agree that a load time of 3 seconds is too long, so let’s aim for a load time of ~3s.

I’m just going to use the speeds offered by Google Chrome’s network throttling options for variety:

  • 2g: 0.25mbs
  • 4g: 4mbs
  • Dsl: 2mbs
  • Wifi: 30mbs

What's the optimum image size for your website

Now we’ve got the speeds. Next, we have to find a general page size to get the optimal image size for your website.

In 2015 the average page size was 2.3mb, a 16% increase from 2014. Following that trend it’s safe to say the average page size for 2016/17 would be around 2.7 – 3mb.

Continuing with averages, the percentage of images on each page has also increased at a large rate, ending at 64% of total page size being comprised of images in 2015, for 2016/17.

I’m going to bump that number to 70%, as the number year on year has been growing steadily. Comparing load speeds with the average page size allows us to paint a picture of general targets to aim for when looking at the total filesize available to be allocated for images – to a point.

Based on the growing rate of page sizes, and the percentage of each page that are images, we can calculate how much bandwidth we have available. This will apply to different users on certain connections (with the limit of three seconds load time).

This allows users with a high speed connection to download sites super fast. This increases the amount they can download in three seconds.

Therefore, to counter this we’re going to limit pages to a maximum size of 3mb.

(Note: The time taken isn’t taking into account request delays (TTFB), which differ dependending on the connection type.)

Time to download 3mb by connection

 

Users on slow connections will continue to have slow experiences unless you cater for them. Take time to understand your audience here.

Based on our calculations we can break down how much each connection type can download in 3 seconds:

  • 2g = 0.75mb / 3s
  • 4g = 12mb / 3s
  • DSL = 6mb / 3s
  • Wifi = 63mb / 3s

optimum image size for your website

What this means
If your users are on a slow connection, pages can’t be very large if you want them to load in sub three seconds. Given that our page limit is only 3mb in size, we have a fair amount of room to move on some of these connection speeds. However our goal is to keep the load time as short as possible, so I’m sticking with the 3mb limit. If your audience aren’t stuck on a slow connection, you could look at raising that bar.

Page size limits based on connections

 

The only affected connection is the 2G connection. If your customers were on this connection, to make the page load in under 3 seconds, you’d be looking at reducing the total page size to 0.75mb in that case 0.525mb (525kb) of images in total.

In conclusion, know your users!

We can use the above calculations as a guide to cater to your end user’s bandwidth. This gives you a much more accurate approach to improving page load speed with image optimization alone. The optimal image size for your website will change based on your needs, and over time.

At the end of the day, the more you understand your end users and how they are using your applications, the better the experience you can provide! No need for large images sizes to slow down your website.

Find out exactly where your end users are, their connection speeds and which images are slowing down your pages with the Raygun Software Intelligence Platform – you can take a free trial here.

Next level software intelligence across your entire stack.

7 Comments on “What is the optimal image size for your website? Here’s how to do the math”

  1. Duke Vukadinovic

    One of the hacks that I used over all those years is that I used the tag to adjust width or height of the image, not both. This allowed me to always keep the same ratio because specifying both width and height attributes could distort the image being displayed.

    1. Kyle Henwood

      Thanks for the comment Duke!
      The method you mentioned works great for resizing images and keeping their aspect ratio.
      What I tried to cover here was image file-size rather than actual size, even though they can be closely intertwined.

  2. Pingback: Creating a lightweight CSS and SVG animation without JavaScript

  3. Pingback: Announcing the Compare feature for Real User Monitoring

  4. sujan

    Thanks for the article Kyle. I searched around the internet for this particular article because my website http://www.fraiche.net.in was performing badly and it had all come down to the page load speed and the size it loaded the first time. Now I think I have an idea what’s wrong with my website. Thanks again

Leave a Reply

Your email address will not be published. Required fields are marked *