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.
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
Enter fullscreen mode
Exit fullscreen mode
Then build the app by running:
npm run build
Enter fullscreen mode
Exit fullscreen mode
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
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.
$ 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.
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!
Article No Longer Available