Crop and resize images in React (video tutorial)

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

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

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

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

1:26	Add a height value also, and you can crop the image to a square.

Automatically focus on the face

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

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

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

 

 

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.