← coderrocketfuel.com

How to Compress JPEG Image Files Using Node.js

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

We'll be using an npm package called Imagemin that will do most of the heavy lifting for us. With that package, we'll implement the mozjpeg image compression library. The Mozjpeg library will reduce the file size while retaining image quality.

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-mozjpeg npm package.

The imagemin-mozjpeg npm package is a Node.js implementation of the mozjpeg image compression library and is a plugin for the imagemin npm package.

You can install both packages with either NPM or Yarn:

NPM:

npm install imagemin imagemin-mozjpeg --save

Yarn:

yarn add imagemin imagemin-mozjpeg

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

Compress a Single JPEG 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 imageminMozjpeg = require("imagemin-mozjpeg");

(async () => {
  const files = await imagemin(["your-image.jpg"], {
    destination: "compressed-images",
    plugins: [
      imageminMozjpeg({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-mozjpeg NPM packages.

Then, we create a self invoked async function that our code will run inside. 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 JPEG file (named "your-image.jpg") to the function. This is the image 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 JPEG images so the imagemin-mozjpeg plugin npm package will do the job.

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 JPEG 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 JPEG 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 JPEG 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 imageminMozjpeg = require("imagemin-mozjpeg");

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

The code is identical to the previous example example for one line.

In the array of file paths parameter we pass to the imagemin() function, we tell it to look for all JPEG images in the directory named images. The imagemin() function will then recursively run the function for each JPEG 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.