How I can compress webp image format?

[beatrizsmerino]

Hi !! This it is the code that I using, and I have some questions

• How can I compress the webp image format? I am using this package in my project to compress and export the images from src folder to dist folder. But if any image is not compressed, it does not copy it to the dist folder, and therefore cannot find it.

• And if it can be done, how do I do it? Why does this not work? { webp: { engine: 'webp', command: ['-quality', '60'] } },

/**
 * @function compressImages 
 * @description Minify size your images. Image compression with extension: jpg/jpeg, svg, png, gif, webp.
 * @param {string} inputPath Path of the images to compress
 * @param {string} outputPath Path of the folder to save the images compressed
 * @requires
 * @see {@link https://github.com/semiromid/compress-images}
 */


const compress_images = require('compress-images');

function compressImages(inputPath, outputPath) {
	compress_images(
		inputPath,
		outputPath,
		{ compress_force: false, statistic: true, autoupdate: true },
		false,

		{ jpg: { engine: 'mozjpeg', command: ['-quality', '60'] } },
		{ png: { engine: 'pngquant', command: ['--quality=20-50'] } },
		{ svg: { engine: 'svgo', command: ['--multipass'] } },
		{ gif: { engine: 'gifsicle', command: ['--colors', '64', '--use-col=web'] } },
		{ webp: { engine: 'webp', command: ['-quality', '60'] } },
		function (error) {
			if (error === null) {
				console.error("Success!!");
			} else {
				console.error("Error: " + error);
			}
		}
	);
}

compressImages('static/src/images/**/*.{jpg,JPG,jpeg,JPEG,png,svg,gif,webp}', 'static/dist/images/');

[Yuriy-Svetlov]

Hi !! This it is the code that I using, and I have some questions

• How can I compress the webp image format? I am using this package in my project to compress and export the images from src folder to dist folder. But if any image is not compressed, it does not copy it to the dist folder, and therefore cannot find it.
• And if it can be done, how do I do it? Why does this not work? { webp: { engine: 'webp', command: ['-quality', '60'] } },

/**
 * @function compressImages 
 * @description Minify size your images. Image compression with extension: jpg/jpeg, svg, png, gif, webp.
 * @param {string} inputPath Path of the images to compress
 * @param {string} outputPath Path of the folder to save the images compressed
 * @requires
 * @see {@link https://github.com/semiromid/compress-images}
 */


const compress_images = require('compress-images');

function compressImages(inputPath, outputPath) {
	compress_images(
		inputPath,
		outputPath,
		{ compress_force: false, statistic: true, autoupdate: true },
		false,

		{ jpg: { engine: 'mozjpeg', command: ['-quality', '60'] } },
		{ png: { engine: 'pngquant', command: ['--quality=20-50'] } },
		{ svg: { engine: 'svgo', command: ['--multipass'] } },
		{ gif: { engine: 'gifsicle', command: ['--colors', '64', '--use-col=web'] } },
		{ webp: { engine: 'webp', command: ['-quality', '60'] } },
		function (error) {
			if (error === null) {
				console.error("Success!!");
			} else {
				console.error("Error: " + error);
			}
		}
	);
}

compressImages('static/src/images/**/*.{jpg,JPG,jpeg,JPEG,png,svg,gif,webp}', 'static/dist/images/');

@beatrizsmerino Hi!

Are you getting an error while compressing your image? Can you provide the image?

[beatrizsmerino]

No only created the folder empty. I just would like that if it cannot be compressed, at least the image is copied in dist folder

[beatrizsmerino]

@semiromid This extension webp dont exist on the list: https://github.com/semiromid/compress-images#features

... For JPG: jpegtran, mozjpeg, webp, guetzli, jpegRecompress, jpegoptim, tinify; For PNG: pngquant, optipng, pngout, webp, pngcrush, tinify; For SVG: svgo; For GIF: gifsicle, giflossy, gif2webp; ...

