How to get the best PNG compression with gulp -imagemin + plugins?

Question

I am trying to get the best possible setting for png compression.

I found several plugins available here for imagemin: https://www.npmjs.com/browse/keyword/imageminplugin

I tried all the PNG options, but the compression speed looks pretty bad.

• sample image original size - 1.4MB
• TinyPNG.com - 413KB
• pngquant - 541KB
• pngout - can't make it work - see https://github.com/imagemin/imagemin-pngout/issues/2
• pngcrush - 992KB
• optipng (default settings) - 906 KB
• advpng - 906KB

pngquant seems to have the highest compression ratio (which is obviously the worst quality), similar to the quality for tinypng, but it can still come close to the ting figure.

Essentially, I have 3 questions:

Question 1: Changing the options for advpng and optipng doesn't seem to change the file size, here is an example, am I using this correctly? I assume that maybe he is not using my settings at all and is not returning to the default settings? If you notice that the files of these two are identical !:

.pipe(imagemin( imageminOptipng({ optimizationLevel: 4 }) )) 

Question 2: Am I using "pngout" correctly? Is there a way to use it that I don't know about? The examples from their page do not seem to work, and this method does not work:

 .pipe(imagemin([ imageminPngout({ strategy: 1 }) ])) 

Question 3: Is there a better way to handle png compression that I haven't found yet? Ideally, I would like to somehow get a method that has pngquant speed, but the quality is a little better.

Answer 1

After a long process of testing and error, I managed to get the imagemin-pngquant plugin to create an image as small as TinyPNG.com. Still a bit larger, but some parts of the image looked better than the result of TinyPNG.com.

Input Image Size: 1.1 MB
TinyPNG.com: 223kb
imagemin-pngquant: 251kb

I used the following plugin settings:

 { quality: '70-90', // When used more then 70 the image wasn't saved speed: 1, // The lowest speed of optimization with the highest quality floyd: 1 // Controls level of dithering (0 = none, 1 = full). } 

It might also be a good idea to generate .webp images from .png and serve it in browsers that support this format using .png as a backup. More on .webp format: Google Developer Section

After generating .webp from the optimized image (with minimal loss of quality), the image size was 62 KB. You can use the imagemin-webp plugin with gulp -rename to stream images to the dist folder with the same base name but with a different extension. Gulp example Task:

 const config = require('./src/gulp/config.json'); const gulp = require('gulp'); const plugins = require('gulp-load-plugins')(); const imageminWebp = require('imagemin-webp'); gulp.task('images', function () { return gulp.src(config.src.images) pipe(plugins.imagemin([imageminWebp({ method: 6, })])) .pipe(plugins.rename({ extname: '.webp' })) .pipe(gulp.dest(config.dist.images)); });