Optimize Images with CLI Tool from Google, Squoosh

0xkoji - Apr 11 '21 - - Dev Community

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 logo GoogleChromeLabs / squoosh

Make images smaller using best-in-class codecs, right in the browser.

Squoosh is an image compression web app that reduces image sizes through numerous formats.

Privacy

Squoosh does not send your image to a server. All image compression processes locally.

However, Squoosh utilizes Google Analytics to collect the following:

  • Basic visitor data.
  • The before and after image size value.
  • If Squoosh PWA, the type of Squoosh installation.
  • If Squoosh PWA, the installation time and date.

Developing

To develop for Squoosh:

  1. Clone the repository
  2. To install node packages, run:
    npm install
    Enter fullscreen mode Exit fullscreen mode
  3. Then build the app by running:
    npm run build
    Enter fullscreen mode Exit fullscreen mode
  4. After building, start the development server by running:
    npm run dev
    Enter fullscreen mode Exit fullscreen mode

Contributing

Squoosh is an open-source project that appreciates all community involvement. To contribute to the project, follow the contribute guide.




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

Photo by Ball Park Brand on Unsplash

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.

$ 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
Enter fullscreen mode Exit fullscreen mode

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

$ 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%)
Enter fullscreen mode Exit fullscreen mode

The file size is 390.01KB.
Alt Text

$ 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}'
Enter fullscreen mode Exit fullscreen mode

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

comparison identify results

The left is the original and the right is the optimized image info.

Alt Text

Alt Text

Alt Text

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

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .