Automagically optimize your images with Squoosh

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.
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.
Support me
I appreciate it if you would support me if have you enjoyed this post and found it useful, thank you in advance.