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

$ 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:

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

imagemin ./* --out-dir=compressed

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

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.

zipic