How to get the optimal image size for web

If you’ve ever started a project to improve the load times for your website, web app, or mobile app, your heart is in the right place — but your efforts might not be.

For many technology leaders, the first instinct is to blame code and infrastructure. They dive deep into optimizing front-end code, scale infrastructure resources, or migrate to a new type of database-as-a-service offering that promises to process requests a few milliseconds faster.

While these projects are well-intentioned, they’re often enormously expensive. They require new investments in technology, hardware, talent, or simply the valuable time of their current engineering and DevOps teams.

This is also jumping the gun. First, a good experience for end users begins the moment they land on a website, not once they’ve signed up for a trial or moved through checkout. Any slow experience along the way makes them less likely to stick around. Second, these leaders are also prematurely optimizing when there’s usually a much lower-hanging fruit: optimizing images across the board to improve their Core Web Vitals.

Why optimizing your image size is important for the end user experience

Before jumping right into the benefits, let’s talk about exactly what image optimization is. Optimization is the process of reducing the file size of images without sacrificing their quality. There are three ways to find the balance between size and quality:

1. Change the file type (.jpg, .png, .gif, .webp, .svg, and more)
2. Change the level of applied image compression (lossless vs. lossy)
3. Change the image dimensions (height and width)

Finding the best optimization means considering all three. You can’t just reduce image dimensions, because while that might look fine on mobile, it’ll look terrible on another user’s 27-inch monitor or Retina display. If you compress images too heavily, you’ll end up losing too much image quality, which doesn’t present your company well either.

The significance of optimized images on the end user experience can’t be understated:

• Faster load times: When it comes to customer experience, faster is always better. Your visitors or users will register slowdowns of a fraction of a second. Any delay in loading an image or an entire page means you’ll lose that “instantaneous” feeling that’s integral to the digital customer experience.
• Less bandwidth usage: While broadband internet with WiFi might be the norm in some places, there are hundreds of millions of people globally who use satellite or mobile data on a regular basis, which is usually metered. Optimizing your images provides an even better experience for them, with faster load speeds and less drain on their limited resources, plus potentially less egress cost from your hosting provider or content delivery network (CDN).
• Optimized for their device: Web developers took note of the responsive design trend, popularized in 2010, and soon released a responsive images feature to the standard HTML image element, which allows a developer to specify which version of an image to load based on the dimensions of the browser window. For example, a mobile browser loads an image that’s 400 pixels wide, whereas a desktop loads a 1200-pixel version of the same image.

Improving the end user experience through optimizing image size and improving load times can have an enormous impact on your business, too. According to Google’s research, load speed has an enormous impact on bounce rates:

• 1s -> 3s: 32% increase in bounce rate
• 1s -> 5s: 90% increase in bounce rate
• 1s -> 6s: 106% increase in bounce rate
• 13s -> 10s: 123% increase in bounce rate

Load times are also essential for search engine optimization (SEO) in 2022. Google wants to prioritize pages and articles that provide the best user experience in their results, which means they heavily consider how quickly your page and its assets load. They don’t discuss their algorithm in detail, but their developer tools recommend making improvements to Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS) to improve SEO performance.

Benchmark your current site speed

The most straightforward tool for quickly benchmarking your load times is Google’s PageSpeed Insights. Enter in the URL you want to analyze, and the tool returns both mobile and desktop-based results. There are a few key results to look at when it comes to image size optimization.

• First Contentful Paint (FCP): The time from when the page starts loading to the time when any of the page’s text, images, and other elements are rendered. If the top of your page relies on images that aren’t optimized, you’ll likely see a slower result here. Google considers any FCP of more than 1.8 seconds moderate or slow.
• Largest Contentful Paint (LCP): The time at which the browser renders the largest content element (text or image) visible in the viewport, which is generally the all-important “hero” area. Because most websites use large, complex hero images or graphics, the higher this number is, the more likely that your visitors are wasting precious seconds just to make sense of your most important message. Aim for an LCP of less than 2.5 seconds.
• Cumulative Layout Shift (CLS): The amount of movement of visible elements in the viewport. Layout shift happens when the browser has rendered part of a page and lets the user interact with it, only for another element to render, changing the layout. It’s a frustrating experience that leads to misclicks and confusion. Slow-loading images are a common cause of layout shift.

PSI also offers a comprehensive score of your performance, plus some high-value opportunities to help you prioritize optimization work, including any images that might be slowing things down.

If you’re analyzing a web app or other experience that isn’t openly available on the web, Google also offers its open-source Lighthouse tool, which uses your Chrome browser to audit any page.

And when you’re ready for a more robust site speed monitoring solution, Raygun’s Real User Monitoring platform lets technology teams continuously monitor how customers experience their websites and applications. Various software development kits (SDKs) give front-end developers the power to add granular reporting on real user experiences into their JavaScript, Angular, React, iOS, or Android applications in a matter of minutes.

With these tools, front-end or DevOps teams can identify performance bottlenecks faster and access a full breakdown of issues with load times, whether that’s via DNS, server response, or transfer times. They can even investigate individual user sessions, or filter by cohorts based on their browser or devices, to identify issues that significantly affect only certain users. This offers incredible detail and precision when it comes to understanding how your images are loading and displaying to your end user (along with all the other elements on the page).

How to discover ideal image size using bandwidth

Achieving the best image size is hard to get right if you focus on size alone. There is no “perfect” image size for all types of users, and simply delivering the highest resolution to everyone is a mistake. As you know, the same image can load at different speeds depending on many variables.

