> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

  This video is brought to you by Cloudinary's video player - embed your own!Use the controls to set the playback speed, navigate to chapters of interest and select subtitles in your preferred language.

## 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
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=00 :player=cld} | You can [resize and crop images](resizing_and_cropping) on the fly with Cloudinary while also automatically focusing on the most interesting parts of your images. |

### Resizing an image on the client side
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=15 :player=cld} | 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
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=43 :player=cld} | Import and the use the `resize` method from the [React SDK](react_integration) to scale down our image on the server side and reduce the delivered image size.

### Cropping the image to a square
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=26 :player=cld} | Add a height value also, and you can `crop` the image to a square.

### Automatically focus on the face
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=42 :player=cld} | 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
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=56 :player=cld} | 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

> **READING**:
>
> * Watch more [Dev Hints videos](https://www.youtube.com/playlist?list=PL8dVGjLA2oMpaTbvoKCaRNBMQzBUIv7N8) on the [Cloudinary YouTube channel](https://www.youtube.com/cloudinary).

> * Learn more about [cropping images using automatic gravity](resizing_and_cropping#automatic_cropping_g_auto).

> * Learn more about the [React SDK](react_integration).

> * Discover more transformations in the [Transformation URL API reference](transformation_reference).

> * Learn how cropping and resizing images is essential to [e-commerce workflows](ecommerce_workflows_product#step_3).

#### 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 
  

 

 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.