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

# Content-aware image cropping (video tutorial)

[githublink]: https://github.com/cloudinary-devs/auto-crop

## Overview

In a JavaScript environment, learn how to crop images using content-aware AI to keep the most interesting part of the image in the crop.

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

> **TIP**: :title=View the code

You can find the code from this tutorial in [GitHub][githublink].
## Tutorial contents
This tutorial presents the following topics. Click a timestamp to jump to that part of the video.
### Crop images automatically with Cloudinary
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=00 :player=cld} | If you're processing hundreds or thousands of images on a daily basis, you can automate [smart cropping](resizing_and_cropping#c_auto) to focus on the most interesting parts of your images.
|

### Crop images with URL parameters
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=15 :player=cld} | Cloudinary lets you crop images with simple URL parameters, such as `c_crop,h_1000,w_1500,x_430,y_120`, but if you want to crop many images it's not efficient to work out the parameters manually. 

### Using gravity for automatic cropping
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=32 :player=cld} | When cropping images automatically, and at scale, you can't just keep the center of images, as the most interesting part isn't always in the center. Instead, you can set the [gravity](resizing_and_cropping#control_gravity) parameter to say what you want to focus on. For maximum automation, use [automatic gravity](resizing_and_cropping#automatic_cropping_g_auto).
|

### Using the automatic cropping mode
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=55 :player=cld} | While gravity allows us to target the subject, it doesn't help to set an ideal crop by itself. There are many different [cropping methods](resizing_and_cropping#resize_and_crop_modes), which crop images in different ways. The [automatic](resizing_and_cropping#c_auto) cropping mode using AI to focus on the subject, while maintaining the context.
|

### Implement auto cropping in JavaScript
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=21 :player=cld} | In your JavaScript environment, install and configure the [Cloudinary JavaScript SDK](javascript_quick_start). Then, import the `auto` resize action and the `autoGravity` qualifier, and use the automatic resize function on your image, specifying a width and height and auto gravity.
|

```js
import { auto } from "@cloudinary/url-gen/actions/resize";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";

...

myImage.resize(auto().width(width).height(height).gravity(autoGravity()));
```

### See automatic cropping in action
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=46 :player=cld} |See how automatic cropping gives a tighter crop on the image of the golfer than the `fill` crop mode.
|

### Using automatic cropping with padding
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=2 :sec=08 :player=cld} |[Automatic cropping with padding](resizing_and_cropping#auto_pad) can give a better result than automatic cropping alone, depending on the display dimensions. To add padding, import the `autoPad` action, and use this instead of the `auto` action. You can specify a color for the padding, or let Cloudinary automatically decide based on the colors in the image.
|

```js
import { autoPad } from "@cloudinary/url-gen/actions/resize";
import { auto as bgAuto, color } from "@cloudinary/url-gen/qualifiers/background"

...

myImage.resize(autoPad().width(width).height(height)
.gravity(autoGravity()).background(bgAuto()));
// or .gravity(autoGravity()).background(color(#000000)));
```

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

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

> * Take a look at the [User-generated content guide](user_generated_content) to see all the features you can take advantage of when displaying user-generated content on your site.

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

  
  
  
    Configure the JavaScript SDK
    Install and configure the Cloudinary JavaScript SDK 
  

  
  
  
    Transformation Basics
    Learn the basics of a transformation URL 
  

  
  
  
    Color Accessibility in JavaScript
    Make your images accessible to color blind people 
  

 

 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.