How I can compress webp image format? #45

beatrizsmerino · 2020-08-11T10:31:36Z

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/');

The text was updated successfully, but these errors were encountered:

Yuriy-Svetlov · 2020-08-11T15:43:15Z

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 · 2020-08-11T15:51:07Z

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 · 2020-08-11T17:19:54Z

@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 · 2020-08-12T13:02:17Z

@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 · 2020-08-12T13:11:20Z

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 · 2020-08-19T16:27:31Z

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 pngquant-bin@6.0.0 not working, use pngquant-bin@3.1.1
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:
imagemin/imagemin-pngquant#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 · 2020-08-19T16:39:06Z

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 · 2020-08-20T10:19:30Z

@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 pngquant-bin@6.0.0 not working, use pngquant-bin@3.1.1

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 · 2020-08-20T22:54:31Z

@beatrizsmerino

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How I can compress webp image format? #45

How I can compress webp image format? #45

beatrizsmerino commented Aug 11, 2020

Yuriy-Svetlov commented Aug 11, 2020 •

edited

beatrizsmerino commented Aug 11, 2020 •

edited

beatrizsmerino commented Aug 11, 2020

Yuriy-Svetlov commented Aug 12, 2020 •

edited

Yuriy-Svetlov commented Aug 12, 2020

beatrizsmerino commented Aug 19, 2020 •

edited

beatrizsmerino commented Aug 19, 2020 •

edited

Yuriy-Svetlov commented Aug 20, 2020

Yuriy-Svetlov commented Aug 20, 2020

How I can compress webp image format? #45

How I can compress webp image format? #45

Comments

beatrizsmerino commented Aug 11, 2020

Yuriy-Svetlov commented Aug 11, 2020 • edited

beatrizsmerino commented Aug 11, 2020 • edited

beatrizsmerino commented Aug 11, 2020

Yuriy-Svetlov commented Aug 12, 2020 • edited

Yuriy-Svetlov commented Aug 12, 2020

beatrizsmerino commented Aug 19, 2020 • edited

beatrizsmerino commented Aug 19, 2020 • edited

Yuriy-Svetlov commented Aug 20, 2020

Yuriy-Svetlov commented Aug 20, 2020

Yuriy-Svetlov commented Aug 11, 2020 •

edited

beatrizsmerino commented Aug 11, 2020 •

edited

Yuriy-Svetlov commented Aug 12, 2020 •

edited

beatrizsmerino commented Aug 19, 2020 •

edited

beatrizsmerino commented Aug 19, 2020 •

edited