Crop and resize images in React (video tutorial)
Last updated: Feb-26-2024
On this page:
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
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
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
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
Add a height value also, and you can crop the image to a square. |
Automatically focus on the face
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
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
- Watch more Dev Hints videos on the Cloudinary YouTube channel.
- Learn more about cropping images using automatic gravity.
- Learn more about the React SDK.
- Discover more transformations in the Transformation URL API reference.
If you like this, you might also like...
Transformation Basics
Learn the basics of a transformation URLGravity Crops for Images
Indicate which areas to keep when croppingComplex Transformations
Combine transformations to generate a 3D canvas
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.
✖️