Sharpening Your Image: Watermarking with Sharp.js

What is Sharp.js and what are some tips for your next project?

4 min readApr 5, 2023

Sharp.js is a high-performance image processing library for Node.js, allowing you to easily perform various image manipulation tasks. Some common tasks are image resizing, operations such as rotation, metadata extraction, compositing, and gamma correction.

It is built on top of several powerful image-processing libraries. Some of the most noteworthy are libvips, libuv, libcairo, libimagequant, and libexif. Altogether, they power Sharp.js image processing capabilities, making it one of the easiest and most high-performance image-based processing library.

In this article, we will walk through the process of installing Sharp.js, using Sharp.js to process images, resizing images, and adding a watermark to images.

Installation/Setup

To start, you need to have Node.js and npm (Node Package Manager) installed on your computer. Once you have Node.js and npm installed you can install Sharp.js by running the following command in your terminal:

npm install sharp

This will install the latest version of Sharp.js and its dependencies. At the time of writing the current version of Sharp is 0.31.3

We will be using the following images in this tutorial:

My Aussiedoodle Lola — lola_lake.jpg (My dog “Lola”)

The words of my dogs name “Lola” — lola_watermark.png

Once Sharp.js is installed, you can start using it to process images. The most basic usage is to read an image file and extract metadata from an image, such as its dimensions, format, and density.

Here’s an example of how to extract metadata from an image:

The input source for Sharp.js will be an image path location. In this tutorial, we will use a jpg file provided above to extract metadata. We invoke the .metadata method and use .then to wait for the results. You can wrap the following code within an async/await method; but for simplicity, we will be using .then.

const Sharp = require("sharp");
Sharp("lola_lake.jpg")
  .metadata()
  .then((metadata) => console.log(metadata))
  .catch((err) => console.log("ERROR: ", err));

> {
  format: 'jpeg',
  width: 1080,
  height: 1920,
  space: 'srgb',
  channels: 3,
  depth: 'uchar',
  density: 72,
  chromaSubsampling: '4:2:0',
  isProgressive: false,
  hasProfile: true,
  hasAlpha: false,
  exif: <Buffer 45 78 69 66 00 00 4d 4d 00 2a 00 00 00 08 00 00 00 00 00 00>,
  icc: <Buffer 00 00 02 18 00 00 00 00 04 30 00 00 6d 6e 74 72 52 47 42 20 58 59 5a 20 00 00 00 00 00 00 00 00 00 00 00 00 61 63 73 70 00 00 00 00 00 00 00 00 00 00 ... 486 more bytes>
}

Some noteworthy metadata to extract from an image source are format, width, height, and channels.

Here’s an example of how to resize an image:

The input source for Sharp.js will be the same jpg image as before. We will then call the resize method and pass an object with width and height as properties.

const Sharp = require("sharp");
Sharp("lola_lake.jpg")
  .resize({
    width: 250,
    height: 250,
  })
  .toFile("lola_lake_resize.jpg");

There will be no console output after running the following code. Instead, there will be a new image with the name “lola_lake_resize.jpg” in your working directory.

The resize method expects an object with either width, height, or width x height. The default fit method will be cover in order to prioritize the aspect ratio.

You can view other resize options at the official Sharp.js docs.

Here’s an example of how to place a Watermark Image Over an Image:

We will utilize the “lola_watermark.png” in the provided assets.

const Sharp = require("sharp");
Sharp('lola_lake.jpg')
  .composite([{
    input: 'lola_watermark.png',
    gravity: 'southeast',
  }])
  .toFile('lola_lake_watermark.jpg', (err, info) => {
    if (err) {
      console.log("Error: ", err);
    } else {
      console.log(info);
    }
  });

Sharp.js provides various options to customize the watermark overlay. You can apply gravity, opacity, and even blend modes to achieve the desired effect. In this example, we utilize gravity to position the watermark at a specific location within the main image. Some different gravity options like north, northeast, east, southeast, south, southwest, west, northwest, and center .

blend modes that you can use to blend the watermark with the main image. Some popular blend modes include overlay, multiply, screen, darken, and lighten. To apply a blend mode, add the blend property to your composite configuration.

You can view other composite options at the official Sharp.js docs.