But I try this: { webp: { engine: 'webp', command: ['-quality', '60'] } },

If the webp images are not compressed, how can I pass them to the dist folder?

[Yuriy-Svetlov]

@beatrizsmerino

WebP is a modern image format that provides superior lossless and lossy compression for images on the web. WebP is image format - Convert your favorite collection from PNG and JPEG to WebP

From [PNG or JPEG] ---To---> [WebP]

You must it use with PNG or JPEG images.

As example:

const compress_images = require('compress-images');
 
compress_images('src/img/**/*.{jpg,JPG,jpeg,JPEG,png}', 'build/img/', {compress_force: false, statistic: true, autoupdate: true}, false,
                                            {jpg: {engine: 'webp', command: false}},
                                            {png: {engine: 'webp', command: false}},
                                            {svg: {engine: false, command: false}},
                                            {gif: {engine: false, command: false}}, function(){

});

[Yuriy-Svetlov]

Another example:

// We will be compressing images [jpg] with two algorithms, [webp] and [jpg];
 
//[jpg] ---to---> [webp]
compress_images("src/img/**/*.{jpg,JPG,jpeg,JPEG}", "build/img/", { compress_force: false, statistic: true, autoupdate: true }, false,
	{ jpg: { engine: "webp", command: false } },
	{ png: { engine: false, command: false } },
	{ svg: { engine: false, command: false } },
	{ gif: { engine: false, command: false } },
	
	function (err) {
		if (err === null) {
			//[jpg] ---to---> [jpg(jpegtran)] WARNING!!! autoupdate  - recommended to turn this off, it's not needed here - autoupdate: false
			compress_images("src/img/**/*.{jpg,JPG,jpeg,JPEG}", "build/img/", { compress_force: false, statistic: true, autoupdate: false }, false,
				{ jpg: { engine: "jpegtran", command: false } },
				{ png: { engine: false, command: false } },
				{ svg: { engine: false, command: false } },
				{ gif: { engine: false, command: false } },
				function (err) {}
			);
		} else {
			console.error(err);
		}
	}
);

[beatrizsmerino]

Hi!!

I usually use Mac, but at work many colleagues use windows and some scripts that I have created do not work. So I am checking all options of compression and the compatibility with the operative systems Mac, Windows and Ubuntu.

These are the problems I have encountered:

pngquant-bin

• Windows: You must install additional module [npm install pngquant-bin --save]! It does not work properly on some OS! If you will get an error try use other module. Fixed bug. In windows [email protected] not working, use [email protected]

• Ubuntu: Error while loading shared libraries: libpng12.so.0: cannot open shared object file: No such file or directory. Not fixed bug. Not found and cannot install it.

Link issues comments: https://github.com/imagemin/imagemin-pngquant/issues/46

webp This option works on Windows and Ubuntu, but on Mac I have some problems and get logs

File from: [static/src/images/content/fauna/png-2702697.png]

File to: [static/dist/images/content/fauna/png-2702697.webp]

Compression algorithm: [webp]

Description: Error: Command failed: /Applications/MAMP/htdocs/task-runners/task-runners-npm/node_modules/cwebp-bin/vendor/cwebp -q 60 static/src/images/content/fauna/png-2702697.png -o static/dist/images/content/fauna/png-2702697.webp
libpng warning: iCCP: known incorrect sRGB profile
Saving file 'static/dist/images/content/fauna/png-2702697.webp'
dyld: lazy symbol binding failed: Symbol not found: ____chkstk_darwin
  Referenced from: /Applications/MAMP/htdocs/task-runners/task-runners-npm/node_modules/cwebp-bin/vendor/cwebp (which was built for Mac OS X 10.15)
  Expected in: /usr/lib/libSystem.B.dylib

