Even Though It’s 2024, Keep Optimizing Your Website Images

I’ve previously written about the benefits of website image optimization, in 2022 and 2016. In those posts, I compared various image optimization tools that can dramatically reduce the file sizes of your website’s images. Which, in turn, can make your website less resource-intensive and more accessible and performant — a win-win for you and your users alike.

However, page weight continues to increase. According to HTTP Archive, the median desktop page weight was 2.5 MB at the beginning of 2024, compared to 2.29 MB at the beginning of 2023, an increase of 8.4%. Of that number, images accounted for 1 MB.

That’s right: you can now expect a webpage to load a megabyte’s worth of images, and that’s just the median. Go to a particularly intensive website — a news site like CNN or Fox News, for example, or an entertainment site like Pitchfork or IGN — and that number could easily triple, if not more.

Here’s the good news, though: Not only is it easier than ever to optimize website images, thanks to all of the tools out there, but modern browsers now support new image formats like AVIF and WebP that offer even greater optimization possibilities over “traditional” formats like JPG and PNG.

So what can image optimization look like in 2024? Let’s find out.

My Methodology

In my previous image optimization articles, I compared a range of tools. This time around, I’m just using Squoosh, an open source web app managed by Google (source code). Squoosh has become my go-to image optimization tool because (A) it’s incredibly easy to use and (B) allows you to export images in a variety of formats (e.g., JPG, PNG, WebP, AVIF) and fine-tune your images’ optimization with a myriad of settings.

Note: Since it’s a Google product, using Squoosh might raise some privacy concerns. For what it’s worth, Squoosh doesn’t send your images to a server, so Google doesn’t know what images you’re optimizing. But it does collect some user data via Google Analytics as well as the before and after image file sizes. Given Squoosh’s utility, those are acceptable trade-offs to me, but your mileage may vary.

For this article, I downloaded an assortment of images from Unsplash featuring a variety of styles and subject matter, from people and landscapes to more abstract imagery. Every image has the same dimensions (1920×1280) and is used “as is.” I did not crop or resize the images or adjust them in any way. I just ran each one through Squoosh and exported three versions using the default settings for the following formats:

• JPG, using the “MozJPEG” setting with “Quality” set to 75
• WebP, with “Effort” set to 4 and “Quality” set to 75
• AVIF, with “Effort” set to 4 and “Quality” set to 50

Similarly, I didn’t play with any of the formats’ advanced settings because I wanted to see what I could get, compression-wise, with the least amount of effort on my part. I simply uploaded each image, selected the export format, and clicked “Download.”

Results

Image 1 (orig. 783 KB, Source)

Image 2 (orig. 419 KB, Source)

Image 3 (orig. 340 KB, Source)

Image 4 (orig. 364 KB, Source)

Image 5 (orig. 532 KB, Source)

Image 6 (orig. 821 KB, Source)

Conclusions

First of all, I think the above results make it abundantly clear that any image optimization is beneficial. Even with trusty ol’ JPG, you can see some pretty solid savings in excess of 50% and even 60%, which is definitely not nothing. (For what it’s worth, I’ve even seen JPG optimization savings in excess of 80% with some images.)

Second, the above tests show that using modern formats like AVIF and WebP can offer even greater savings. In all of the above tests, AVIF performed the best by far, offering optimizations savings as high as 89%, albeit with occasionally noticeable image degradation — see image 4 — which might be perfectly acceptable depending on your context.

In the case of image 3, however, AVIF reduced the image file size by 84%, from 340 KB to 55 KB, with no real loss in image quality. Admittedly, much of the image is blurry, which helps with the compression, but 84% is still 84%. (When it makes sense, never underestimate the value of a little judicious blurring to make your images more optimizable.)

WebP also outperformed JPG in most cases, though not as much as AVIF. One notable exception was image 6, where WebP did worse than JPG (36% compared to 54%). What’s more, AVIF didn’t actually do all that better than JPG, either (60% compared to 54%). I suspect that’s due to the image’s graininess. In my tests, the WebP format doesn’t appear to handle images with lots of grain and other noise as well as JPG does. Mind you, that’s not a reason to not optimize the image, though.

Indeed, there’s really no reason to not optimize your website’s images, not when it’s so easy to do and the results can be so dramatically positive. That’s as true now in 2024 as it was back in 2022 and 2016. And given the way that page weights are consistently trending, I suspect that’ll be true for a long time to come even as high-speed internet becomes more ubiquitous and devices get more powerful.

In other words, image optimization will always be one of the best and easiest ways to improve your website’s performance and accessibility, as well as your users’ experience. After all, no one’s ever going to complain that your website loaded too quickly for them.