It’s 2022 and Yes, You Should Still Optimize Your Website’s Images

Back in 2016, I wrote an article titled — somewhat cheekily — “Please, For the Love of All That Is Holy, Optimize Your Website’s Images” that urged web developers, admins, and content managers to consider image compression for their websites. To drive my point home, I compared the results of various image compression tools on image file sizes.

Six years later, computing and web browsing technology has improved, as has access to broadband internet (though it could be much better). Even so, optimizing and compressing images is still one of the quickest and easiest ways to dramatically improve your website’s speed and performance, and make it more accessible for your users — while simultaneously reducing your own bandwidth, backup, and storage costs.

According to the HTTP Archive, the median desktop page weight in 2021 was 2.2 MB, while the median mobile page weight was just under 2 MB. Of everything that goes into a webpage — images, fonts, CSS, JS — images made up the most of that weight, accounting for 957.8 KB on desktop pages and 860.3 KB on mobile pages. Keep in mind, these are just the median values.

If we look at a percentile breakdown of 2021 page weights, desktop and mobile websites in the 90th percentile were 8.1 MB and 6.9 MB, respectively. For the 75th percentile, those numbers drop to “just” 4.3 MB and 3.75 MB. Not surprisingly, images accounted for over half of those weights. At the 90th percentile, desktop and mobile websites contained 5.7 MB and 5 MB of images, respectively, while images accounted for 2.6 MB and 2.3 MB at the 75th percentile.

It’s tempting to think that such numbers are increasingly meaningless as broadband internet becomes both faster and more widely available. But even if that’s the case, and I don’t immediately grant that it is, the fact remains that those numbers could still be significantly lower — and thus, webpages could be significantly faster — if developers et al. took even a modicum of time to optimize and compress their images.

My Methodology

To show you what I mean, I repeated the tests that I ran back in 2016, albeit with a slightly different methodology.

Given the rise in popularity of license-free photo sites, I downloaded six random images of diverse subject matter from Unsplash and ran them through several image optimization and compression tools “as is” (i.e., without any cropping, resizing, or Photoshopping). All of the images I used were 1920×1280 JPEGs. (You should, of course, optimize PNGs and SVGs, too.)

I used the following tools for the 2022 tests:

• Compressor.io
• ImageOptim for MacOS
• Optimizilla
• Shrink.media
• Squoosh
• TinyJPG

I dropped JPEGmini because it no longer has a free version and added ImageOptim, Shrink.media, and Squoosh. I only tested browser-side tools and downloadable apps; I didn’t test any server-side or CDN-based solutions like Cloudinary, Imgix, or Jetpack. Finally, all tools and apps that had customizable compression/quality settings were set to 75%.

Results

Image 1 (orig. 324 KB)

Image 2 (orig. 114 KB)

Image 3 (orig. 528 KB)

Image 4 (orig. 543 KB)

Image 5 (orig. 399 KB)

Image 6 (orig. 321 KB)

Conclusions

As you can see, you can get some pretty significant image file size savings — more than half, in some cases — depending on the tool that you use. Here are some more specific observations:

• Compressor.io consistently had the best file size results, though I noticed it had the some of the most degradation in image quality (see Image #2).
• ImageOptim, Optimizilla, and Squoosh had essentially identical results on several occasions. (I suspect that’s because both ImageOptim and Squoosh use the MozJPEG encoder, and I wouldn’t be surprised if Optimizilla does, too.)
• Shrink.media consistently performed the worst of all the tools, reducing the file size by only 20% in Image #4’s case. Also, I noticed that its compression left a grainy texture on several images (see Images #1, #4, and #5) compared to the other tools, which some might not like.

If I had to pick the best overall tool, ImageOptim gets my vote. Not only does it have consistently solid compression results with decent image quality — on some images, like #3 and #6, you can barely tell the difference between the original and ImageOptim versions — but it also has the benefit of being an app that you can run locally on your machine. (Note: Depending on your computer’s age and the size and number of images you’re compressing, you might hear your fans spin up during particularly demanding compression sequences.)

In any case, the above results make it pretty clear that even in 2022, (1) image compression can be a huge benefit and (2) there are numerous tools out there to make it happen. As far as I’m concerned, there’s no reason to not invest in some sort of image compression strategy, even if it’s just manually running images through a tool like ImageOptim before uploading them.

That might require a little more time, but imagine, for a moment, just how much faster your website would be if its images’ file sizes were cut in half with a near-negligible loss in quality to boot. (And that’s even before utilizing lazy loading, responsive images, and/or newer image formats like AVIF and WebP.) That’s a win-win for everyone, for both you and your site’s users.