PNG is useful because it's the only widely supported format that can store partially transparent images. When app moves to production stage, image compression is essential. However, according to my experience using such as gulp-image, imagemin-webpack, most of them relied on optipng plugin. This compression algorithm only help reduce around 5%-10%. tinypng.com uses smart lossy compression techniques to reduce the file size of PNG/JP(E)G files with around 60%-70% file size reduction.
The tinypng-loader-cli is derived from my tinypng-loader.
npm install tinypng-loader-cli -g
How to use
Open your command line or shell and key in,
tinypng-loader-cli -s <source of your images> -d <destination of your images>
Usage: index [options] Options: -h, --help output usage information -V, --version output the version number -s, --source <value> source of images required to process -d, --dest <value> destination of image output
Assume your directory looks like the followings:
c:/demo # project name├── dist/ # destination of your outputs└── images/ # target images you want to optimize├── 1.png├── 2.jpg├── 3.jpg
open your sheel from demo and enter your command:
tinypng-loader-cli -s images/**/* -d dist
OR using absolute path,
tinypng-loader-cli -s c:/demo/images/**/* -d c:/demo/dist
it takes a minutes and your will see the progress in command.
c:/demo # project name├── dist/ # destination of your outputs├── 1.png├── 2.jpg├── 3.jpg└── images/ # target images you want to optimize├── 1.png├── 2.jpg├── 3.jpg
Here is a normal case if you use this library correctly