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.
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:
- Clone the repository
- To install node packages, run:
npm install
- Then build the app by running:
npm run build
- After building, start the development server by running:
npm run dev
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
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
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 imageball-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%)
The file size is 390.01KB.
$ 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.
comparison identify results
The left is the original and the right is the optimized image info.
If you are looking for tools for web dev, please check this article!
Top comments (6)
Hello, I am an online squoosh user but I would like to use it for image batches. However, I don't have any notion of development or use of the terminal. Can you tell me how to install and use the CLI version, it is not clear to me.
Thanks to you
Here is the installation guide
github.com/GoogleChromeLabs/squoos...
If you don't have npm, you need to install nodejs.
nodejs.org/en/
I have a folder image ~10k file including jpg, png and webp..so how to compress jpg images in that folder? and does not affect the rest of the image formats. PLease help me. Thanks
github.com/GoogleChromeLabs/squoos...
I tried it and it doesn't compress any format. For example, if I have files like jpg, png, webp located in the same folder, I want to compress only jpg files in that folder and not png, webp.
Did you run the command with the right options and the target(*.jpg) correctly?