dyld: Symbol not found: ____chkstk_darwin
  Referenced from: /Applications/MAMP/htdocs/task-runners/task-runners-npm/node_modules/cwebp-bin/vendor/cwebp (which was built for Mac OS X 10.15)
  Expected in: /usr/lib/libSystem.B.dylib

[beatrizsmerino]

Friend, if my index.html gets the images from the dist folder, and I have a webp image in the src folder and it can't be compressed. How do I copy it to the dist folder? And if I have other file formats and I want them to also be copied to dist so that the path doesn't stay at 404.

[Yuriy-Svetlov]

@beatrizsmerino

Hi!

pngquant-bin

Windows: You must install additional module [npm install pngquant-bin --save]! It does not work properly on some OS! If you will get an error try use other module. Fixed bug. In windows [email protected] not working, use [email protected]

I tested pngquant-bin 6.9.0 on Windows and it wokrs well. Perhaps you should install version 6.9.0.

Ubuntu: Error while loading shared libraries: libpng12.so.0: cannot open shared object file: No such file or directory. Not fixed bug. Not found and cannot install it.

I warned that pngquant does not work properly on some OS. I can see that this problem has to do with the the library pngquant-bin but not the compress-images.

File from: [static/src/images/content/fauna/png-2702697.png]

File to: [static/dist/images/content/fauna/png-2702697.webp]

Compression algorithm: [webp]

Description: Error: Command failed: /Applications/MAMP/htdocs/task-runners/task-runners-npm/node_modules/cwebp-bin/vendor/cwebp -q 60 static/src/images/content/fauna/png-2702697.png -o static/dist/images/content/fauna/png-2702697.webp libpng warning: iCCP: known incorrect sRGB profile Saving file 'static/dist/images/content/fauna/png-2702697.webp' dyld: lazy symbol binding failed: Symbol not found: ____chkstk_darwin Referenced from: /Applications/MAMP/htdocs/task-runners/task-runners-npm/node_modules/cwebp-bin/vendor/cwebp (which was built for Mac OS X 10.15) Expected in: /usr/lib/libSystem.B.dylib

dyld: Symbol not found: ____chkstk_darwin Referenced from: /Applications/MAMP/htdocs/task-runners/task-runners-npm/node_modules/cwebp-bin/vendor/cwebp (which was built for Mac OS X 10.15) Expected in: /usr/lib/libSystem.B.dylib

This problem is not related with the compress-images. Maybe this will help you:

https://stackoverflow.com/questions/22745076/libpng-warning-iccp-known-incorrect-srgb-profile

https://developers.google.com/speed/webp/

Friend, if my index.html gets the images from the dist folder, and I have a webp image in the src folder and it can't be compressed. How do I copy it to the dist folder?

Maybe you need use:

As example

const 
compress_images = require('compress-images'),
INPUT_path_to_your_images = 'src/**/*.{jpg,JPG,jpeg,JPEG,png,svg,gif}',
OUTPUT_path = 'build/';

compress_images(INPUT_path_to_your_images, OUTPUT_path, {compress_force: false, statistic: true, autoupdate: true, pathLog: './log/lib/compress-images'}, false,
                                            {jpg: {engine: 'webp', command: false }},
                                            {png: {engine: 'pngquant', command: ['--quality=20-50']}},
                                            {svg: {engine: 'svgo', command: '--multipass'}},
                                            {gif: {engine: 'gifsicle', command: ['--colors', '64', '--use-col=web']}}, function(err, completed){
        if(err.engine === 'webp'){
            // if you get an ERROR then -> Copy this images from ./src/ to ./dist/ without compress
            // err.input
            // err.output
            // Your realization
            }

        }                                       

});

And if I have other file formats and I want them to also be copied to dist so that the path doesn't stay at 404.

You need implement this function yourself. Or if many people need it, then perhaps, I will do it when I have time.

[Yuriy-Svetlov]

@beatrizsmerino

You may download last version from https://pngquant.org/ and overwrite in pngquant-bin