Sharp: A High-Performance Image Processing Library for Node.js

Images play a crucial role in building modern, fast, and user-friendly applications. Nearly every application makes use of images in some way or another.

For example, users may want to resize their profile photos, and merchants often need to shape their images to make them as compelling as possible for buyers.

Large images can be frustrating since they take a long time to load and are challenging to store in a database. Fortunately, there’s a way to make images more user-friendly, load faster, and even appear in higher quality.

The typical use case for the Sharp library module is to convert large images in common formats to smaller, web-friendly JPEG, PNG, and WebP images of varying dimensions, according to the official Sharp documentation.

Formats

The Sharp library is versatile in handling a wide range of image formats. It supports reading images in formats such as JPEG, PNG, WebP, TIFF, GIF, and SVG.

For output, Sharp can generate images in JPEG, PNG, WebP, and TIFF formats, as well as provide uncompressed raw pixel data.

Sharp offers flexibility with input and output options, including Streams, Buffer objects, and the filesystem. You can even split a single input stream into multiple processing pipelines and output streams.

Additionally, Sharp can generate Deep Zoom image pyramids, making it ideal for use with “slippy map” tile viewers like OpenSeadragon.

Getting Started

1
yarn add sharp

Resizing Images

Let’s say we have a large image that takes forever to load. Instead of serving that big image, we should resize it appropriately, drastically reducing the load time of the application.

To resize images, Sharp only requires us to provide a path to the image, the new dimensions, and the output path for the newly resized image.

1
const sharp = require('sharp');
2
sharp('input.jpg')
3
  .resize(500, 450)
4
  .toFile('output.jpg', (err, info) => {
5
    console.log(info);
6
  });

This code resizes the original image to 500x450 dimensions.

Formatting Images

Changing the format of images is straightforward—simply chain functions together. The formatting has a .toFormat() function that takes the new format as the argument.

1
sharp('input.jpg')
2
  .toFormat('png')
3
  .jpeg({ quality: 100 })
4
  .toFile('output.png', (err, info) => {
5
    console.log(info);
6
  });

Notice we increased the quality of the image to 100, which is the maximum quality the image can have.

The quality specifier is an integer ranging from 1 to 100.

Once we run the code, an output.png file should appear in our project.

PNG output is always full-color at 8 or 16 bits per pixel. Indexed PNG input at 1, 2, or 4 bits per pixel is converted to 8 bits per pixel.

Some of these options require the use of a globally-installed libvips compiled with support for libimagequant (GPL), according to the Sharp official documentation.

Storing the Image in a Database

If you’re working with user profiles, you probably want to save the images in a database. Here’s how you can do that:

1
sharp('input.jpg')
2
  .resize(500, 450)
3
  .toBuffer()
4
  .then(data => {
5
    // store data in the database
6
  })
7
  .catch(err => {
8
    console.error(err);
9
  });

Notice how Sharp returns a promise instead of a callback. We can use that promise to perform actions when the image processing is done.

Async/Await Example

You can also use the async/await syntax instead of promises. Here’s an example:

1
async function processImage() {
2
  try {
3
    const data = await sharp('input.jpg')
4
      .resize(500, 450)
5
      .toBuffer();
6
    // store data in the database
7
  } catch (err) {
8
    console.error(err);
9
  }
10
}
11
processImage();

Rotating Images

Simple operations such as rotating images are easy with Sharp. Just call the rotate function with the number of degrees you want to rotate the image.

1
sharp('input.jpg')
2
  .rotate(180)
3
  .toFile('output.jpg', (err, info) => {
4
    console.log(info);
5
  });

You can also use the flip function if you want to rotate your image 180 degrees. This will produce the same output as above.