Skip to content
master
Go to file
Code

README.md

@funboxteam/optimizt

Optimizt avatar: OK sign with Mona Lisa picture between the fingers

npm

Optimizt is a CLI tool that helps you prepare images during frontend development.

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

По-русски

Rationale

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

Usage

Install the tool:

npm i -g @funboxteam/optimizt

Optimize!

optimizt path/to/picture.jpg

Command line flags

  • --webp — create WebP versions for the passed paths instead of compressing them.
  • -l, --lossless — optimize losslessly instead of lossily.
  • -v, --verbose — show additional info, e.g. skipped files.
  • -V, --version — show tool version.
  • -h, --help — show help.

Examples

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

# list of images optimization losslessly
optimizt --lossless path/to/picture.jpg path/to/another/picture.png

# recursive WebP creation in the passed directory
optimizt --webp path/to/directory

# recursive JPEG optimization in the current directory
optimizt `find . -type f -name '*.jpg'`

Integrations

External Tool in WebStorm, PhpStorm, etc

Add an External Tool

Open Preferences → Tools → External Tools and add a new tool with these options:

  • Program: path to the exec file (usually simply optimizt)
  • Arguments: desired ones, but use $FilePath$ to pass Optimizt the path of the selected file or directory
  • Working Directory: $ContentRoot$
  • Synchronize files after execution: ✔️

Set other options at your discretion. For example:

As you see on the screenshot above, you may add several “external tools” with the different options passed.

How to use

Run the tool through the context menu on a file or directory:

Shortcuts

To add shortcuts for the added tool go to Preferences → Keymap → External Tools:

Credits

Cute picture for the project was made by Igor Garybaldi.

Sponsored by FunBox

You can’t perform that action at this time.