← coderrocketfuel.com

How To Compress WEBP Image Files Using Node.js

In this article, we'll show you how to programmatically compress WEBP images using Node.js.

We'll be using an npm package called Imagemin that will do most of the heavy lifting for us. Alongside that package, we'll use a plugin made specifically for handling WEBP files names imagemin-webp.

Before moving forward, make sure you have Node.js installed and an application directory setup for our code.

If needed, we wrote a guide on installing Node.js.

Let's get started!

Table Of Contents

Install Npm Packages

Before we can start writing our code, we need to install both the imagemin and imagemin-webp NPM packages.

You can install both packages with one of the below commands:

NPM:

npm install imagemin imagemin-webp --save

Yarn:

yarn add imagemin imagemin-webp

When that's done installing, we're ready for the next step!

Compress a Single WEBP Image

Now it's time to write some code!

Before writing and testing the code below, make sure you have an image that you want to compress in the root of your project directory. And also make sure you have a directory created for where the compressed image will be outputted to.

Once you have those two things set up, open your favorite text editor and add the code below to your Node.js file. We'll give you the full code and explain everything afterward.

Full code:

const imagemin = require("imagemin");
const imageminWebp = require("imagemin-webp");

(async () => {
  const files = await imagemin(["your-image.webp"], {
    destination: "compressed-images",
    plugins: [
      imageminWebp({quality: 50})
    ]
  });
})();

There's a lot going on here, so let's break it down.

The first thing we do is import the imagemin and imagemin-webp NPM packages.

Then, we create a self invoked async function that our code will run inside of. Inside of that, we use the imagemin() function from the imagemin npm package, which takes an array of file path strings and an options object as parameters.

We pass the path to our WEBP file (named "your-image.webp") to the function. This is the file that will get compressed.

Inside the options object, we give the path to where we want the new file outputted to. And we also add the imagemin plugin we want to use when compressing the image. In this case, we are working with WEBP images so the imagemin-webp plugin npm package will do the job.

For demonstration purposes, we have the quality setting set to 50. This number determines the quality factor the image compression algorithm will use, from 0 to 100. Feel free to play around with that number to see what kinds of effects it has on the quality and file size of your image.

After you run the code, the compressed image will be outputted to the /compressed-images directory or wherever you specified as your destination.

And if you look at the size of your new image, you'll notice it is much smaller than the original version. Also, notice that the image quality was not affected in any significant way.

Compress Multiple WEBP Images & Place Them in a New Directory

In the last example, we only compressed one image at a time. But what if you have a whole directory of images you want to compress? In this section, we'll show you how to do that.

The assumption with the code below is that you have a directory named images that holds one or more WEBP images inside it. And that you have another directory named /compressed-images that you want to output your compressed images to.

For the code to work, make sure you have both directories created and add some WEBP images to the /images directory.

Same as before, we'll give you the full code and explain everything afterward.

Full code:

const imagemin = require("imagemin");
const imageminWebp = require("imagemin-webp");

(async () => {
  const files = await imagemin(["images/*.{webp}"], {
    destination: "compressed-images",
    plugins: [
      imageminWebp({quality: 50})
    ]
  });
})();

Except for one line, the code is identical to the previous example.

In the array of file paths parameter we pass to the imagemin() function, we tell it to look for all WEBP images in the directory named images. The imagemin() function will then recursively run the function for each WEBP image in that directory.

After you run the code, all of the new images will be outputted to the compressed-images directory or wherever you specified as your destination.

And if you look at the size of the new images, you'll notice they are much smaller than the original version. Also, take notice that their image quality was not affected in any significant way.

You now know how to compress both solitary WEBP images and entire directories full of them using Node.js and the Imagemin NPM package!