Optimize Images with CLI Tool from Google, Squoosh
Tags: cli, tool, image
Published: 2021-04-11 15:53:49

There is a web application that allows us to use GUI.
https://squoosh.app/


However, I think many of `dev.to` users like a CLI tool.

## What is Squoosh CLI
>Squoosh CLI is an experimental way to run all the codecs you know from the Squoosh web app on your command line using WebAssembly. The Squoosh CLI uses a worker pool to parallelize processing images. This way you can apply the same codec to many images at once.

>Squoosh CLI is currently not the fastest image compression tool in town and doesn’t aim to be. It is, however, fast enough to compress many images sufficiently quick at once.


{% github GoogleChromeLabs/squoosh %}


## How to use
There are 2 ways to use it.
One is to install `@squoosh/cli` and the other is to use `yarn/npx`.


In this post, I use an image from Unsplash

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h1kylwgx1yuxgoh7niys.jpg)

Photo by <a href="https://unsplash.com/@ballparkbrand?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Ball Park Brand</a> on <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
  

First, check the image's information with `identify` command.
If you want to know about `identify` command, please check the following link.
https://imagemagick.org/script/identify.php

This is before using squoosh/cli
The size is 1.42289MiB. 
```zsh
$ magick identify -verbose ball-park-brand.jpg
Image:
  Filename: ball-park-brand.jpg
  Format: JPEG (Joint Photographic Experts Group JFIF format)
  Mime type: image/jpeg
  Class: DirectClass
  Geometry: 3788x2525+0+0
  Resolution: 72x72
  Print size: 52.6111x35.0694
  Units: PixelsPerInch
  Colorspace: sRGB
  Type: TrueColor
  Base type: Undefined
  Endianness: Undefined
  Depth: 8-bit
  Channel depth:
    Red: 8-bit
    Green: 8-bit
    Blue: 8-bit
  Channel statistics:
    Pixels: 9564700
    Red:
      min: 0  (0)
      max: 255 (1)
      mean: 132.878 (0.521092)
      median: 100 (0.392157)
      standard deviation: 58.4716 (0.2293)
      kurtosis: -0.537623
      skewness: 0.717458
      entropy: 0.891271
    Green:
      min: 0  (0)
      max: 255 (1)
      mean: 148.547 (0.582538)
      median: 166 (0.65098)
      standard deviation: 44.0201 (0.172628)
      kurtosis: 2.17474
      skewness: -1.58907
      entropy: 0.85256
    Blue:
      min: 0  (0)
      max: 255 (1)
      mean: 116.84 (0.458195)
      median: 151 (0.592157)
      standard deviation: 56.4098 (0.221215)
      kurtosis: -0.519711
      skewness: -1.03088
      entropy: 0.838754
  Image statistics:
    Overall:
      min: 0  (0)
      max: 255 (1)
      mean: 132.755 (0.520608)
      median: 139 (0.545098)
      standard deviation: 52.9672 (0.207714)
      kurtosis: 0.100211
      skewness: -0.475699
      entropy: 0.860862
  Rendering intent: Perceptual
  Gamma: 0.454545
  Chromaticity:
    red primary: (0.64,0.33)
    green primary: (0.3,0.6)
    blue primary: (0.15,0.06)
    white point: (0.3127,0.329)
  Matte color: grey74
  Background color: white
  Border color: srgb(223,223,223)
  Transparent color: none
  Interlace: JPEG
  Intensity: Undefined
  Compose: Over
  Page geometry: 3788x2525+0+0
  Dispose: Undefined
  Iterations: 0
  Compression: JPEG
  Quality: 73
  Orientation: Undefined
  Profiles:
    Profile-icc: 524 bytes
  Properties:
    date:create: 2021-04-11T15:06:21+00:00
    date:modify: 2021-04-11T15:00:28+00:00
    icc:copyright: IX
    icc:description: c2
    jpeg:colorspace: 2
    jpeg:sampling-factor: 2x2,1x1,1x1
    signature: f74c895b9e40fba1656729d620ccb1d964d0a8d44c48f9f755b4e468a7503885
  Artifacts:
    verbose: true
  Tainted: False
  Filesize: 1.42289MiB
  Number pixels: 9564700
  Pixels per second: 12.8035MP
  User time: 0.740u
  Elapsed time: 0:01.747
  Version: ImageMagick 7.0.11-6 Q16 x86_64 2021-04-03 https://imagemagick.org
```

Let's try squoosh/cli. In this post, I will try two thing. One is to use options and the other is `auto`.

- `--mozjpeg`: Use MozJPEG to generate a .jpg file with the given configuration

- '{quality:50}': image quality

- `-d out`: create a dir and store an optimized image
- `ball-park-brand.jpg`: source image

```zsh
$ squoosh-cli --mozjpeg '{quality:50}' -d out ./ball-park-brand.jpg
1/1 ✔ Squoosh results:
 ./ball-park-brand.jpg: 1.42MB
  └ .jpg  → 390.01KB (26.8%)
```
The file size is 390.01KB.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xwk9bgrujlr2i3hgl3k4.jpg)


```zsh
$ squoosh-cli --mozjpeg auto ./ball-park-brand.jpg
1/1 ✔ Squoosh results:
 ./ball-park-brand.jpg: 1.42MB
  └ .jpg  → 1.53MB (107%) using --mozjpeg '{quality:89.0625}'
```
The file size is 1.53MB 😂 😂 😂
However, right now I don't recommend you to use `auto` because you use squoosh to reduce the file size but the size increased lol.   
In addition, the process with `auto` takes so much time(10 min) which isn't reasonable. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hnyiwdqdvdty7x0x58te.jpg)


## comparison identify results
The left is the original and the right is the optimized image info.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oo3zianx29rueys3dl8w.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iis2atw8j2bzwvn337am.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e03mbrz094rnbtw4vcni.png)

If you are looking for tools for web dev, please check this article!

{% post https://dev.to/kojikanao/useful-websites-for-frontend-engineers-27ac %}