Automagically optimize your images with Squoosh

Modified August 15, 2022

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.

 package.json content_paste
{
  "lint-staged": {
    "*.{jpg,jpeg,png}": ["node ./scripts/optimize-image.js", "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.

 optimize-image.js content_paste
import { writeFileSync } from 'fs';
import { ImagePool } from '@squoosh/lib';
 
const imagePool = new ImagePool();
const [img] = process.argv.slice(2);
 
const image = imagePool.ingestImage(img);
await image.encode({
  webp: {}
});
const { binary } = await image.encodedWith.webp;
await writeFileSync(img, binary);
await imagePool.close();

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!

Support me

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

Share this post