This is source PNG with transparency: http://i.imgur.com/7m0zIBp.png (13.3kB)
- optimized using compresspng.com: http://i.imgur.com/DHUiLuO.png (5.4kB)
- optimized using tinypng.com: http://i.imgur.com/rEE2hzg.png (5.6kB)
- optimized with gulp-imagemin+imagemin-pngquant: http://i.imgur.com/OTqI6lK.png (6.6kB)
As you can see online tools are better than Gulp. Is there a way to improve PNG optimization with Gulp?
Just in case, here's my gulp task:
gulp.task('images', function() {
return gulp.src('frontend/images/*')
.pipe(imagemin({
progressive: true,
use: [pngquant()]
}))
.pipe(gulp.dest('public/images'));
});
I've spend a lot of time implementing and designing compression algorithms, so let me give a partial answer - although it is probably not what you want to hear.
If you read on how the compression of png file format works, f.ex. here, you will find out that it uses Deflate compression along with a predictor. Deflate compression is a lossless compression algorithm - and even though you can implement it with better or worse compression, I would assume that most implementations will produce roughly the same result in terms of compression level. Nowadays most people don't bother implementing deflate anymore, so the compression itself probably won't do you any good.
The way tools like the one you linked work is by mapping RGB colors to indexed colors. If you have only a limited number of colors (say, 256), you can convert your image to an indexed representation and save it again. Less colors means less information to encode, which means that your compression level is going up. If your image uses only a few colors, or if you're willing to loose information, this can be an option.
Knowing what to look for, I think you can do the same trick in just about any image package, which includes such as f.ex. ImageMagick, Gimp. (In Gimp f.ex. you can do image -> mode -> indexed and save again with all options off).
You can check out what the various algorithms have done by using ImageMagick's
identify -verbose
tool, like thisand then compare the outputs - I use
opendiff
on the Mac. You will see this if you compare com.txt (compresspng) versus gulp.txtand this if you compare tiny (tinypng) versus gulp.txt
The difference is in the number of colours retained - gulp uses 94 colours, compresspng uses 66, and tiny uses 53.
In case you, or anyone else, wishes to compare any other aspects, I am pasting in the 3 outoput files below for reference:
gulp.txt
tin.txt
com.txt