Image Processing in Node.js: resize and crop with Sharp

Working with Images in Node.js: resize and crop using Sharp

In modern web development, server-side image processing is a common task. Node.js offers several powerful libraries for working with graphics. In this article, we will take a detailed look at the Sharp library — a fast and efficient tool for resizing and cropping images.

Why Sharp?

Sharp uses native libvips libraries, making it one of the most performant solutions for Node.js. Key advantages:

• High processing speed (significantly faster than pure JavaScript alternatives)
• Low memory consumption
• Support for all popular formats: JPEG, PNG, WebP, AVIF, TIFF
• Simple and intuitive API
• Ability to work with streams

Installation

Installing Sharp in a Node.js project is done with a single command:

npm install sharp

After installation, the library is ready to use. Ensure that the necessary dependencies for building the native module are installed on the system (this usually happens automatically).

Basic Resizing (resize)

The resize() method allows you to change the dimensions of an image. Let's look at the main usage options.

Example 1: Simple Resizing

const sharp = require('sharp');const path = require('path');

async function resizeImage() {    try {        await sharp('input.jpg')            .resize(300, 200) // width 300px, height 200px            .toFile('output.jpg');        console.log('Image resized successfully');    } catch (error) {        console.error('Error:', error);    }}

resizeImage();

In this example, the image will be compressed to exact dimensions of 300x200 pixels, which may distort the proportions.

Example 2: Preserving Proportions

async function resizeWithProportions() {    await sharp('input.jpg')        .resize({            width: 400, // width only            height: undefined, // height will be calculated automatically            fit: 'inside' // preserve proportions        })        .toFile('output_inside.jpg');        console.log('Proportions preserved');}

The fit parameter accepts several values:

• cover — crops the image to completely fill the specified dimensions (default)
• contain — fits the image within the specified dimensions, preserving proportions
• fill — stretches the image to the specified dimensions
• inside — reduces the image so it fits within the specified dimensions
• outside — enlarges the image so it extends beyond the specified dimensions

Cropping Images (crop)

Sharp provides two main methods for cropping: using the extract() method and through resize() parameters.

The extract() Method

Allows you to cut a rectangular area from an image based on specified coordinates:

async function cropImage() {    await sharp('input.jpg')        .extract({            left: 100,   // left offset            top: 50,     // top offset            width: 300,  // area width            height: 200  // area height        })        .toFile('cropped.jpg');        console.log('Cropping completed');}

Automatic Cropping with resize

Often you need to resize and crop an image simultaneously. This is done using the gravity or position parameter:

async function cropAndResize() {    await sharp('input.jpg')        .resize(200, 200, {            fit: 'cover', // crop to exact