Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

What is the Optimal Image Size for Your Website? Here’s How to do the Math

DZone's Guide to

What is the Optimal Image Size for Your Website? Here’s How to do the Math

Remember to keep your end users in mind when designing your site so as to assure the best image quality for all devices.

· Web Dev Zone
Free Resource

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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 the device. Being in the Real User Monitoring space, we often get questions about the optimal image size for your website. 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.

After optimization, however, your images could still be loading slowly for certain users, which brings us to bandwidth. There’s no point having a web page 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.

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 file size 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 a load time of three seconds).

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 depending on the connection type.

Time to Download 3mb by Connection

Users on slow connections will continue to have slow experiences unless you cater to 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 under 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 isn'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 image sizes to slow down your website.

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:
user data ,web dev ,web design ,image manipulation

Published at DZone with permission of Kyle Henwood, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}