Image Compression Tools For Web Developers

Image Compression Tools For Web Developers

Web Page / PWA

https://tinypng.com

Best compression tool for .png images.

TinyPNG

Should be noticed that images will be uploaded to tinypng’s server.

https://squoosh.app

Squoosh is developed by Google Chome Lab team, once loaded it runs totally offline. With WebAssembly integration, multiple de/encoders supported.

Squoosh

Also, you can customize options for compression, very convenient.

Squoosh Settings

CLI

imagemin-cli

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$ imagemin --help

Usage
$ imagemin <path|glob> ... --out-dir=build [--plugin=<name> ...]
$ imagemin <file> > <output>
$ cat <file> | imagemin > <output>

Options
--plugin, -p Override the default plugins
--out-dir, -o Output directory

Examples
$ imagemin images/* --out-dir=build
$ imagemin foo.png > foo-optimized.png
$ cat foo.png | imagemin > foo-optimized.png
$ imagemin foo.png --plugin=pngquant > foo-optimized.png
$ imagemin foo.png --plugin.pngquant.quality=0.1 --plugin.pngquant.quality=0.2 > foo-optimized.png
# Non-Windows platforms may support the short CLI syntax for array arguments
$ imagemin foo.png --plugin.pngquant.quality={0.1,0.2} > foo-optimized.png
$ imagemin foo.png --plugin.webp.quality=95 --plugin.webp.preset=icon > foo-icon.webp

To use different de/encoders, you’ll need to install corresponding plugins.
Its default plugin settings is:

1
2
3
4
5
6
default: [
'gifsicle',
'jpegtran',
'optipng',
'svgo',
],

Check the plugins here.

Usage example:

This command minify your images in your current directory and save compressed images to a new directory named compressed

1
imagemin ./* --out-dir=compressed

If you just want to replace your current files with compressed ones, try this

1
imagemin ./* --out-dir=compressed && mv -f compressed/* . && rm -rf compressed

App

ImageSmith(Mac)

Simple but efficient! It runs compression locally.

Image Smith

zipic(Mac)

It’s free! Requires macOS 13.0 or later.

Image Smith

Image Compression Tools For Web Developers

https://lynan.cn/ways-of-image-compression-for-web-developers/

Author

Lynan

Posted on

2023-09-25

Updated on

2024-02-21

Licensed under

Comments