How to convert image into webp using gm in node.js

Question

I was using gm for resizing images. Now I learn about webp to speed up my site. So I want to convert images into webp using same library. But the following does not work.

How can I convert images into webp by gm?

function resize(last) {
    self.resize(width, height)
    .quality(80)
    .strip()
    .gravity('Center')
    .toBuffer(imageType, function(err, buffer) {
        if (err) last(err);
        else last(null, buffer);
    });
},

EDIT

gm('thumb_3.JPG')
  .toBuffer('webp', (err, buffer) => {
  fs.writeFile('buffer.webp', buffer, console.log)
})

I use this code also

Marcos Casagrande · Accepted Answer · 2018-07-09T20:54:08.640

2

All you have to do is call:

.toBuffer('webp', (err, buffer) => { /* ... */ })

Or using streams

.stream('webp');

But for it to work, you have to install imagick explicitly with webp

brew install imagemagick --with-webp

Otherwise install graphicsmagick that supports webp directly.

Depending on your OS:

Ubuntu/Debian

sudo apt-get install graphicsmagick

Mac OS

brew install graphicsmagick

For windows or other OS, check:

GraphicsMagick

Working example:

const fs = require('fs');
const gm = require('gm');

gm('/tmp/img.jpg')
  .stream('webp')
  .pipe(fs.createWriteStream('/tmp/img.webp'));

gm('/tmp/img.jpg')
  .toBuffer('webp', (err, buffer) => {
    fs.writeFile('/tmp/img-buffer.webp', buffer, console.log)
  })

edited Jul 09 '18 at 20:54

answered Jul 09 '18 at 16:05

Marcos Casagrande

37,983
8
84
98

it only change format , not reduces sizes like other libraries – Haseeb Ahmad Jul 09 '18 at 20:22
Yes It does, it reduces it's size. Anyway that depends on the image, maybe there isn't anything to optimize. I just tested with a `14.5kb` `jpg` that when converted to `webp` got reduced to `2.3kb`. Anyway you asked how to convert to `webp` which my response clearly answers that question. – Marcos Casagrande Jul 09 '18 at 20:45
by which you test it – Haseeb Ahmad Jul 09 '18 at 20:52
your answer seems right but unfortunately it not working on my end – Haseeb Ahmad Jul 10 '18 at 09:32
it just print null and create empty webp files – Haseeb Ahmad Jul 10 '18 at 09:32
Show all your code, you're probably using the error value of the callback. Or you don't have the right dependency installed. – Marcos Casagrande Jul 10 '18 at 11:23
What does console.log(buffer) outputs?, which OS are you using? Do you have graphicsmagick? Or imagemagick? – Marcos Casagrande Jul 10 '18 at 11:31
it logs null and create empty webp file I am on ubuntu 14.04....yes I have both of them – Haseeb Ahmad Jul 10 '18 at 11:33
gm("input.jpg").write("output33.png", function (err) { if (err) throw err; }); – Haseeb Ahmad Jul 10 '18 at 11:34
this one converts it but I want to use buffer – Haseeb Ahmad Jul 10 '18 at 11:34
And what does console.log(err) shows? If buffer is null, then error must not be null.. – Marcos Casagrande Jul 10 '18 at 11:35
And you can't have both. Do `gm --version` and show me which version of graphicsmagick are you using. – Marcos Casagrande Jul 10 '18 at 11:36
gm version is 1.23.1 – Haseeb Ahmad Jul 10 '18 at 11:43
GraphicsMagick-config --version is 1.3.18 – Haseeb Ahmad Jul 10 '18 at 11:46
console.log outputs : Stream yields empty buffer – Haseeb Ahmad Jul 10 '18 at 11:48
The `err` throws : `Stream yields empty buffer`? – Marcos Casagrande Jul 10 '18 at 11:51

score 2 · Answer 2 · answered Jul 19 '18 at 06:44

2

For me, I am using gm version 1.3.30 and it does not include webp automatically. instead, you need to install it manually

To check, gm -version

Feature Support:
  Native Thread Safe       yes
  Large Files (> 32 bit)   yes
  Large Memory (> 32 bit)  yes
  BZIP                     yes
  ...
  WebP                     no
  WMF                      no
  X11                      no
  XML                      yes
  ZLIB                     yes

to install with brew,

brew install graphicsmagick --with-webp

if you already installed it before then

brew reinstall graphicsmagick --with-webp

including webp will solve the issue Stream yields empty buffer as well.

good luck !

answered Jul 19 '18 at 06:44

Daniel

606
7
23

How i can install webp on debian? – Muhammad Ateek Dec 02 '19 at 13:25
sudo apt install webp – MiguelSlv Jun 21 '20 at 11:14
i am using windows linux subsystem. in my case i had to install webp package. --with-wepb option was not supported. – MiguelSlv Jun 21 '20 at 11:15

How to convert image into webp using gm in node.js

2 Answers2