Giter Site home page Giter Site logo

optimizt's Introduction

@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

optimizt's People

Contributors

343dev avatar igoradamenko avatar dissimulazione avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.