Tim Deschryver

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.

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.

Follow me

You can find me on Twitter, LinkedIn, and GitHub.

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
Support the blog Share on Twitter Discuss on Twitter Edit on GitHub