Squoosh cli
━━━━━━━━━━━

Today I discovered a sweet new cli for compressing images. squoosh cli is a wasm powered cli that supports a bunch of formats that I would want to convert my...

Date: January 29, 2022

Today I discovered a sweet new cli for compressing images. [4m[38;2;211;198;170msquoosh cli[0m <[38;2;211;198;170mhttps://github.com/GoogleChromeLabs/squoosh/tree/dev/cli[0m> is a wasm powered cli that supports a bunch of formats that I would want to convert my website images to.

[38;2;71;82;88mNOTE[0m [1mfrom the future[0m
[38;2;71;82;88m│ [0m[38;2;211;198;170m[code][0m
[38;2;71;82;88m│ [0m    > Unfortunately, due to a few people leaving the team, and staffing issues
[38;2;71;82;88m│ [0m
[38;2;71;82;88m│ [0m[38;2;211;198;170m│ [0mresulting from the current economic climate (ugh), I’m deprecating the CLI and libsquoosh parts of Squoosh. The web app will continue to be supported and improved. I know that sucks, but there simply isn’t the time & people to work on this. If anyone from the community wants to fork it, you have my blessing.
[38;2;71;82;88m│ [0m
[38;2;71;82;88m│ [0m[4m[38;2;211;198;170mhttps://github.com/GoogleChromeLabs/squoosh/pull/1321[0m

[1m[38;2;167;192;128mWeb App[0m
[38;2;71;82;88m───────[0m

First the main feature of squoosh is a [4m[38;2;211;198;170mweb app[0m <[38;2;211;198;170mhttps://squoosh.app[0m> that makes your images smaller right in the browser, using the same wasm. It’s sweet! There is a really cool swiper to compare the output image with the original, and graphical dials to change your settings.

[1m[38;2;167;192;128mCLI[0m
[38;2;71;82;88m───[0m

What is even cooler is that once you have settings you are happy with and are really cutting down those kb’s on your images, there is a copy cli command button! If you have npx (which you should if you have nodejs and npm) already installed it just works without installing anything more.

Image: The button on squoosh.app <https://images.waylonwalker.com/squoosh-cli-button.png>

[1m[38;2;167;192;128mConverting all of my png’s to webp[0m
[38;2;71;82;88m──────────────────────────────────[0m

I copied the command that it gave me for converting to webp, and set it up to run on all of my pngs.

[38;2;211;198;170m[code][0m
  npx @squoosh/cli --webp \
    '{"quality":75 \
      "target_size":0 \
      "target_PSNR":0 \
      "method":4 \
      "sns_strength":50 \
      "filter_strength":60 \
      "filter_sharpness":0 \
      "filter_type":1 \
      "partitions":0 \
      "segments":4 \
      "pass":1 \
      "show_compressed":0 \
      "preprocessing":0 \
      "autofilter":0 \
      "partition_limit":0 \
      "alpha_compression":1 \
      "alpha_filtering":1 \
      "alpha_quality":100 \
      "lossless":0 \
      "exact":0 \
      "image_hint":0 \
      "emulate_jpeg_size":0 \
      "thread_level":0 \
      "low_memory":0 \
      "near_lossless":100 \
      "use_delta_palette":0 \
      "use_sharp_yuv":0 \
      }' \
      static/*.png -d squoosh-webp

I opened my images repo and converted all pngs to webp using the command above. I got 94% compression on my existing pngs without resizing anything. This is dang impressive, and not too hard to do. I do want to refactor my images site at some point and include this as part of the ci system.

Image: resulting file sizes for converting png to wepb. <https://images.waylonwalker.com/squoosh-webp-results.png>

I also converted to avif, but it sent all my cpus to 100 for quite awhile, for only another 2MB total. Not sure if its worth it or not.