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.

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

Check out the complete source code here:

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

The following are required for this article:

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

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

npx create-react-app <project-name>
Code language: HTML, XML (xml)

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:

    cd <project-name>  #changing directory
    npm install cloudinary-react #installs the cloudinary-react library
    npm start        #starting development server
Code language: PHP (php)

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

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.

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.

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:

import { CloudinaryContext, Image, Transformation } from "cloudinary-react";
    export default function Images() {
      return (
        <div>
          <CloudinaryContext cloudName="demo">
            <Image publicId="basketball_in_net.jpg">
              <Transformation width="200" height="200" crop="limit" />
            </Image>
            <br />
            <Image publicId="basketball_in_net.jpg">
              <Transformation width="200" height="200" crop="fill"/>
            </Image>
          </CloudinaryContext>
        </div>
      );
    }
Code language: JavaScript (javascript)

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.

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:

<Image publicId="butterfly.jpg">
      <Transformation gravity="face" width="200" height="200" crop="fill"/>
 </Image>
Code language: HTML, XML (xml)

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:

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.

• Cloudinary Image transformation
• Cloudinary Image resizing and croping
• Cloudinary Face detection based cropping