Programmable Media

Crop and resize images in React (video tutorial)

Last updated: Sep-12-2024

Overview

Learn how to dynamically generate images at different sizes and aspect ratios, and dynamically crop with AI in React using Cloudinary.

Video tutorial


Tutorial contents

This tutorial presents the following topics. Click a timestamp to jump to that part of the video.

Resize and crop images with Cloudinary

Jump to this spot in the video  0:00 You can resize and crop images on the fly with Cloudinary while also automatically focusing on the most interesting parts of your images.

Resizing an image on the client side

Jump to this spot in the video  0:15 Resizing an image via the img tag delivers the file at its original size and scales it down on the client side, which is not very efficient.

Resizing an image on the server side

Jump to this spot in the video  0:43 Import and the use the resize method from the React SDK to scale down our image on the server side and reduce the delivered image size.

Cropping the image to a square

Jump to this spot in the video  1:26 Add a height value also, and you can crop the image to a square.

Automatically focus on the face

Jump to this spot in the video  1:42 Add the gravity parameter and set to auto to use the AI capabilities of Cloudinary and focus on the face.

Chain on another resize event

Jump to this spot in the video  1:56 You can add another resize event that will act on the result of the first resize event. In this case, first cropping an image and then scaling it down.

Keep learning

Related topics

If you like this, you might also like...

Transformation Basics
Learn the basics of a transformation URL
Gravity Crops for Images
Indicate which areas to keep when cropping
Complex Transformations
Combine transformations to generate a 3D canvas

 

Cloudinary Academy

 

Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.

 

✔️ Feedback sent!

Rate this page: