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

# Automatic gravity for image crops


Automatic gravity (`g_auto`) uses AI to identify the most visually important areas of an image and keeps them in frame when you crop or resize. This page covers how to configure automatic gravity, adjust its focal preferences, select between algorithms, and use the rule of thirds principle.

## How automatic gravity works
Cloudinary's intelligent gravity selection capabilities ensure that the most interesting areas of each image are selected as the main focus for the requested crop, not only for photos with faces, but for any content type. Each image is analyzed individually to find the optimal region to include while cropping. Automatically detected faces (or other elements) are, by default, given higher priority while analyzing the image content.
You apply automatic content-aware gravity by setting the `gravity` transformation parameter to `auto` (`g_auto` in URLs).

Here's an example of using automatic gravity when changing the aspect ratio of an image:

Original

c_fill,g_center,h_300,w_200Regular fill

c_fill,g_auto,h_300,w_200Automatic fill

![Automatic fill](https://res.cloudinary.com/demo/image/upload/c_fill,g_auto,h_300,w_200/basketball_in_net.jpg "with_image: false")

```nodejs
cloudinary.image("basketball_in_net.jpg", {gravity: "auto", height: 300, width: 200, crop: "fill"})
```

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

new CloudinaryImage("basketball_in_net.jpg").resize(
  fill()
    .width(200)
    .height(300)
    .gravity(autoGravity())
);
```

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

new CloudinaryImage("basketball_in_net.jpg").resize(
  fill()
    .width(200)
    .height(300)
    .gravity(autoGravity())
);
```

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

new CloudinaryImage("basketball_in_net.jpg").resize(
  fill()
    .width(200)
    .height(300)
    .gravity(autoGravity())
);
```

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

new CloudinaryImage("basketball_in_net.jpg").resize(
  fill()
    .width(200)
    .height(300)
    .gravity(autoGravity())
);
```

```python
CloudinaryImage("basketball_in_net.jpg").image(gravity="auto", height=300, width=200, crop="fill")
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Gravity;

(new ImageTag('basketball_in_net.jpg'))
	->resize(Resize::fill()->width(200)
->height(300)
	->gravity(
	Gravity::autoGravity())
	);
```

```java
cloudinary.url().transformation(new Transformation().gravity("auto").height(300).width(200).crop("fill")).imageTag("basketball_in_net.jpg");
```

```ruby
cl_image_tag("basketball_in_net.jpg", gravity: "auto", height: 300, width: 200, crop: "fill")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("auto").Height(300).Width(200).Crop("fill")).BuildImageTag("basketball_in_net.jpg")
```

```dart
cloudinary.image('basketball_in_net.jpg').transformation(Transformation()
	.resize(Resize.fill().width(200)
.height(300)
	.gravity(
	Gravity.autoGravity())
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("auto").setHeight(300).setWidth(200).setCrop("fill")).generate("basketball_in_net.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().gravity("auto").height(300).width(200).crop("fill")).generate("basketball_in_net.jpg");
```

```flutter
cloudinary.image('basketball_in_net.jpg').transformation(Transformation()
	.resize(Resize.fill().width(200)
.height(300)
	.gravity(
	Gravity.autoGravity())
	));
```

```kotlin
cloudinary.image {
	publicId("basketball_in_net.jpg")
	 resize(Resize.fill() { width(200)
 height(300)
	 gravity(
	Gravity.autoGravity())
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("basketball_in_net.jpg", {gravity: "auto", height: 300, width: 200, crop: "fill"})
```

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

new CloudinaryImage("basketball_in_net.jpg").resize(
  fill()
    .width(200)
    .height(300)
    .gravity(autoGravity())
);
```

Automatic gravity for crops is supported for the [fill](image_crop_modes#fill), [lfill](image_crop_modes#lfill_limit_fill), [fill_pad](image_crop_modes#fill_pad), [thumb](image_crop_modes#thumb), [crop](image_crop_modes#crop) and [auto](image_crop_modes#c_auto) modes.

> **TIP**:
>
> :title=Notes and tips

> * Automatic gravity can be further qualified with various [focal gravity options](transformation_reference#g_auto), such as `g_auto:faces`.

> * If [custom coordinates](custom_focus_areas#custom_coordinates) have been specified for an image (using the [Upload API](image_upload_api_reference) or the [Cloudinary Console](https://console.cloudinary.com/console)), the cropping or overlay will be based on that definition, taking the custom coordinates as-is and overriding the detection algorithm (the same as `g_custom`). This applies to all `focal_gravity` options except for `g_auto:custom_no_override`, `g_auto:aoi_<custom coordinates>` and `g_auto:none`.

> * You can add the [getinfo](transformation_reference#fl_get_info) flag (`fl_getinfo` in URLs) in your transformation to return the proposed `g_auto` cropping results in JSON instead of delivering the transformed image. You can then integrate the `g_auto` results into an external workflow, for example to display the proposed `g_auto` crop as the initial cropping suggestion in an external editing tool.

> * By default, `g_auto` applies an optimal combination of our AI and saliency-based algorithms to capture the best region to include in your cropped image. However, in certain situations you may want to explicitly request only one of the [automatic gravity algorithms](#selecting_a_single_automatic_gravity_algorithm) and/or adjust the default [focal preference](#adjusting_the_automatic_gravity_focal_preference) of the chosen algorithm.

> * Automatic gravity is not supported for [animated images](animated_images). If `g_auto` is used in an animated image transformation, `center` gravity is applied, except when `c_fill_pad` is also specified, in which case an error is returned.

> * By default, the automatic gravity algorithm uses the [rule of thirds](#the_rule_of_thirds) principle. You can disable this if you want the focal point to be at the center of the image.

## Adjusting the automatic gravity focal preference

By default, both the saliency and subject automatic gravity algorithms give increased priority to detected `faces`. To adjust the focal preference of the automatic gravity algorithm, you can specify a different `focal_gravity` option.

**To adjust the focal preference for automatic gravity:**

1. Set the crop mode to a cropping mode that supports automatic gravity (such as `fill`, `lfill`, `fill_pad`, `thumb`, `crop`, or `auto`).
2. Set the gravity to `auto` with a specific focal preference, for example:
   * `g_auto:faces` - Prioritize faces (default)
   * `g_auto:hat` - Prioritize hats (requires [Cloudinary AI Content Analysis add-on](cloudinary_ai_content_analysis_addon))
   * `g_auto:ocr_text` - Prioritize text (requires [OCR Text Detection and Extraction Add-on](ocr_text_detection_and_extraction_addon))
   * Or any other [focal gravity option](transformation_reference#g_special_position)
3. Specify your desired dimensions.

For example, if you are registered to the [Cloudinary AI Content Analysis add-on](cloudinary_ai_content_analysis_addon), you can instruct the gravity algorithm to give top priority to one or more specific objects or categories from an extensive list.

In this example, give top priority to any hat in the picture (`g_auto:hat`), while taking other elements of the picture into account (for example, the face):

![Use automatic crop with focus on the hat](https://res.cloudinary.com/demo/image/upload/ar_1:1,c_auto,g_auto:hat,w_400/docs/clothing.jpg "with_image: false")

```nodejs
cloudinary.image("docs/clothing.jpg", {aspect_ratio: "1:1", gravity: "auto:hat", width: 400, crop: "auto"})
```

```react
import { auto } from "@cloudinary/url-gen/actions/resize";
import { ar1X1 } from "@cloudinary/url-gen/qualifiers/aspectRatio";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";
import { focusOn } from "@cloudinary/url-gen/qualifiers/autoFocus";

new CloudinaryImage("docs/clothing.jpg").resize(
  auto()
    .width(400)
    .aspectRatio(ar1X1())
    .gravity(autoGravity().autoFocus(focusOn("hat")))
);
```

```vue
import { auto } from "@cloudinary/url-gen/actions/resize";
import { ar1X1 } from "@cloudinary/url-gen/qualifiers/aspectRatio";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";
import { focusOn } from "@cloudinary/url-gen/qualifiers/autoFocus";

new CloudinaryImage("docs/clothing.jpg").resize(
  auto()
    .width(400)
    .aspectRatio(ar1X1())
    .gravity(autoGravity().autoFocus(focusOn("hat")))
);
```

```angular
import { auto } from "@cloudinary/url-gen/actions/resize";
import { ar1X1 } from "@cloudinary/url-gen/qualifiers/aspectRatio";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";
import { focusOn } from "@cloudinary/url-gen/qualifiers/autoFocus";

new CloudinaryImage("docs/clothing.jpg").resize(
  auto()
    .width(400)
    .aspectRatio(ar1X1())
    .gravity(autoGravity().autoFocus(focusOn("hat")))
);
```

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

new CloudinaryImage("docs/clothing.jpg").resize(
  auto()
    .width(400)
    .aspectRatio(ar1X1())
    .gravity(autoGravity().autoFocus(focusOn("hat")))
);
```

```python
CloudinaryImage("docs/clothing.jpg").image(aspect_ratio="1:1", gravity="auto:hat", width=400, crop="auto")
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\AspectRatio;
use Cloudinary\Transformation\Gravity;
use Cloudinary\Transformation\AutoFocus;

(new ImageTag('docs/clothing.jpg'))
	->resize(Resize::auto()->width(400)
	->aspectRatio(
	AspectRatio::ar1X1())
	->gravity(
	Gravity::autoGravity()
	->autoFocus(
	AutoFocus::focusOn("hat"))
	)
	);
```

```java
cloudinary.url().transformation(new Transformation().aspectRatio("1:1").gravity("auto:hat").width(400).crop("auto")).imageTag("docs/clothing.jpg");
```

```ruby
cl_image_tag("docs/clothing.jpg", aspect_ratio: "1:1", gravity: "auto:hat", width: 400, crop: "auto")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio("1:1").Gravity("auto:hat").Width(400).Crop("auto")).BuildImageTag("docs/clothing.jpg")
```

```dart
cloudinary.image('docs/clothing.jpg').transformation(Transformation()
	.resize(Resize.auto().width(400)
	.aspectRatio(
	AspectRatio.ar1X1())
	.gravity(
	Gravity.autoGravity()
	.autoFocus(
	AutoFocus.focusOn("hat"))
	)
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio("1:1").setGravity("auto:hat").setWidth(400).setCrop("auto")).generate("docs/clothing.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().aspectRatio("1:1").gravity("auto:hat").width(400).crop("auto")).generate("docs/clothing.jpg");
```

```flutter
cloudinary.image('docs/clothing.jpg').transformation(Transformation()
	.resize(Resize.auto().width(400)
	.aspectRatio(
	AspectRatio.ar1X1())
	.gravity(
	Gravity.autoGravity()
	.autoFocus(
	AutoFocus.focusOn("hat"))
	)
	));
```

```kotlin
cloudinary.image {
	publicId("docs/clothing.jpg")
	 resize(Resize.auto() { width(400)
	 aspectRatio(
	AspectRatio.ar1X1())
	 gravity(
	Gravity.autoGravity() {
	 autoFocus(
	AutoFocus.focusOn("hat"))
	 })
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/clothing.jpg", {aspect_ratio: "1:1", gravity: "auto:hat", width: 400, crop: "auto"})
```

```react_native
import { auto } from "@cloudinary/url-gen/actions/resize";
import { ar1X1 } from "@cloudinary/url-gen/qualifiers/aspectRatio";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";
import { focusOn } from "@cloudinary/url-gen/qualifiers/autoFocus";

new CloudinaryImage("docs/clothing.jpg").resize(
  auto()
    .width(400)
    .aspectRatio(ar1X1())
    .gravity(autoGravity().autoFocus(focusOn("hat")))
);
```

Original

ar_1:1,c_auto,g_auto:hat,w_400Focus on the hat

> **TIP**: Compare this with the example in [Object positions](image_gravity#object_positions).

The [OCR Text Detection and Extraction Add-on](ocr_text_detection_and_extraction_addon) lets you give a higher priority to text by setting the `gravity` qualifier to `auto:ocr_text`, while also giving priority to faces and other very prominent elements of an image.

![Use automatic crop with focus on the text](https://res.cloudinary.com/demo/image/upload/ar_1.1,c_crop,g_auto:ocr_text,w_300/home_4_sale.jpg "with_image: false")

```nodejs
cloudinary.image("home_4_sale.jpg", {aspect_ratio: "1.1", gravity: "auto:ocr_text", width: 300, crop: "crop"})
```

```react
import { crop } from "@cloudinary/url-gen/actions/resize";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";
import { focusOn } from "@cloudinary/url-gen/qualifiers/autoFocus";
import { ocr } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("home_4_sale.jpg").resize(
  crop()
    .width(300)
    .aspectRatio(1.1)
    .gravity(autoGravity().autoFocus(focusOn(ocr())))
);
```

```vue
import { crop } from "@cloudinary/url-gen/actions/resize";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";
import { focusOn } from "@cloudinary/url-gen/qualifiers/autoFocus";
import { ocr } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("home_4_sale.jpg").resize(
  crop()
    .width(300)
    .aspectRatio(1.1)
    .gravity(autoGravity().autoFocus(focusOn(ocr())))
);
```

```angular
import { crop } from "@cloudinary/url-gen/actions/resize";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";
import { focusOn } from "@cloudinary/url-gen/qualifiers/autoFocus";
import { ocr } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("home_4_sale.jpg").resize(
  crop()
    .width(300)
    .aspectRatio(1.1)
    .gravity(autoGravity().autoFocus(focusOn(ocr())))
);
```

```js
import { crop } from "@cloudinary/url-gen/actions/resize";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";
import { focusOn } from "@cloudinary/url-gen/qualifiers/autoFocus";
import { ocr } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("home_4_sale.jpg").resize(
  crop()
    .width(300)
    .aspectRatio(1.1)
    .gravity(autoGravity().autoFocus(focusOn(ocr())))
);
```

```python
CloudinaryImage("home_4_sale.jpg").image(aspect_ratio="1.1", gravity="auto:ocr_text", width=300, crop="crop")
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Gravity;
use Cloudinary\Transformation\AutoFocus;
use Cloudinary\Transformation\FocusOn;

(new ImageTag('home_4_sale.jpg'))
	->resize(Resize::crop()->width(300)
->aspectRatio(1.1)
	->gravity(
	Gravity::autoGravity()
	->autoFocus(
	AutoFocus::focusOn(
	FocusOn::ocr()))
	)
	);
```

```java
cloudinary.url().transformation(new Transformation().aspectRatio("1.1").gravity("auto:ocr_text").width(300).crop("crop")).imageTag("home_4_sale.jpg");
```

```ruby
cl_image_tag("home_4_sale.jpg", aspect_ratio: "1.1", gravity: "auto:ocr_text", width: 300, crop: "crop")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio("1.1").Gravity("auto:ocr_text").Width(300).Crop("crop")).BuildImageTag("home_4_sale.jpg")
```

```dart
cloudinary.image('home_4_sale.jpg').transformation(Transformation()
	.resize(Resize.crop().width(300)
.aspectRatio(1.1)
	.gravity(
	Gravity.autoGravity()
	.autoFocus(
	AutoFocus.focusOn(
	FocusOn.ocr()))
	)
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio("1.1").setGravity("auto:ocr_text").setWidth(300).setCrop("crop")).generate("home_4_sale.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().aspectRatio("1.1").gravity("auto:ocr_text").width(300).crop("crop")).generate("home_4_sale.jpg");
```

```flutter
cloudinary.image('home_4_sale.jpg').transformation(Transformation()
	.resize(Resize.crop().width(300)
.aspectRatio(1.1)
	.gravity(
	Gravity.autoGravity()
	.autoFocus(
	AutoFocus.focusOn(
	FocusOn.ocr()))
	)
	));
```

```kotlin
cloudinary.image {
	publicId("home_4_sale.jpg")
	 resize(Resize.crop() { width(300)
 aspectRatio(1.1F)
	 gravity(
	Gravity.autoGravity() {
	 autoFocus(
	AutoFocus.focusOn(
	FocusOn.ocr()))
	 })
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("home_4_sale.jpg", {aspect_ratio: "1.1", gravity: "auto:ocr_text", width: 300, crop: "crop"})
```

```react_native
import { crop } from "@cloudinary/url-gen/actions/resize";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";
import { focusOn } from "@cloudinary/url-gen/qualifiers/autoFocus";
import { ocr } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("home_4_sale.jpg").resize(
  crop()
    .width(300)
    .aspectRatio(1.1)
    .gravity(autoGravity().autoFocus(focusOn(ocr())))
);
```

Original

ar_1.1,c_crop,g_auto:ocr_text,w_300Focus on the text

For a complete list of all `focal_gravity` options, see the [g_\<special_position\>](transformation_reference#g_special_position) section of the _Transformation URL API Reference_.

## Automatic gravity with the fill mode

Use the `fill` mode with automatic gravity to keep most of the original image according to the requested dimensions of the derived image, ensuring that the most interesting regions of the original image are included in the resulting image.

Example of square aspect ratio cropping, regular vs. automatic:

Original

c_fill,g_center,h_200,w_200Regular fill

c_fill,g_auto,h_200,w_200Automatic fill

![Automatic fill](https://res.cloudinary.com/demo/image/upload/c_fill,g_auto,h_200,w_200/face_left.jpg "with_image: false")

```nodejs
cloudinary.image("face_left.jpg", {gravity: "auto", height: 200, width: 200, crop: "fill"})
```

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

new CloudinaryImage("face_left.jpg").resize(
  fill()
    .width(200)
    .height(200)
    .gravity(autoGravity())
);
```

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

new CloudinaryImage("face_left.jpg").resize(
  fill()
    .width(200)
    .height(200)
    .gravity(autoGravity())
);
```

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

new CloudinaryImage("face_left.jpg").resize(
  fill()
    .width(200)
    .height(200)
    .gravity(autoGravity())
);
```

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

new CloudinaryImage("face_left.jpg").resize(
  fill()
    .width(200)
    .height(200)
    .gravity(autoGravity())
);
```

```python
CloudinaryImage("face_left.jpg").image(gravity="auto", height=200, width=200, crop="fill")
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Gravity;

(new ImageTag('face_left.jpg'))
	->resize(Resize::fill()->width(200)
->height(200)
	->gravity(
	Gravity::autoGravity())
	);
```

```java
cloudinary.url().transformation(new Transformation().gravity("auto").height(200).width(200).crop("fill")).imageTag("face_left.jpg");
```

```ruby
cl_image_tag("face_left.jpg", gravity: "auto", height: 200, width: 200, crop: "fill")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("auto").Height(200).Width(200).Crop("fill")).BuildImageTag("face_left.jpg")
```

```dart
cloudinary.image('face_left.jpg').transformation(Transformation()
	.resize(Resize.fill().width(200)
.height(200)
	.gravity(
	Gravity.autoGravity())
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("auto").setHeight(200).setWidth(200).setCrop("fill")).generate("face_left.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().gravity("auto").height(200).width(200).crop("fill")).generate("face_left.jpg");
```

```flutter
cloudinary.image('face_left.jpg').transformation(Transformation()
	.resize(Resize.fill().width(200)
.height(200)
	.gravity(
	Gravity.autoGravity())
	));
```

```kotlin
cloudinary.image {
	publicId("face_left.jpg")
	 resize(Resize.fill() { width(200)
 height(200)
	 gravity(
	Gravity.autoGravity())
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("face_left.jpg", {gravity: "auto", height: 200, width: 200, crop: "fill"})
```

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

new CloudinaryImage("face_left.jpg").resize(
  fill()
    .width(200)
    .height(200)
    .gravity(autoGravity())
);
```

> **NOTE**: You can also use automatic gravity with the [lfill](image_crop_modes#lfill_limit_fill) cropping mode.

## Automatic gravity with the thumb mode

Use the `thumb` mode with automatic gravity to apply more aggressive cropping than the [fill](#automatic_gravity_with_the_fill_mode) mode. This mode attempts to further zoom in and crop out less interesting image regions when relevant in order to include the most interesting objects in the resulting derived image. The automatic cropping algorithm decides whether and how aggressively to zoom in and crop according to the content and cropping ratio of each image individually. A numerical value between 0 and 100 can be added to the `g_auto` parameter in order to advise the algorithm regarding the desired aggressiveness level (e.g., `g_auto:0` for the most aggressive thumb cropping).

Example of a square thumbnail, regular vs. automatic cropping:

Original

c_thumb,g_center Regular thumbnail 

c_thumb,g_auto Automatic thumbnail 

c_thumb,g_auto:0 Automatic thumbnail - most aggressive

![Automatic thumb](https://res.cloudinary.com/demo/image/upload/c_thumb,g_auto:0,h_150,w_150/sunset_shoes.jpg "with_image: false")

```nodejs
cloudinary.image("sunset_shoes.jpg", {gravity: "auto:0", height: 150, width: 150, crop: "thumb"})
```

```react
new CloudinaryImage("sunset_shoes.jpg").addTransformation(
  "c_thumb,g_auto:0,h_150,w_150"
);
```

```vue
new CloudinaryImage("sunset_shoes.jpg").addTransformation(
  "c_thumb,g_auto:0,h_150,w_150"
);
```

```angular
new CloudinaryImage("sunset_shoes.jpg").addTransformation(
  "c_thumb,g_auto:0,h_150,w_150"
);
```

```js
new CloudinaryImage("sunset_shoes.jpg").addTransformation(
  "c_thumb,g_auto:0,h_150,w_150"
);
```

```python
CloudinaryImage("sunset_shoes.jpg").image(gravity="auto:0", height=150, width=150, crop="thumb")
```

```php
(new ImageTag('sunset_shoes.jpg'))
	->addTransformation("c_thumb,g_auto:0,h_150,w_150");
```

```java
cloudinary.url().transformation(new Transformation().gravity("auto:0").height(150).width(150).crop("thumb")).imageTag("sunset_shoes.jpg");
```

```ruby
cl_image_tag("sunset_shoes.jpg", gravity: "auto:0", height: 150, width: 150, crop: "thumb")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("auto:0").Height(150).Width(150).Crop("thumb")).BuildImageTag("sunset_shoes.jpg")
```

```dart
cloudinary.image('sunset_shoes.jpg').transformation(Transformation()
	.addTransformation("c_thumb,g_auto:0,h_150,w_150"));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("auto:0").setHeight(150).setWidth(150).setCrop("thumb")).generate("sunset_shoes.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().gravity("auto:0").height(150).width(150).crop("thumb")).generate("sunset_shoes.jpg");
```

```flutter
cloudinary.image('sunset_shoes.jpg').transformation(Transformation()
	.addTransformation("c_thumb,g_auto:0,h_150,w_150"));
```

```kotlin
cloudinary.image {
	publicId("sunset_shoes.jpg")
	 addTransformation("c_thumb,g_auto:0,h_150,w_150") 
}.generate()
```

```jquery
$.cloudinary.image("sunset_shoes.jpg", {gravity: "auto:0", height: 150, width: 150, crop: "thumb"})
```

```react_native
new CloudinaryImage("sunset_shoes.jpg").addTransformation(
  "c_thumb,g_auto:0,h_150,w_150"
);
```

> **NOTE**: The numeric value supplied for `auto` gravity together with `thumb` cropping indicates your preference for more or less aggressive zooming and the algorithm takes that preference into account. However, the automatic gravity algorithm may still determine that for a particular image and aspect ratio, its default zoom selection is the appropriate zoom for this image. In such a case, you may not see a difference between the default `g_auto` and `g_auto` with a specific aggressiveness level.

## Automatic gravity with the crop mode

Use the `crop` mode with automatic gravity to crop a region of exactly the specified dimensions out of the original image while automatically focusing on the most interesting region of the original image that fits within the required dimensions. The portion of the interesting area depends on the resolution of the original image. The `crop` mode is less useful than the [fill](#automatic_gravity_with_the_fill_mode), [lfill](image_crop_modes#lfill_limit_fill), and [thumb](#automatic_gravity_with_the_thumb_mode) modes, as it is only practical to use when both the dimensions of the original image and the size of the interesting region are already known.

Example of a square crop, regular vs. auto cropping:

Original

c_crop,g_center Regular crop 

c_crop,g_auto Automatic crop 

![Automatic crop](https://res.cloudinary.com/demo/image/upload/c_crop,g_auto,h_250,w_200/docs/hot-air-balloons.jpg "with_image: false")

```nodejs
cloudinary.image("docs/hot-air-balloons.jpg", {gravity: "auto", height: 250, width: 200, crop: "crop"})
```

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

new CloudinaryImage("docs/hot-air-balloons.jpg").resize(
  crop()
    .width(200)
    .height(250)
    .gravity(autoGravity())
);
```

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

new CloudinaryImage("docs/hot-air-balloons.jpg").resize(
  crop()
    .width(200)
    .height(250)
    .gravity(autoGravity())
);
```

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

new CloudinaryImage("docs/hot-air-balloons.jpg").resize(
  crop()
    .width(200)
    .height(250)
    .gravity(autoGravity())
);
```

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

new CloudinaryImage("docs/hot-air-balloons.jpg").resize(
  crop()
    .width(200)
    .height(250)
    .gravity(autoGravity())
);
```

```python
CloudinaryImage("docs/hot-air-balloons.jpg").image(gravity="auto", height=250, width=200, crop="crop")
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Gravity;

(new ImageTag('docs/hot-air-balloons.jpg'))
	->resize(Resize::crop()->width(200)
->height(250)
	->gravity(
	Gravity::autoGravity())
	);
```

```java
cloudinary.url().transformation(new Transformation().gravity("auto").height(250).width(200).crop("crop")).imageTag("docs/hot-air-balloons.jpg");
```

```ruby
cl_image_tag("docs/hot-air-balloons.jpg", gravity: "auto", height: 250, width: 200, crop: "crop")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("auto").Height(250).Width(200).Crop("crop")).BuildImageTag("docs/hot-air-balloons.jpg")
```

```dart
cloudinary.image('docs/hot-air-balloons.jpg').transformation(Transformation()
	.resize(Resize.crop().width(200)
.height(250)
	.gravity(
	Gravity.autoGravity())
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("auto").setHeight(250).setWidth(200).setCrop("crop")).generate("docs/hot-air-balloons.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().gravity("auto").height(250).width(200).crop("crop")).generate("docs/hot-air-balloons.jpg");
```

```flutter
cloudinary.image('docs/hot-air-balloons.jpg').transformation(Transformation()
	.resize(Resize.crop().width(200)
.height(250)
	.gravity(
	Gravity.autoGravity())
	));
```

```kotlin
cloudinary.image {
	publicId("docs/hot-air-balloons.jpg")
	 resize(Resize.crop() { width(200)
 height(250)
	 gravity(
	Gravity.autoGravity())
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/hot-air-balloons.jpg", {gravity: "auto", height: 250, width: 200, crop: "crop"})
```

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

new CloudinaryImage("docs/hot-air-balloons.jpg").resize(
  crop()
    .width(200)
    .height(250)
    .gravity(autoGravity())
);
```

## Automatic gravity with the auto cropping mode

For maximum automation, use the automatic crop mode (`c_auto`) with automatic gravity (`g_auto`). This is less aggressive than [automatic gravity with the thumb mode](#automatic_gravity_with_the_thumb_mode), and is smarter about what to keep than [automatic gravity with the fill mode](#automatic_gravity_with_the_fill_mode).

![Automatic crop](https://res.cloudinary.com/demo/image/upload/c_scale,h_215/bo_1px_solid_grey/docs/handbag2.jpg "with_code: false, with_url: false, caption: Original")

c_fill,g_auto Fill crop 

c_thumb,g_auto Thumbnail crop 

c_auto,g_auto Automatic crop 

![Automatic crop](https://res.cloudinary.com/demo/image/upload/c_auto,g_auto,h_215,w_215/docs/handbag2.jpg "with_image: false")

```nodejs
cloudinary.image("docs/handbag2.jpg", {gravity: "auto", height: 215, width: 215, crop: "auto"})
```

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

new CloudinaryImage("docs/handbag2.jpg").resize(
  auto()
    .width(215)
    .height(215)
    .gravity(autoGravity())
);
```

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

new CloudinaryImage("docs/handbag2.jpg").resize(
  auto()
    .width(215)
    .height(215)
    .gravity(autoGravity())
);
```

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

new CloudinaryImage("docs/handbag2.jpg").resize(
  auto()
    .width(215)
    .height(215)
    .gravity(autoGravity())
);
```

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

new CloudinaryImage("docs/handbag2.jpg").resize(
  auto()
    .width(215)
    .height(215)
    .gravity(autoGravity())
);
```

```python
CloudinaryImage("docs/handbag2.jpg").image(gravity="auto", height=215, width=215, crop="auto")
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Gravity;

(new ImageTag('docs/handbag2.jpg'))
	->resize(Resize::auto()->width(215)
->height(215)
	->gravity(
	Gravity::autoGravity())
	);
```

```java
cloudinary.url().transformation(new Transformation().gravity("auto").height(215).width(215).crop("auto")).imageTag("docs/handbag2.jpg");
```

```ruby
cl_image_tag("docs/handbag2.jpg", gravity: "auto", height: 215, width: 215, crop: "auto")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("auto").Height(215).Width(215).Crop("auto")).BuildImageTag("docs/handbag2.jpg")
```

```dart
cloudinary.image('docs/handbag2.jpg').transformation(Transformation()
	.resize(Resize.auto().width(215)
.height(215)
	.gravity(
	Gravity.autoGravity())
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("auto").setHeight(215).setWidth(215).setCrop("auto")).generate("docs/handbag2.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().gravity("auto").height(215).width(215).crop("auto")).generate("docs/handbag2.jpg");
```

```flutter
cloudinary.image('docs/handbag2.jpg').transformation(Transformation()
	.resize(Resize.auto().width(215)
.height(215)
	.gravity(
	Gravity.autoGravity())
	));
```

```kotlin
cloudinary.image {
	publicId("docs/handbag2.jpg")
	 resize(Resize.auto() { width(215)
 height(215)
	 gravity(
	Gravity.autoGravity())
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/handbag2.jpg", {gravity: "auto", height: 215, width: 215, crop: "auto"})
```

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

new CloudinaryImage("docs/handbag2.jpg").resize(
  auto()
    .width(215)
    .height(215)
    .gravity(autoGravity())
);
```

> **TIP**: Watch a [video tutorial](content_aware_image_cropping_tutorial) to learn more.

## The rule of thirds

The **rule of thirds** is a fundamental principle in photography and visual composition. It involves dividing an image into nine equal parts by two equally spaced horizontal lines and two equally spaced vertical lines. Key elements and points of interest in the scene are then positioned along these lines or at their intersections, rather than in the center of the frame. This technique helps create balance, draw the viewer's eye to important parts of the photo, and make the composition more dynamic and engaging.

By default, automatic gravity follows the rule of thirds principle. If you want to disable this functionality because you specifically want to center important elements, you can adjust the gravity setting.

**To disable the rule of thirds and center important elements:**

1. Set the crop mode to a cropping mode that supports automatic gravity (such as `fill`, `thumb`, `crop`, or `auto`).
2. Set the gravity to `auto:thirds_0` (`g_auto:thirds_0` in URLs).
3. Specify your desired dimensions.

See the difference when cropping this image to a square:

Original

Default algorithm

Rule of thirds disabled

![Rule of thirds disabled](https://res.cloudinary.com/demo/image/upload/c_auto,g_auto:thirds_0,h_250,w_250/docs/girl-dress.jpg "with_image: false")

```nodejs
cloudinary.image("docs/girl-dress.jpg", {gravity: "auto:thirds_0", height: 250, width: 250, crop: "auto"})
```

```react
new CloudinaryImage("docs/girl-dress.jpg").addTransformation(
  "c_auto,g_auto:thirds_0,h_250,w_250"
);
```

```vue
new CloudinaryImage("docs/girl-dress.jpg").addTransformation(
  "c_auto,g_auto:thirds_0,h_250,w_250"
);
```

```angular
new CloudinaryImage("docs/girl-dress.jpg").addTransformation(
  "c_auto,g_auto:thirds_0,h_250,w_250"
);
```

```js
new CloudinaryImage("docs/girl-dress.jpg").addTransformation(
  "c_auto,g_auto:thirds_0,h_250,w_250"
);
```

```python
CloudinaryImage("docs/girl-dress.jpg").image(gravity="auto:thirds_0", height=250, width=250, crop="auto")
```

```php
(new ImageTag('docs/girl-dress.jpg'))
	->addTransformation("c_auto,g_auto:thirds_0,h_250,w_250");
```

```java
cloudinary.url().transformation(new Transformation().gravity("auto:thirds_0").height(250).width(250).crop("auto")).imageTag("docs/girl-dress.jpg");
```

```ruby
cl_image_tag("docs/girl-dress.jpg", gravity: "auto:thirds_0", height: 250, width: 250, crop: "auto")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("auto:thirds_0").Height(250).Width(250).Crop("auto")).BuildImageTag("docs/girl-dress.jpg")
```

```dart
cloudinary.image('docs/girl-dress.jpg').transformation(Transformation()
	.addTransformation("c_auto,g_auto:thirds_0,h_250,w_250"));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("auto:thirds_0").setHeight(250).setWidth(250).setCrop("auto")).generate("docs/girl-dress.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().gravity("auto:thirds_0").height(250).width(250).crop("auto")).generate("docs/girl-dress.jpg");
```

```flutter
cloudinary.image('docs/girl-dress.jpg').transformation(Transformation()
	.addTransformation("c_auto,g_auto:thirds_0,h_250,w_250"));
```

```kotlin
cloudinary.image {
	publicId("docs/girl-dress.jpg")
	 addTransformation("c_auto,g_auto:thirds_0,h_250,w_250") 
}.generate()
```

```jquery
$.cloudinary.image("docs/girl-dress.jpg", {gravity: "auto:thirds_0", height: 250, width: 250, crop: "auto"})
```

```react_native
new CloudinaryImage("docs/girl-dress.jpg").addTransformation(
  "c_auto,g_auto:thirds_0,h_250,w_250"
);
```

## Selecting a single automatic gravity algorithm

The default `g_auto` option applies an optimal mixture of two different methods of identifying the most important region of your image:

* **AI-based algorithm (subject)** - Uses deep-learning algorithms to identify the subjects of an image that are most likely to attract a person's gaze.
* **Saliency algorithm (classic)** - Uses a combination of saliency heuristics, edge detection, light, skin-tone prioritization, and more to automatically detect and prioritize significant region(s) in the image.

In the majority of cases, the most salient elements in an image are also the main subjects of the photo, and thus both algorithms often produce very similar or identical results. However, in some cases, results can be somewhat different and therefore **the weighted mixture that `g_auto` applies by default usually gives the best results.**

If you find that for the types of images you are delivering, one of the algorithms consistently gives a better result than the other, you can override the default combined mechanism and explicitly request your preferred algorithm.

**To select a specific automatic gravity algorithm:**

1. Set the crop mode to a cropping mode that supports automatic gravity (such as `fill`, `lfill`, `fill_pad`, `thumb`, `crop`, or `auto`).
2. Set the gravity to either:
   * `auto:subject` (`g_auto:subject` in URLs) - Use only the AI-based algorithm
   * `auto:classic` (`g_auto:classic` in URLs) - Use only the saliency algorithm
3. Optionally, you can also specify an additional [focal gravity](#adjusting_the_automatic_gravity_focal_preference) option (e.g., `g_auto:subject:faces`).
4. Specify your desired dimensions.

For example, when cropping the landscape image below to a portrait view, the classic algorithm selects the areas with the most graphically salient spots, which includes the colorful garden in the south east corner, while the subject algorithm focuses on the subjects that the AI-engine predicts are most likely to capture human attention, primarily the tower, cloud and fountains.

Original image

Default crop(Center gravity)

Auto-gravitySaliency (classic) method

Auto-gravityAI-based subject method

> **READING**:
>
> * [Image gravity for crops](image_gravity): Control which part of the image to keep using compass positions, face detection, or object positions.

> * [Image crop modes](image_crop_modes): Detailed examples of fill, lfill, fill_pad, crop, thumb, auto, and auto_pad.

> * [Image upscaling and downscaling](image_upscaling_and_downscaling): Upscale with super resolution, preserve quality when downscaling, and deliver at the right resolution using DPR.

> * [Cloudinary AI Content Analysis add-on](cloudinary_ai_content_analysis_addon): AI-powered content analysis for smarter cropping decisions.