At Raygun, we recommend optimizing for bandwidth instead of image size to make your website more consistent for end users and help you measure customer experience with more accuracy. The good news is that you can serve ideal image size values based on your customers’ bandwidth, guaranteeing that your end users will have the best possible experience on every device.

The key here is understanding your audience. Tools like Real User Monitoring can provide demographic information on your users, including where they access your services and on what devices, giving you important clues as to their bandwidth capabilities. If most users have large browser viewports, they’re probably on laptops or desktops using WiFi connections on a broadband network. If they’re using mobile devices from remote locations, your strategy for optimizing images changes dramatically.

How to calculate image size based on bandwidth

Regardless of the demographic, the goal of any optimization strategy isn’t to reduce images by 20 percent and call it a win. There’s no guarantee that you’re solving the problem for your end users. Instead, your goal should be to minimize the load time of your web experiences based on your end users and their available bandwidth, since that’s the most common limiting factor on load times.

Based on Google-led research on bounce rates as described above, a good goal for load time is under 3 seconds. Your goal is to understand how, given the general bandwidth availability for your end users, you can optimize images enough to achieve that goal.

Google Chrome’s browser comes with network conditions options in its developer tools, and while they no longer publish exact details on what numbers it uses to throttle bandwidth, it does offer Fast 3G and Slow 3G options to quickly test the load times on the lower end of the bandwidth scale.

Another option is to use the Speedtest Global Index, or a specific dataset if your demographic is mostly limited to a single country. You can enter these figures into Chrome’s DevTools as a custom Network Throttling Profile to loosely gauge how you’re performing for the average end user. PageSpeed Insights also randomizes the network conditions for its tests, allowing you to test a wide range alongside detailed information on load speed.

It’s important to remember that even if the global median for mobile download bandwidth is 29.55 Mbps (megabits per second) as of December 2021, users will only be able to download assets at a maximum of 3.7 MBps (megabytes per second). The 8-factor difference between a bit and a byte is very meaningful! You can use tools like a download time calculator to help you understand how to achieve that sub-3 second target.

For example, a 10MB web page, on that median mobile connection, would take 2.7 seconds to download in ideal conditions. That doesn’t account for latency or the back-and-forth of the browser requesting and receiving many different assets beyond images.

Resize your images before you upload

One of the easiest ways to reduce page load times and improve the end user experience is to resize your images before you upload them to your website or web app.

For example, let’s say you start with a JPG stock image from Pexels that’s 3600 pixels wide and clocks in at a hefty 2.2MB. That’s far wider than most monitors are even capable of displaying, and probably wider than the image needs to be based on how you’re presenting it on your site. Reducing the image dimensions to 1200 pixels wide, which is likely still enough for most presentations, brings the file size to 250kB, a 10X reduction.

You can see how simply resizing your images lets you add a lot more visual value to your web experiences without straining your end users’ bandwidth.

The image editing software you already have on your computer, such as Preview in macOS or Microsoft Photos in Windows, works great for resizing images. Dedicated tools like Photoshop, GIMP, and Photopea work just as well.

You can take resizing optimizations one step further by creating multiple versions of the same image and using the srcset feature in HTML, which allows you to specify which version of the file should appear at which viewport resolution. This way, you can use a high-res hero image for your desktop users, and a much smaller version for mobile phones, which can’t display nearly as much detail.

Compress images to reduce file size

Resizing your images is a good first step toward improving your end user experience, but there’s more opportunity to optimize images through compression.

Compression uses algorithms to process an image and to selectively discard data that the image doesn’t need. The most common form of image compression analyzes the image and “rounds” the image into a smaller set of data, thereby reducing the overall size. Another strategy is to reduce the number of colors in an image, like turning 10 distinct reds into 2, which has the effect of shrinking file sizes.

Both of these techniques are lossy compression techniques. Lossless compression is used more commonly when maintaining image fidelity is of the highest importance.

Let’s use the stock photo example from before. Even at 3600 pixels wide, reducing the quality (as in increasing the amount of compression) from 86 (the original setting) to 70 shrinks the file size to 1.4MB—a whopping 44% shrinkage. Doing the same to the 1200-pixel version still results in a 25% reduction in file size.

Of course, there’s a challenge in finding just the right balance between compression, file size, and quality. Reducing the 1200-pixel version to a quality setting of 15 shrinks the file size to 70kB but clobbers its quality in the process (like this:)

There are a lot of image optimization tools that can help you compress your images. General-purpose image editors Photoshop, GIMP, and Photopea are all capable of applying various strengths of compression to your images to help you find that balance.

A handful of specialty tools only do compression, simplifying editorial or front-end development workflows. We highly recommend both ImageOptim and TinyPNG, which let you optimize images in batches to save time and apply lossless compression techniques, like removing EXIF data or completely unused color profiles, for applications where fidelity is essential.

Beyond the work you do on image optimization before uploading, double-check with your website platform, hosting provider, or front-end/DevOps team to ensure that your web server uses gzip to losslessly compress your images even more by default. Enabling gzip is typically as simple as checking a box or changing a single line in a configuration file. Once it’s enabled, gzip can often shrink file sizes even more—for not only images, but every type of file you serve—without any development or administrative overhead.

As you deploy resized and compressed images, take the time to re-run benchmarks to see if you’re meeting your end users where their bandwidth is. It’s also a great time to invest in new tools, like Real User Monitoring, which not only simplify this benchmarking, but give you far deeper insights into your Core Web Vitals, which are essential to search engine optimization and user-centric development.

To gain an unrivalled understanding of the experiences of your real user, get started with a free trial of Raygun Real User Monitoring.