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

Reducing image file sizes remains one of the easiest ways to dramatically improve your website’s performance.
Four weights of different sizes, lined up from biggest to smallest

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:

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)

ToolOptimized SizeSavings
Compressor.io130 KB60%
ImageOptim146 KB55%
Optimizilla146 KB55%
Shrink.media224 KB31%
Squoosh150 KB54%
TinyJPG155 KB52%

Image 2 (orig. 114 KB)

ToolOptimized SizeSavings
Compressor.io45 KB61%
ImageOptim49 KB57%
Optimizilla49 KB57%
Shrink.media72 KB37%
Squoosh52 KB54%
TinyJPG53 KB54%

Image 3 (orig. 528 KB)

ToolOptimized SizeSavings
Compressor.io267 KB49%
ImageOptim294 KB44%
Optimizilla295 KB44%
Shrink.media412 KB22%
Squoosh298 KB44%
TinyJPG314 KB41%

Image 4 (orig. 543 KB)

ToolOptimized SizeSavings
Compressor.io252 KB54%
ImageOptim271 KB50%
Optimizilla271 KB50%
Shrink.media433 KB20%
Squoosh271 KB50%
TinyJPG245 KB55%

Image 5 (orig. 399 KB)

ToolOptimized SizeSavings
Compressor.io174 KB56%
ImageOptim188 KB53%
Optimizilla188 KB53%
Shrink.media310 KB22%
Squoosh189 KB53%
TinyJPG196 KB51%

Image 6 (orig. 321 KB)

ToolOptimized SizeSavings
Compressor.io155 KB52%
ImageOptim170 KB47%
Optimizilla170 KB47%
Shrink.media244 KB24%
Squoosh171 KB47%
TinyJPG169 KB47%

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.