Node.js in Practice: Image Processing

Preface

When working with Node.js, you’ll encounter scenarios that require image processing,

such as compressing images on upload,

or processing images in a Node.js desktop client.

This article covers common image processing operations in Node.js.

Common Image Processing Libraries

Here are the common image processing libraries for Node.js.

As you can see, sharp leads by a wide margin in every aspect:

npm package

GitHub URL

GitHub stars

GitHub issues

Last updated

npm downloads

sharp

https://github.com/lovell/sharp

26.4k

109

September 19, 2023

2831k

gm

https://github.com/aheckmann/gm

6.9k

321

September 21, 2022

225k

jimp

https://github.com/jimp-dev/jimp

13k

173

July 27, 2023

923k

lwip

https://github.com/EyalAr/lwip

2.4k

114

July 19, 2016

408

sharp

Official site: https://sharp.pixelplumbing.com/

GitHub: https://github.com/lovell/sharp#sharp

npm: https://www.npmjs.com/package/sharp

Features:

1. Compress large images into smaller ones and convert to common formats including jpg, png, webp, gif, etc.

2. Resize images, 4-5x faster than competitors

3. Common image operations including scaling, rotation, etc.

4. Multi-platform support including Windows, Linux, Mac, etc.

Supported formats:

1. Input: jpeg, png, webp, gif, avif, tiff, svg

2. Output: jpeg, png, webp, gif, avif, tiff

Installation

Requires Node.js 14.15.0 or higher

npm install sharp

During installation, a platform-specific binary file (~7MB) will be downloaded.

By default, npm will download the binary for the current platform, e.g., macOS binary on macOS.

To download binaries for a different platform, see: https://sharp.pixelplumbing.com/install#cross-platform

The official team kindly provides a China mirror.

Without the China mirror, the download may timeout locally.

npm_config_sharp_binary_host="https://npmmirror.com/mirrors/sharp" \
  npm_config_sharp_libvips_binary_host="https://npmmirror.com/mirrors/sharp-libvips" \
  npm install sharp

Getting an Image

Before operating on an image, you need to get an image object using the sharp method.

The input can be a file path, a buffer, etc.

See: https://sharp.pixelplumbing.com/api-constructor

// sharp
import sharp from 'sharp';

// image
const image = sharp(input);

Getting Image Info

Use the metadata method to get image information.

See: https://sharp.pixelplumbing.com/api-input#metadata

// sharp
import sharp from 'sharp';

// image
const image = sharp(input);

// info
const info = await image.metadata();

// info
{
    channels: 4,
    density: 72,
    depth: 'uchar',
    exif: Buffer @Uint8Array [],
    format: 'png',
    hasAlpha: true,
    hasProfile: true,
    height: 260,
    icc: Buffer @Uint8Array [],
    isProgressive: false,
    space: 'srgb',
    width: 506,
}

Image Conversion

Simple Image Conversion

Supports converting between common image formats like jpg, png, webp, gif, etc.

// sharp
import sharp from 'sharp';

// image
const image = sharp(input);

// convert
const newImage = await image.toFile(output);

Advanced Image Conversion

The toFile method above does not support advanced processing.

For each image format, sharp provides a dedicated method:

To jpg: https://sharp.pixelplumbing.com/api-output#jpeg

To png: https://sharp.pixelplumbing.com/api-output#png

To webp: https://sharp.pixelplumbing.com/api-output#webp

To gif: https://sharp.pixelplumbing.com/api-output#gif

// sharp
import sharp from 'sharp';

// image
const image = sharp(input);

// jpg
const newJpg = await image.jpeg(options).toFile(output);

// png
const newPng = await image.png(options).toFile(output);

// webp
const newWebp = await image.webp(options).toFile(output);

// gif
const newGif = await image.gif(options).toFile(output);

Image Resizing

Resize is one of the most common operations.

For options, see: https://sharp.pixelplumbing.com/api-resize

// sharp
import sharp from 'sharp';

// image
const image = sharp(input);

// new image
const newImage = await image.resize(options).toFile(output);

Other

Image compositing: https://sharp.pixelplumbing.com/api-composite

Image operations: https://sharp.pixelplumbing.com/api-operation

Image color: https://sharp.pixelplumbing.com/api-colour

qiao-img

A wrapper npm package, feel free to use it: https://www.npmjs.com/package/qiao-img

|— meta

const info = await meta(input);

|—file

const info = await file(input, output, meta);

|—convert

const info = await convert(input, output, meta, convertType, convertOptions);

|—resize

const info = await resize(input, output, options);

Also supports CLI usage: https://www.npmjs.com/package/qiao-img-cli

# Global install
npm i -g qiao-img-cli

# Help
qimg
qimg -h

# resize
qimg resize src width height fit

# convert
qimg convert src format

# meta
qimg meta src

Summary

1. Image processing library choice: sharp

2. sharp - Introduction

3. sharp - Installation

4. sharp - Getting an image

5. sharp - Getting image info

6. sharp - Image conversion

7. sharp - Image resizing

8. qiao-img, https://www.npmjs.com/package/qiao-img

9. qiao-img-cli, https://www.npmjs.com/package/qiao-img-cli