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.
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.
Install:
npm i -g @343dev/optimizt
Optimize!
optimizt path/to/picture.jpg
--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.
# 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 {}
Gives the best balance between compression and minimal visual changes.
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.
Image processing is done using sharp for JPEG, PNG, WebP, and AVIF.
SVG is processed by svgo, while for GIF, gifsicle is used.
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.
Make sure that the ignore-scripts option is not enabled.
Details: funbox/optimizt/issues/9.
Some OS may lack necessary libraries. Install them manually.
Example for macOS using Homebrew:
brew install pkg-config libpng
# pull by name
docker pull 343dev/optimizt
# pull by name and version
docker pull 343dev/optimizt:9.0.2
# 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
# 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
Cute picture for the project was made by Igor Garybaldi.