sindresorhus / gulp-webp

Convert images to WebP

gulp-webp

Convert images to WebP

Supports PNG, JPEG, TIFF, WebP.

Install

npm install --save-dev gulp-webp

Usage

import gulp from 'gulp';
import webp from 'gulp-webp';

export default () => (
	gulp.src('src/image.jpg')
		.pipe(webp())
		.pipe(gulp.dest('dist'))
);

API

webp(options?)

See the imagemin-webp options.

Unsupported files are ignored and passed through.

gulp-webp's Issues

Filter out non supported file types

As people keeps passing in non supported file types and asking for support. #9

Cannot read property 'slice' of undefined

Hey, can you help me?

npm 6.6.0
node v10.14.2
gulp CLI version 2.0.1
Local version 3.9.1

Can we handle Unsupported files

Hi Sindresorhus,

Thanks for the plugin, I am using this and it's works fine.

But do we have any resolution for handling unsupported files, basically it's creating issues if we are using it with gulp watch and if there is any unsupported files found. It move the scripts to endless loop.

Error message:

libpng error: ReadFunc: invalid read length (overflow)!
Error! Could not process file ./dest/dest3/Screenshot-from-2016-08-04-10_47_29.png

Traversing directories?

I'm attempting to generate various webp graphics that are within multiple folders as such:

images
- foo
-- image.jpg
- bar
-- another-image.jpg

I've attempted various gulp wildcards for the src such as:

gulp.task('webp', function () {
    return gulp.src('app/images/**/*')
        .pipe(webp())
        .pipe(gulp.dest('dist/images'));
});

and the following error I receive from terminal.app is:

[16:38:40] Starting 'webp'...

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: Command failed: Error! Could not process file /var/folders/00/1snt0000h01000cxqpysvccm0076q8/T/be10a616-a515-4f9b-941a-fb9c2df9a769
Error! Cannot read input picture file '/var/folders/00/1snt0000h01000cxqpysvccm0076q8/T/be10a616-a515-4f9b-941a-fb9c2df9a769'

    at ChildProcess.exithandler (child_process.js:647:15)
    at ChildProcess.EventEmitter.emit (events.js:98:17)
    at maybeClose (child_process.js:753:16)
    at Socket.<anonymous> (child_process.js:966:11)
    at Socket.EventEmitter.emit (events.js:95:17)
    at Pipe.close (net.js:465:12)

Is it possible to maintain my folder structure?

Converting error

I get this error message. TI could convert these images before using gulp-cwebp package and now I mostly get errors and only a few images convert.

I'm also wondering if it can be related to "Yosemite" Mac OS update?

[21:28:10] Error in plugin 'gulp-webp'
Message:
    Corrupt JPEG data: bad Huffman code

Details:
    fileName: /Users/Vlad/Development/performer/html/build/img/cat-md.jpg

[21:28:10] Error in plugin 'gulp-webp'
Message:
    ENOENT, open '/var/folders/y3/3w2lsbkd3w94c5jjnl86fz980000gn/T/0649ce45-10dc-4b1b-a31e-e70129c0e1be'
Details:
    errno: 34
    code: ENOENT
    path: /var/folders/y3/3w2lsbkd3w94c5jjnl86fz980000gn/T/0649ce45-10dc-4b1b-a31e-e70129c0e1be

CVE-2023-4863 8.8 Out-of-bounds Write vulnerability

As we can see - https://devhub.checkmarx.com/cve-details/CVE-2023-4863/ says that package is vulnerable.
Description:
A Heap-Based Buffer Overflow vulnerability in "libwebp" in versions prior to 1.3.2 allows an attacker to perform an out-of-bounds memory write. The vulnerability could be exploited by a remote attacker via a crafted HTML page, potentially leading to unauthorized code execution or a denial of service condition. To exploit the vulnerability, the user must be able to manipulate the value in "color_cache_bits". This package is used by various applications that are also affected if a vulnerable version of "libwebp" is in use, including Google Chrome in versions prior to 116.0.5845.187.

EPERM: operation not permitted, open on second run of task. First run of task terminated with code 0

I'm using gulp-webp to optimize images in a .net MVC 5.2.7 project.

gulpfile.js:

var gulp = require('gulp');
var gulpSass = require('gulp-sass');
var csso = require('gulp-csso');
var webp = require('gulp-webp');
gulpSass.complier = require('dart-sass');
gulp.task('compile-sass', function () {
    return gulp.src('./src/custom.scss')
        .pipe(gulpSass()).pipe(csso()).pipe(gulp.dest('./Content'));
});

//This task will create *.webp compressed images from the jpgs and pngs in the images folder.
gulp.task('convert-webp', function () {
    return gulp.src('images/*/*.{jpg,png}')
        .pipe(webp({ quality: 50 }))
        .pipe(gulp.dest('images', { overwrite: true }))
});

On my first run of task 'convert-webp':

