@343dev/optimizt

Optimizt is a command-line tool that helps prepare images for the web.

It can compress PNG, JPEG, GIF and SVG lossy and lossless, and also create AVIF and WebP versions for raster images.

Rationale

As frontend developers, we have to care about pictures: compress PNG and JPEG, remove useless parts of SVG, create AVIF and WebP for modern browsers, and so on. One day, we got tired of using a bunch of apps for that, and created one tool that does everything we want.

Usage

Install:

npm i -g @343dev/optimizt

Optimize!

optimizt path/to/picture.jpg

Command line flags

--avif — create AVIF versions of images.
--webp — create WebP versions of images.
-f, --force — recreate AVIF and WebP versions if the file already exists.
-l, --lossless — optimize losslessly instead of lossily.
-v, --verbose — show more details during the process (e.g. skipped files).
-c, --config — use a provided configuration file instead of the default one.
-o, --output — write result to provided directory.
-V, --version — show the tool version.
-h, --help — show help.

Usage Examples

# optimize one image
optimizt path/to/picture.jpg

# optimize several images losslessly
optimizt --lossless path/to/picture.jpg path/to/another/picture.png

# recursively create AVIF and WebP versions for images in a directory
optimizt --avif --webp path/to/directory

# recursively optimize JPEG files in the current directory
find . -iname \*.jpg -exec optimizt {} +

Differences between Lossy and Lossless

Lossy (default)

Gives the best balance between compression and minimal visual changes.

Lossless (with `--lossless` flag)

When creating AVIF and WebP, it uses lossless compression. For PNG, JPEG, and GIF optimization, it maximizes image quality at the cost of larger file size.

For SVG files, the settings in Lossy and Lossless modes are identical.

Configuration

Image processing is done using sharp for JPEG, PNG, WebP, and AVIF, while SVG is processed by svgo.

For GIF, gifsicle is used, and for converting GIF to WebP — gif2webp.

Note

In Lossless mode for JPEG, we use Guetzli, which offers high level of compression with good visual quality. However, repeated optimization may degrade visual quality.

The default settings are located in .optimiztrc.cjs, and the file contains a list of supported parameters and their brief description.

To disable any parameter, use the value false.

When running with the --config path/to/.optimiztrc.cjs flag, the settings from the specified configuration file will be used for image processing.

If no --config flag is provided, a recursive search for the .optimiztrc.cjs file will be performed, starting from the current directory up to the root of the file system. If the file is not found, the default settings will be applied.

Troubleshooting

“spawn guetzli ENOENT”, etc.

Make sure that the ignore-scripts option is not enabled.

Details: funbox/optimizt/issues/9.

“pkg-config: command not found”, “fatal error: 'png.h' file not found”, etc.

Some OS may lack necessary libraries. Install them manually.

Example for macOS using Homebrew:

brew install pkg-config libpng

Docker

Using a pre-built image

# pull by name
docker pull 343dev/optimizt

# pull by name and version
docker pull 343dev/optimizt:9.0.2

Build the image manually

# clone the Optimizt repository
git clone https://github.com/343dev/optimizt.git

# go to the repository folder
cd optimizt

# build the image
docker build --tag 343dev/optimizt .

OR:

# build the image without cloning the repository
# in this case “.dockerignore” file will be ignored; see: https://github.com/docker/cli/issues/2827
docker build --tag 343dev/optimizt https://github.com/343dev/optimizt.git

Running the container

# inside the container, WORKDIR is set to `/src`, so all paths will resolve from there
docker run --rm --volume $(pwd):/src 343dev/optimizt --webp ./image.png

Integrations

Credits

Cute picture for the project was made by Igor Garybaldi.

343dev/optimizt