Automagically optimize your images with Squoosh

profile
Tim Deschryver
timdeschryver.dev

Optimizing your images is important to have faster website and a good user experience. For my blog, I used to use the Image Optimizer Github Action to optimize my images.

The downside to this approach was that the optimization was only performed on Pull Requests. When I'm publishing a new blog post, I usually just pushed to the main branch, thus new images wouldn't be optimized. As a counter measurement, I also used Squoosh to optimize the banner images as this was mostly the only image I used.

This task was done manually, every. single. time. Until I stumbled onto the Squoosh lib. Let's take a look at how we can automate this threaded task and optimize our images with ease!

I'm assuming you're already using lint-staged to some extent, for example, to run a linter or prettier on touched files. We extend the lint-staged configuration to run an optimization to images (*.{jpg,jpeg,png,gif}), and re-add them to our commit with git add.

To run lint-staged as a pre-commit step, I'm using husky with a pre-commit git hook.

The optimize-image.js script, passes the image through Squoosh to optimize the image. Note that we don't need to pass an argument to this script, because lint-staged already passes the file's path as an argument.

format_quote

If the Squoosh CLI would overwrite the initial image (or have a config flag for it), we could have simply executed the Squoosh CLI without the need to create a custom script for it.

Notice that I'm squooshing the image to the WebP format.

And that's it, with some configuration and just a couple lines of code, all of the images on my blog will be optimized.

The profit is that I save a couple of minutes every time I add images, and visitors don't need to download the whole image.

Feel free to update this blog post on GitHub, thanks in advance!

Join My Newsletter (WIP)

Join my weekly newsletter to receive my latest blog posts and bits, directly in your inbox.

Support me

I appreciate it if you would support me if have you enjoyed this post and found it useful, thank you in advance.

Buy Me a Coffee at ko-fi.com PayPal logo

Share this post

Twitter LinkedIn