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.
Here is a command line way if you just want to quickly use it without any coding.
By compare to other tinypng library, this library use a tinypng "loophole" API to compress images. Support popular build tools gulp and webpack so that developers can easily used this in and only in Production stage (Since this library rely on tinypng web api which require network accesss)
npm install tinypng-loader --save-dev
Added maxConcurrency as an option. By default its value is 10. ** WARNING: due to the limit from tinypng.com, please keep this value under 20.**
var gulp = ;var gulpTinyPng = ;gulp;
...module:... //webpack loader starts from heretest: /\.png$/loader: 'file!tinypng'... //end of webpack loader
chain loaders 时，可以在
...test: /\.bmp$/ /\.gif$/ /\.jpe?g$/ /\.png$/use:loader: requireoptions:limit: 10000name: 'static/media/[name].[hash:8].[ext]'loader: requireoptions:test: /\.png$/...
Here is a normal case if you use this library correctly
Any errors occured will be logged in console
- bug: fixed gulp in typescript require gulp options, which actually should be optional.
- feat: optimize webpack logic. added validation constraints for tinypng loaders.
- bug: due to changes from tinypng api, it won't work for previous I fixed it and completed rewrite this tools.
- feat: added support for webpack 3.
- feat: added concurrency support for gulp when for batch processing images which require network download and upload speed.