I’d say it’s safe to assume that, in 2022, we all accept that the smaller a website is, the better it will perform. Smaller websites load faster, rank higher in Google and other search engines, which ultimately results in greater user engagement and sales. The challenge is, however, many people expect modern websites to be full of beautiful, high-resolution images, videos, and anything else that holds the users attention.
Sure, we can build sites like that, but they come at a cost. The more images that a site or a page contains the larger the payload will be. Perhaps because of this, perhaps also because of laziness, average website size has been steadily growing over the last several years. So much so that in 2022, according to SEO Optimer, the average website size is 2.2 MB for a desktop site, and 2 MB for a mobile.
“What’s wrong with that?”, you might ask. Everybody had a fast broadband connection after all. Well, if that was your assumption you’d be wrong. According to Our World in Data, around the world, on average, only 15.89 people per 100 have access to fast broadband. To put that into more context, “fast broadband” is defined as “at downstream speeds equal to, or greater than, 256 kbit/s”.
GIven that, only a minority of your users will actually have a decent broadband connection. The rest will have one that is average at best. Without diving too deep into the data, I hope it goes without saying that the smaller your website, the more people you’re actually going to reach.
Question is, how do you do that, while still using great quality images on your site? Well, the first thing is to optimize your images for better performance.
In this article, I’m going to step you through a range of tools that you can use, regardless of your operating system or preference for desktop or command line. That way, you’ll be trimming the fat from your images, yet retaining their high quality.
Command-line image optimization tools
Let’s start off with the command line, as it’s the best place to automate the optimization process and look at three tools: optipng, jpegoptim, and cwebp.
optipng
optipng, as the name suggests, optimizes PNG files, or, to quite the documentation:
Attempts to optimize PNG files, i.e. reduce their size to a minimum, without losing semantic information (and quality).
The tool can make a number of changes to an PNG file in an attempt to reduce its size, including stripping metadata, cutting one image out of multi-image animation or video file, along with bit depth, color type, and palette reduction.
Speaking from experience, it does an excellent job of reducing file size while maintaining quality, if you run it without any options. However, if you want to be more aggressive check out the documentation for the full set of supported options.
If you’re interested, I used it to optimize all of the images in this article and achieved an average file size reduction of 19,96%.
jpegoptim
Where optipng optimizes PNG files, jpegoptim optimizes and compresses JPEGs. Quoting the documentation:
jpegoptim is used to optimize/compress jpeg files. Program supports lossless optimization, which is based on optimizing the Huffman tables. And so called "lossy" optimization where in addition to optimizing Huffman tables users can specify an upper limit for image quality.
It also does an excellent job of reducing file size yet retaining image quality by default, but supports a large number of options if you want to be more aggressive.
cwebp
cwebp is a little different from the others. Instead of optimizing and compressing a JPEG or PNG file, cwebp converts an image to WebP format. If you’re not familiar with the format, it was designed by Google as a successor to JPEG, PNG, and GIF formats and released in 2018.
While that’s still relatively recent, the latest version of all major browsers support the format. The format and tool support converting images either lossy or lossless, depending on your needs, in addition to a number of other tuning options, such as the compression factor, resizing an image to a rectangle, and cropping the source image.
Web-based image optimization tools
Now, let’s have a look at a number of web-based tools.