[06:53:47] Using gulpfile ~\source\Workspaces\xxx\xxx\Gulpfile.js
[06:53:47] Starting 'convert-webp'...
[06:53:58] Finished 'convert-webp' after 11 s
Process terminated with code 0.
On any subsequent run of task 'convert-webp':

[07:00:28] Using gulpfile ~\source\Workspaces\xxx\xxx\Gulpfile.js
[07:00:28] Starting 'convert-webp'...
[07:00:29] 'convert-webp' errored after 606 ms
[07:00:29] Error: EPERM: operation not permitted, open C:\Users\jclark\source\Workspaces\xxx\xxx\images\logo\logo1.webp'
All the permission's are correct. If I delete *.webp, the task completes with terminated return code 0.

Can I get some direction to a solution?

Task fails to read stream

Hello,

OSx, ImageMagic installed, Gulp at 3.8.5, requested image exists, my gulpfile.js:

var gulp = require('gulp');
var webp = require('gulp-webp');
gulp.task('webp', function () {
    return gulp.src('./assets/i/stub/user.jpg')
        .pipe(webp())
        .pipe(gulp.dest('dist'));
});

And here's an error output:

operatino:markup-process operatino$ gulp webp
[gulp] Using gulpfile ~/Dropbox/Project/all/markup-process/gulpfile.js
[gulp] Starting 'webp'...

Error: File.contents can only be a Buffer, a Stream, or null.
    at File.Object.defineProperty.set (/Users/operatino/Dropbox/Project/all/markup-process/node_modules/gulp/node_modules/vinyl-fs/node_modules/vinyl/index.js:110:13)
    at Transform.<anonymous> (/Users/operatino/Dropbox/Project/all/markup-process/node_modules/gulp-webp/index.js:38:19)
    at ConcatStream.<anonymous> (/Users/operatino/Dropbox/Project/all/markup-process/node_modules/gulp-webp/node_modules/concat-stream/index.js:32:43)
    at ConcatStream.EventEmitter.emit (events.js:117:20)
    at finishMaybe (/Users/operatino/Dropbox/Project/all/markup-process/node_modules/gulp-webp/node_modules/concat-stream/node_modules/readable-stream/lib/_stream_writable.js:455:14)
    at endWritable (/Users/operatino/Dropbox/Project/all/markup-process/node_modules/gulp-webp/node_modules/concat-stream/node_modules/readable-stream/lib/_stream_writable.js:464:3)
    at ConcatStream.Writable.end (/Users/operatino/Dropbox/Project/all/markup-process/node_modules/gulp-webp/node_modules/concat-stream/node_modules/readable-stream/lib/_stream_writable.js:431:5)
    at Socket.onend (_stream_readable.js:483:10)
    at Socket.g (events.js:175:14)
    at Socket.EventEmitter.emit (events.js:117:20)

Use WebP binaries directly

Can't for now since it doesn't support writing/reading stdin/stdout: https://code.google.com/p/webp/issues/detail?id=181

Please star the the above ticket if you want this

Too slow?

gulpconfig

const gulp = require('gulp');
const webp = require('gulp-webp');

gulp.task('img', () => {
  return gulp
    .src('src/*')
    .pipe(webp())
    .pipe(gulp.dest('dist'));
});

package.json

{
  "dependencies": {
    "gulp": "^4.0.2",
    "gulp-webp": "^4.0.1"
  }
}

src 12.9mb

dest 6.7mb (52%)

console

15 seconds? Why so slow?

In realtime:

imagemin-webp is old

When I installed your plugin, terminal returned it:
found 2 moderate severity vulnerabilities
run npm audit fix to fix them, or npm audit for details

Installed
"imagemin-webp": {
"version": "3.1.1",
}

imagemin-webp exist latest version 5.0.0

Need to update.

Log

Could you add log message as gulp-imagemin?

gulp-imagemin: Minified 6 images (saved 9.54 kB - 24.1%)

empty file and file named '-'

Using this task:

gulp.task('webp', function() {
  gulp.src('build/assets/*.png')
    .pipe(tasks.webp())
    .pipe(gulp.dest('build/assets'))
});

I see a webp file named just - in my project root directory, and in the 'build/assets' directory, the file is named correctly but it is 0 bytes.

Somewhat confusing dependencies

OS: Ubuntu 15.04

Command failed: JPEG support not compiled. Please install the libjpeg development package before building.

Not compiled into what? gulp-webp?
Why wasnt it exactly compiled with it to begin with?

---

Concerning this libjpeg package, I assume it means this:

λ sudo apt-get install libjpeg62-dev

If anyone has stumbled on the same issue; don't install 62-dev write "libjpeg" and hit tab and install the biggest number (62 is just v6.2 of the library)

Even with that installed you'll still get the error. However if I do,

λ npm rm gulp-webp ; npm i gulp-webp

  [ omitting npm messages ]

  ⚠ spawn ENOENT
  ⚠ cwebp pre-build test failed
  ℹ compiling from source
  ✔ cwebp built successfully
