tinypng-loader-webpack
Thanks for tinypng-loader, it's a really great project. However, gulp is no longer popular, and some of the project dependencies is deprecated, so I forked it and made it better. And I kept the former description in salute.
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.
Advantage
By compare to other tinypng library, this library use a tinypng "loophole" API to compress images. Support popular build tools 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)
Compatible Image
- PNG
- JP(E)G
Get Started
npm install tinypng-loader-webpack --save-dev
Support
- Webpack
Language
- Typescript
- Javascript
Webpack
... module: ... //webpack loader starts from here test: /\.?$/ loader: 'file!tinypng' ... //end of webpack loader
... test: /\.bmp$/ /\.gif$/ /\.jpe?g$/ /\.png$/ use: loader: 'url-loader' options: limit: 10000 name: 'static/media/[name].[hash:8].[ext]' loader: 'tinypng-loader-loader' options: test: /\.?$/ ...
Since such operation requires communication with tinypng.com, therefore I would suggest to use cache-loader which allows to use MD5 to cache the result accordingly.
... test: /\.bmp$/ /\.gif$/ /\.jpe?g$/ /\.png$/ use: loader: require options: cacheDirectory: path loader: 'url-loader' options: limit: 10000 name: 'static/media/[name].[hash:8].[ext]' loader: 'tinypng-loader-loader' options: test: /\.?$/ ...
Screenshot
Here is a normal case if you use this library correctly
Any errors occured will be logged in console
ChangeLog
2.0.3 (2019-02-26)
- fix: update readme to avoid misunderstanding
2.0.2 (2019-02-26)
- fix: include dependency vinyl
2.0.0 (2019-02-22)
- feat: fork from tinypng-loader and update test, some packages, together with remove gulp configs