Image Effects Ultimate Guide to Photo Gallery on Android A Comprehensive Guide to Adding Text to Images on Android Mastering Background Changes in React Applications Comprehensive Guide on Changing Background on Android Devices Mastering Image Rotation in Java A Guide to Adding Text to Images with Python A Guide to Converting Images to Grayscale with Python Introduction Creating an Image Overlay with JavaScript Rotating an Image in Python Creating a Dynamic Photo Gallery with jQuery Creating An Interactive Photo Gallery Using JavaScript Mastering Overlay in Android Mastering Angular Overlay: A Comprehensive Guide Comprehensive Guide to Overlay in Flutter Mastering Overlay React for Responsive Design Solutions Create a Blurred Image with PHP: A Comprehensive Guide Guide to Using Blur Image in Flutter Mastering Blur Image in React Native Mastering Image Blurring in Python Mastering the Art of Image Blurring Mastering the Art of Image Blurring in Java The Ultimate Guide to Blurring Images on Android Understanding and Implementing Blur Image in JQuery An Extensive Walkthrough of Blurring Images with JavaScript How to Use HTML, CSS, and JavaScript to Make an Image Slider HTML Image Tag How to Crop GIFs? How to Align Images with CSS Ken Burns Effect – Complete Guide and How to Apply It Cartoonify – Complete Guide on Cartoonify Image Effect Mastering Web Aesthetics: A Comprehensive Guide to Gradient Fades Sepia Effect: The Ultimate Guide to the Sepia Photo Effect What is Vignette? Guide to Vignette Image Editing Pixelate – The Ultimate Guide to the Pixelation Effect How to Outline an Image: Enhancing Visual Appeal and Depth Make Your Photos Pop with Image Effects Upscale Image – Developers guide to AI-driven image upscaling Image Manipulation: History, Concepts and a Complete Guide A Full Guide to Object-aware Cropping Simplify Your Life with Automatic Image Tagging How To Resize Images In WordPress How To Create a Progress Bar For Asset Uploads Animated GIFs – What They Are And How To Create Them How To Automatically Improve Image Resolution AI Drop Shadow Get Image Dimensions From URLs Automatically Add Sepia Effect To Images Automatically Make an Image a Cartoon Automatically Add Blur Faces Effect To Images Automatically Add Background Removal Effect to an Image How to Resize an Image with React How to Easily Resize an Image with React Native

How to Resize an Image with React

resize image react

Resizing means making an image smaller or larger without cropping or cutting out parts of the image. Resizing alters an image’s dimensions, typically affecting its file size and quality.

There are many reasons to resize an image. The most common is to reduce the image file size, making large images easier to email or share online. For developers, usually it’s done to ensure the images render properly on various devices and screen sizes when building a responsive website or web application. 

In this article, we will walk through how to resize an image with React, a JavaScript library for building user interfaces. This article will use React packages that contain the image transformation features of a platform called Cloudinary to consistently deliver images to the browser at the requested size.

Cloudinary is a visual media platform used to upload, store, manage, transform, and deliver images and videos for websites and applications. The platform also offers a vast collection of SDKs for frontend frameworks and libraries. With Cloudinary, you can organize your media assets and automatically generate optimized assets through unique links.

Sandbox

This project was completed in a CodeSandbox. Fork and run it to quickly resize an image with React.

    <CodeSandbox id="summer-leaf-14y5pp" title="How to resize image with React" />

View the codebase on GitHub here.

Using the Cloudinary React packages

To get started and resize an image with React:

  1. Create a free Cloudinary account — it’s free forever!
  2. Configure the React packages for the application.
  3. Upload the image to resize.
  4. Resize the image using the Cloudinary resize modes.

Configuring Cloudinary in our React application

After creating a Cloudinary account:

  1. Create a React application by navigating to a directory and running the below command in a terminal:

    npx create-react-app resize_image && cd resize_image
    

    The above command creates a React application called resize_image and navigates to the project directory.

    “Image

    2. Install the @cloudinary/url-gen and @cloudinary/react packages with:

    npm i @cloudinary/url-gen @cloudinary/react
    

    The @cloudinary/url-gen package includes all the functionalities needed to create delivery urls for the images.

    The @cloudinary/react package includes the React components for rendering, configuring, and transforming the images.

    3. Create a .env file in the root directory. Include the cloud name given during sign-up as an environment variable in order to use the Cloudinary components. Get the cloud name by logging into the Cloudinary console and viewing any of the highlighted sections as shown below:

    How to resize image with React

    In the file, add the variable below:

    REACT_APP_CLOUDINARY_CLOUD_NAME=/*YOUR CLOUD NAME HERE/*
    

    Now that we have finished the configuration process, it’s time to upload and resize an image with React.

    Uploading images to Cloudinary

    There are multiple ways we can upload images to Cloudinary. In this article, we will use the Upload widget. To upload an image using the Upload widget, click on Media Library and then click Upload:

    How to resize image with react upload

In the popup, select the Web Address option to upload the image via a url:

Upload image and resize with react

Copy the url below and paste to upload it:

https://images.unsplash.com/photo-1650940826212-f384698b71ab?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80

4. After uploading the image, get the image Public ID (the unique identifier for an asset stored in Cloudinary), as highlighted below. This is the ID we will use and resize:

Resize image with React inside dashboard

    Resize the image using one of Cloudinary’s resizing modes. 

Resize an image with React using Cloudinary

Cloudinary provides eight resizing modes. You can view all of the modes in the Cloudinary Documentation.

For this post, we will use the scale resizing mode.

Using scale resizing mode 

To use the scale resizing mode to resize an image with React, we must first import the Cloudinary packages, the Cloudinary AdvancedImage component, and the required scale action.


In the src/App.js file of the React application, add:

    import { Cloudinary } from "@cloudinary/url-gen";
    import { AdvancedImage } from "@cloudinary/react";
    // Import required action.
    import {scale} from "@cloudinary/url-gen/actions/resize";

The AdvancedImage component creates an image by passing the generated Cloudinary image url.

Instantiate Cloudinary and pass a cloud name to use the Cloudinary packages and components.

Then, in the App.js file, add:

    const App = () => {
      const cld = new Cloudinary({
        cloud: {
          cloudName: process.env.REACT_APP_CLOUDINARY_CLOUD_NAME
        }
      });

      return (
      );
    }
    export default App;

Create a variable that will use the cld instance with the image Public ID to generate the image url:

    const imageToResizeToSpecifiedDimension = cld.image("<image_publicId>");

Use scale to resize the image:

    imageToResizeToSpecifiedDimension.resize(scale().width(300))

In the return (); function, add the JSX to display the image on the browser using the Cloudinary AdvancedImage component. 

    return (
      <div>
        <AdvancedImage cldImg={imageToResizeToSpecifiedDimension} />
      </div>
    );

Resizing results

The uploaded image at 870 width x 580 height before resizing:

Resize image with React

The uploaded image resized at 300 width x 200 height:

Uploaded image resized

Conclusion

This article explained how to resize an image with React using Cloudinary’s scale resizing mode. Cloudinary also offers advanced media functionality like filtering, cropping, retouching, etc. To learn more, see the Cloudinary Documentation. And be sure to try it out (it’s free forever!) to unleash the full potential of your digital media.

More from Cloudinary:

Last updated: Nov 22, 2023