Whether we are building a blog, website, or social media platform, resizing images can help with faster load time and increase our application’s performance.

In this article, we will be learning how to resize images in a React.js application using Cloudinary.

Sandbox

We completed this project in Codesandbox. Fork and get started.

Github

Check out the complete source code here:

https://github.com/shosenwales/Image-resize

Prerequisites

The following are required for this article:

Basic understanding of React
A Cloudinary account (create a free account here)

Project Setup

We will start by creating a new React project by running the following command:

1npx create-react-app <project-name>

After successfully creating a project, let’s navigate into the project directory, install the cloudinary-react package, and start the application with the following commands:

1cd <project-name>  #changing directory
2    npm install cloudinary-react #installs the cloudinary-react library
3    npm start        #starting development server

React will start a development environment, which we can access at localhost:3000.

Get Images from Cloudinary

We'll use two of the images from the Cloudinary demo accounts for this project. We can find the images here and here.

Learn how to upload photos to Cloudinary by reading this blog post.

Resizing an Image

With Cloudinary’s Image transformation feature, images can be resized using any of the following techniques:

Scaling and cropping techniques
Smart cropping techniques

Now, let’s look at these techniques in detail.

Scaling and Cropping Techniques

This technique allows us to resize images by setting the image height, width, and crop/resize mode.

Cloudinary has a wide range of crop/resize modes that can dynamically resize images. Let’s try out some of these modes by creating a resize.js component in our src directory and adding the following code snippet:

1import { CloudinaryContext, Image, Transformation } from "cloudinary-react";
2    export default function Images() {
3      return (
4        <div>
5          <CloudinaryContext cloudName="demo">
6            <Image publicId="basketball_in_net.jpg">
7              <Transformation width="200" height="200" crop="limit" />
8            </Image>
9            <br />
10            <Image publicId="basketball_in_net.jpg">
11              <Transformation width="200" height="200" crop="fill"/>
12            </Image>
13          </CloudinaryContext>
14        </div>
15      );
16    }

Let’s break down the code above:

crop="limit": this cropping mode limits our image size after specifying the width and height, we’ll have an image that does not exceed our given width and height while resizing our image from its original 1000 x 635, to 200 x 127
crop="fill": by setting the width and height of an image, this cropping mode resizes our image to fill specified dimensions

The complete list of Cloudinary supported resize/crop modes can be found here.

Smart Cropping Techniques

Cloudinary allows us to use its intelligent cropping techniques, including face detection or auto-gravity, to focus on the essential parts of an image.

Let’s try this out by adding the following code snippet to our resize.js component:

1<Image publicId="butterfly.jpg">
2      <Transformation gravity="face" width="200" height="200" crop="fill"/>
3 </Image>

We used the gravity="face" parameter from the code above to automatically crop our image based on the detected face, which creates a 200 x 200 image with the fill cropping mode to keep as much as possible of the original image.

If we run our code, we should have the result below:

Conclusion

This article taught us how to resize images in React.js using Cloudinary's Resize and Cropping modes. Now we can easily resize and crop our images in React using Cloudinary’s Transformation tools.

Resize an Image in React.js Using Cloudinary