[email protected] node_modules/gulp-webp
├── [email protected] ([email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])

Now it finally works.

Seems to me it is more then happy to compile with out support for anything.

This is not very intuitive. If possible can you fix this? Maybe some test after the compilation step to check it can actually handle jpeg, png, etc files with instructions on what to install. Right now it works but it probably will fail again as soon as I use a png file somewhere.

log generated files in console

Would be useful to see the file paths getting generated in the console.

Running command npm install gulp-webp --save-dev for error log as below

[email protected] postinstall c:\12810\gulp\webp.gzip.copy\node_modules\gulp-web
p\node_modules\imagemin-webp\node_modules\cwebp-bin
node lib/install.js

‼ unable to verify the first certificate
‼ cwebp pre-build test failed
i compiling from source
× Error: ./configure --disable-shared --prefix="c:\12810\gulp\webp.gzip.copy\n
ode_modules\gulp-webp\node_modules\imagemin-webp\node_modules\cwebp-bin\vendor"
--bindir="c:\12810\gulp\webp.gzip.copy\node_modules\gulp-webp\node_modules\image
min-webp\node_modules\cwebp-bin\vendor" && make && make install
Command failed: C:\Windows\system32\cmd.exe /s /c "./configure --disable-shared
--prefix="c:\12810\gulp\webp.gzip.copy\node_modules\gulp-webp\node_modules\image
min-webp\node_modules\cwebp-bin\vendor" --bindir="c:\12810\gulp\webp.gzip.copy\n
ode_modules\gulp-webp\node_modules\imagemin-webp\node_modules\cwebp-bin\vendor""

'.' is not recognized as an internal or external command,
operable program or batch file.

at ChildProcess.exithandler (child_process.js:751:12)
at ChildProcess.emit (events.js:110:17)
at maybeClose (child_process.js:1015:16)
at Process.ChildProcess._handle.onexit (child_process.js:1087:5)

[comment] Fantastic plugin <3

Thanks this is really good and easy to use.

Stop process converting if image with color palette - cmyk

If one image with color palette CMYK, then error and stop converting.

Details:
code: 255
killed: false
stdout:
stderr: Unsupported color conversion request
Error! Could not process file /tmp/da030ffb-2c8c-4b43-98d7-d4e26b5f4b99
Error! Cannot read input picture file '/tmp/da030ffb-2c8c-4b43-98d7-d4e26b5f4b99'

How continue after error. plumber() did not help.

add option clone

To through in stream webp and source files.

How to specify output filenames including the original extension?

Hi,

currently I have the following gulp4 task:

'use strict';
const gulp = require('gulp');
const webp = require('gulp-webp');

gulp.task('content-images-webp', () =>
  gulp.src('.tmp/content-images-resized/**/*')
    .pipe(webp({quality: 80, method: 6, preset: 'photo'}))
    .pipe(gulp.dest('.tmp/assets/images'))
);

The images are correctly being processed. But test.jpg will be named test.webp.

How can I set things up that the output file will be named test.jpg.webp?

Best Regards,
Dennis

const ext = `file.extname.slice(1).toLowerCase();

Everything works, on version [email protected]
But on [email protected] I get this error:

gulp-webp/index.js:29
                const ext = `file.extname.slice(1).toLowerCase();

[email protected]
Ubuntu: 18.04 (KDE neon 5.14)
Kernel: Linux 4.20

not converting images to webp on macbook air 13

i have gulp project that worked on windows 10. now i'm using macbook and gulp-webp not converting images to webp. any solutions?

source code: https://github.com/shahriyor-sharifjonov/gulp-2023

image code:

import webp from "gulp-webp"
import imagemin from "gulp-imagemin";

export const images = () => { 
    return app.gulp.src(app.path.src.images)
        .pipe(app.plugins.plumber(
            app.plugins.notify.onError({
                title: "IMAGES",
                message: "Error: <%= error.message %>"
            })
        ))
        .pipe(app.plugins.newer(app.path.build.images))
        .pipe(webp())
        .pipe(app.gulp.dest(app.path.build.images))
        .pipe(app.gulp.src(app.path.src.images))
        .pipe(app.plugins.newer(app.path.build.images))
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{ removeViewBox: false }],
            interlaced: true,
            optimizationLevel: 3 // 0 to 7
        }))
        .pipe(app.gulp.dest(app.path.build.images))
        .pipe(app.plugins.browsersync.stream());
}

Update imagemin-webp to v4

Not working with PNG images

Hey I am trying to get this tool to work with png images and it does not convert them to webp.

My gulp task is setup right:

const webp = require('gulp-webp');

gulp.task('images:webp', cb => {
   return gulp.src([
     config.paths.src.global + '/**/*.{jpg, png}'
    ])
    .pipe(webp())
    .pipe(gulp.dest(`${config.paths.dest.global}/webp`));
});

but it only renders out jpgs. Is there a setting I need to do pngs as well?

Thanks