Last updated: Aug-18-2025
OverviewLearn how to dynamically generate images at different sizes and aspect ratios, and dynamically crop with AI in React using Cloudinary.
Video tutorial Tutorial contentsThis tutorial presents the following topics. Click a timestamp to jump to that part of the video.
Resize and crop images with Cloudinary Resizing an image on the client side   0:15 Resizing an image via theimg 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.
Â
âï¸ Feedback sent!
âï¸Â  ErrorUnfortunately there's been an error sending your feedback.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4