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?
Raygun lets you detect and diagnose errors and performance issues in your codebase with ease
Creating the optimal image size for your website
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.
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.
“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).”
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!
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.
How to calculate image size based on bandwidth
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
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
If your users are on a slow connection, pages can’t be very large if you want them to load in sub three seconds.
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.
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
Try these useful tools to improve user experiences