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

# How to offset face-detection gravity when cropping


When using `g_face` gravity with cropping modes like `c_crop`, you might expect the `x` and `y` parameters to offset the crop position relative to the detected face. In practice, `x` and `y` with `c_crop,g_face` have no positional effect. The face stays centered regardless of the values you specify.

This article explains why this happens and provides two workarounds: using the zoom parameter for simple adjustments, and using a two-step crop for precise directional control.

## Why x and y don't offset g_face

With `c_crop`, the `x` and `y` parameters set fixed coordinates for the top-left corner of the crop rectangle. When you also set `g_face`, the gravity and the explicit coordinates conflict. In practice, the `x` and `y` values don't offset the crop relative to the detected face. Regardless of the values you specify, the face stays in the same position.

For example, this transformation crops around the detected face:

![Crop around the detected face](https://res.cloudinary.com/demo/image/upload/c_crop,g_face,h_400,w_400/woman.jpg "thumb: w_400")

```nodejs
cloudinary.image("woman.jpg", {gravity: "face", height: 400, width: 400, crop: "crop"})
```

```react
new CloudinaryImage("woman.jpg").resize(
  crop()
    .width(400)
    .height(400)
    .gravity(focusOn(face()))
);
```

```vue
new CloudinaryImage("woman.jpg").resize(
  crop()
    .width(400)
    .height(400)
    .gravity(focusOn(face()))
);
```

```angular
new CloudinaryImage("woman.jpg").resize(
  crop()
    .width(400)
    .height(400)
    .gravity(focusOn(face()))
);
```

```js
new CloudinaryImage("woman.jpg").resize(
  crop()
    .width(400)
    .height(400)
    .gravity(focusOn(face()))
);
```

```python
CloudinaryImage("woman.jpg").image(gravity="face", height=400, width=400, crop="crop")
```

```php
(new ImageTag('woman.jpg'))
	->resize(Resize::crop()->width(400)
->height(400)
	->gravity(
	Gravity::focusOn(
	FocusOn::face()))
	);
```

```java
cloudinary.url().transformation(new Transformation().gravity("face").height(400).width(400).crop("crop")).imageTag("woman.jpg");
```

```ruby
cl_image_tag("woman.jpg", gravity: "face", height: 400, width: 400, crop: "crop")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("face").Height(400).Width(400).Crop("crop")).BuildImageTag("woman.jpg")
```

```dart
cloudinary.image('woman.jpg').transformation(Transformation()
	.resize(Resize.crop().width(400)
.height(400)
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("face").setHeight(400).setWidth(400).setCrop("crop")).generate("woman.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().gravity("face").height(400).width(400).crop("crop")).generate("woman.jpg");
```

```flutter
cloudinary.image('woman.jpg').transformation(Transformation()
	.resize(Resize.crop().width(400)
.height(400)
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	));
```

```kotlin
cloudinary.image {
	publicId("woman.jpg")
	 resize(Resize.crop() { width(400)
 height(400)
	 gravity(
	Gravity.focusOn(
	FocusOn.face()))
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("woman.jpg", {gravity: "face", height: 400, width: 400, crop: "crop"})
```

```react_native
new CloudinaryImage("woman.jpg").resize(
  crop()
    .width(400)
    .height(400)
    .gravity(focusOn(face()))
);
```

Adding `x_50,y_50` or `x_200,y_200` to the same transformation doesn't shift the crop from the face. The face stays centered because `g_face` determines the crop position and the `x`/`y` values have no positional effect:

![The same crop with x and y added, showing no positional shift](https://res.cloudinary.com/demo/image/upload/c_crop,g_face,h_400,w_400,x_200,y_200/woman.jpg "thumb: w_400")

```nodejs
cloudinary.image("woman.jpg", {gravity: "face", height: 400, width: 400, x: 200, y: 200, crop: "crop"})
```

```react
new CloudinaryImage("woman.jpg").resize(
  crop()
    .width(400)
    .height(400)
    .gravity(focusOn(face()))
    .x(200)
    .y(200)
);
```

```vue
new CloudinaryImage("woman.jpg").resize(
  crop()
    .width(400)
    .height(400)
    .gravity(focusOn(face()))
    .x(200)
    .y(200)
);
```

```angular
new CloudinaryImage("woman.jpg").resize(
  crop()
    .width(400)
    .height(400)
    .gravity(focusOn(face()))
    .x(200)
    .y(200)
);
```

```js
new CloudinaryImage("woman.jpg").resize(
  crop()
    .width(400)
    .height(400)
    .gravity(focusOn(face()))
    .x(200)
    .y(200)
);
```

```python
CloudinaryImage("woman.jpg").image(gravity="face", height=400, width=400, x=200, y=200, crop="crop")
```

```php
(new ImageTag('woman.jpg'))
	->resize(Resize::crop()->width(400)
->height(400)
	->gravity(
	Gravity::focusOn(
	FocusOn::face()))
->x(200)
->y(200));
```

```java
cloudinary.url().transformation(new Transformation().gravity("face").height(400).width(400).x(200).y(200).crop("crop")).imageTag("woman.jpg");
```

```ruby
cl_image_tag("woman.jpg", gravity: "face", height: 400, width: 400, x: 200, y: 200, crop: "crop")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("face").Height(400).Width(400).X(200).Y(200).Crop("crop")).BuildImageTag("woman.jpg")
```

```dart
cloudinary.image('woman.jpg').transformation(Transformation()
	.resize(Resize.crop().width(400)
.height(400)
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
.x(200)
.y(200)));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("face").setHeight(400).setWidth(400).setX(200).setY(200).setCrop("crop")).generate("woman.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().gravity("face").height(400).width(400).x(200).y(200).crop("crop")).generate("woman.jpg");
```

```flutter
cloudinary.image('woman.jpg').transformation(Transformation()
	.resize(Resize.crop().width(400)
.height(400)
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
.x(200)
.y(200)));
```

```kotlin
cloudinary.image {
	publicId("woman.jpg")
	 resize(Resize.crop() { width(400)
 height(400)
	 gravity(
	Gravity.focusOn(
	FocusOn.face()))
 x(200)
 y(200) }) 
}.generate()
```

```jquery
$.cloudinary.image("woman.jpg", {gravity: "face", height: 400, width: 400, x: 200, y: 200, crop: "crop"})
```

```react_native
new CloudinaryImage("woman.jpg").resize(
  crop()
    .width(400)
    .height(400)
    .gravity(focusOn(face()))
    .x(200)
    .y(200)
);
```

For details on how `x` and `y` work with `c_crop`, see [fixed coordinates cropping](resizing_and_cropping#fixed_coordinates_cropping).

## Adjusting crop tightness with zoom

To control how tightly the crop frames the face without shifting its position, combine `z` (zoom) with `c_crop,g_face`. Zoom has a visible effect when you omit explicit width and height, or when you set only an aspect ratio with `ar`. If you pin both `w` and `h` on `c_crop`, zoom has no effect. As a resolution-independent alternative, `z` also works with `c_thumb,g_face` even when `w` and `h` are set.

Values less than 1.0 zoom out, showing more context around the face. Values greater than 1.0 zoom in for a tighter crop.

### With c_crop and an aspect ratio

Using `ar_1.0` lets you keep a square crop while `z` adjusts how much surrounding area the crop includes:

**Default zoom** (`ar_1.0,c_crop,g_face`):

![Default zoom with c_crop and aspect ratio](https://res.cloudinary.com/demo/image/upload/ar_1.0,c_crop,g_face/woman.jpg "thumb: w_300")

```nodejs
cloudinary.image("woman.jpg", {aspect_ratio: "1.0", gravity: "face", crop: "crop"})
```

```react
new CloudinaryImage("woman.jpg").resize(
  crop()
    .aspectRatio("1.0")
    .gravity(focusOn(face()))
);
```

```vue
new CloudinaryImage("woman.jpg").resize(
  crop()
    .aspectRatio("1.0")
    .gravity(focusOn(face()))
);
```

```angular
new CloudinaryImage("woman.jpg").resize(
  crop()
    .aspectRatio("1.0")
    .gravity(focusOn(face()))
);
```

```js
new CloudinaryImage("woman.jpg").resize(
  crop()
    .aspectRatio("1.0")
    .gravity(focusOn(face()))
);
```

```python
CloudinaryImage("woman.jpg").image(aspect_ratio="1.0", gravity="face", crop="crop")
```

```php
(new ImageTag('woman.jpg'))
	->resize(Resize::crop()->aspectRatio(1.0)
	->gravity(
	Gravity::focusOn(
	FocusOn::face()))
	);
```

```java
cloudinary.url().transformation(new Transformation().aspectRatio("1.0").gravity("face").crop("crop")).imageTag("woman.jpg");
```

```ruby
cl_image_tag("woman.jpg", aspect_ratio: "1.0", gravity: "face", crop: "crop")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio("1.0").Gravity("face").Crop("crop")).BuildImageTag("woman.jpg")
```

```dart
cloudinary.image('woman.jpg').transformation(Transformation()
	.resize(Resize.crop().aspectRatio('1.0')
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio("1.0").setGravity("face").setCrop("crop")).generate("woman.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().aspectRatio("1.0").gravity("face").crop("crop")).generate("woman.jpg");
```

```flutter
cloudinary.image('woman.jpg').transformation(Transformation()
	.resize(Resize.crop().aspectRatio('1.0')
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	));
```

```kotlin
cloudinary.image {
	publicId("woman.jpg")
	 resize(Resize.crop() { aspectRatio(1.0F)
	 gravity(
	Gravity.focusOn(
	FocusOn.face()))
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("woman.jpg", {aspect_ratio: "1.0", gravity: "face", crop: "crop"})
```

```react_native
new CloudinaryImage("woman.jpg").resize(
  crop()
    .aspectRatio("1.0")
    .gravity(focusOn(face()))
);
```

**Zoomed out** (`ar_1.0,c_crop,g_face,z_0.5`):

![Zoomed out to show more context around the face](https://res.cloudinary.com/demo/image/upload/ar_1.0,c_crop,g_face,z_0.5/woman.jpg "thumb: w_300")

```nodejs
cloudinary.image("woman.jpg", {aspect_ratio: "1.0", gravity: "face", zoom: "0.5", crop: "crop"})
```

```react
new CloudinaryImage("woman.jpg").resize(
  crop()
    .aspectRatio("1.0")
    .zoom(0.5)
    .gravity(focusOn(face()))
);
```

```vue
new CloudinaryImage("woman.jpg").resize(
  crop()
    .aspectRatio("1.0")
    .zoom(0.5)
    .gravity(focusOn(face()))
);
```

```angular
new CloudinaryImage("woman.jpg").resize(
  crop()
    .aspectRatio("1.0")
    .zoom(0.5)
    .gravity(focusOn(face()))
);
```

```js
new CloudinaryImage("woman.jpg").resize(
  crop()
    .aspectRatio("1.0")
    .zoom(0.5)
    .gravity(focusOn(face()))
);
```

```python
CloudinaryImage("woman.jpg").image(aspect_ratio="1.0", gravity="face", zoom="0.5", crop="crop")
```

```php
(new ImageTag('woman.jpg'))
	->resize(Resize::crop()->aspectRatio(1.0)
->zoom(0.5)
	->gravity(
	Gravity::focusOn(
	FocusOn::face()))
	);
```

```java
cloudinary.url().transformation(new Transformation().aspectRatio("1.0").gravity("face").zoom(0.5).crop("crop")).imageTag("woman.jpg");
```

```ruby
cl_image_tag("woman.jpg", aspect_ratio: "1.0", gravity: "face", zoom: 0.5, crop: "crop")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio("1.0").Gravity("face").Zoom(0.5).Crop("crop")).BuildImageTag("woman.jpg")
```

```dart
cloudinary.image('woman.jpg').transformation(Transformation()
	.resize(Resize.crop().aspectRatio('1.0')
.zoom(0.5)
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio("1.0").setGravity("face").setZoom(0.5).setCrop("crop")).generate("woman.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().aspectRatio("1.0").gravity("face").zoom(0.5).crop("crop")).generate("woman.jpg");
```

```flutter
cloudinary.image('woman.jpg').transformation(Transformation()
	.resize(Resize.crop().aspectRatio('1.0')
.zoom(0.5)
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	));
```

```kotlin
cloudinary.image {
	publicId("woman.jpg")
	 resize(Resize.crop() { aspectRatio(1.0F)
 zoom(0.5F)
	 gravity(
	Gravity.focusOn(
	FocusOn.face()))
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("woman.jpg", {aspect_ratio: "1.0", gravity: "face", zoom: "0.5", crop: "crop"})
```

```react_native
new CloudinaryImage("woman.jpg").resize(
  crop()
    .aspectRatio("1.0")
    .zoom(0.5)
    .gravity(focusOn(face()))
);
```

**Zoomed in** (`ar_1.0,c_crop,g_face,z_1.5`):

![Zoomed in for a tighter crop on the face](https://res.cloudinary.com/demo/image/upload/ar_1.0,c_crop,g_face,z_1.5/woman.jpg "thumb: w_300")

```nodejs
cloudinary.image("woman.jpg", {aspect_ratio: "1.0", gravity: "face", zoom: "1.5", crop: "crop"})
```

```react
new CloudinaryImage("woman.jpg").resize(
  crop()
    .aspectRatio("1.0")
    .zoom(1.5)
    .gravity(focusOn(face()))
);
```

```vue
new CloudinaryImage("woman.jpg").resize(
  crop()
    .aspectRatio("1.0")
    .zoom(1.5)
    .gravity(focusOn(face()))
);
```

```angular
new CloudinaryImage("woman.jpg").resize(
  crop()
    .aspectRatio("1.0")
    .zoom(1.5)
    .gravity(focusOn(face()))
);
```

```js
new CloudinaryImage("woman.jpg").resize(
  crop()
    .aspectRatio("1.0")
    .zoom(1.5)
    .gravity(focusOn(face()))
);
```

```python
CloudinaryImage("woman.jpg").image(aspect_ratio="1.0", gravity="face", zoom="1.5", crop="crop")
```

```php
(new ImageTag('woman.jpg'))
	->resize(Resize::crop()->aspectRatio(1.0)
->zoom(1.5)
	->gravity(
	Gravity::focusOn(
	FocusOn::face()))
	);
```

```java
cloudinary.url().transformation(new Transformation().aspectRatio("1.0").gravity("face").zoom(1.5).crop("crop")).imageTag("woman.jpg");
```

```ruby
cl_image_tag("woman.jpg", aspect_ratio: "1.0", gravity: "face", zoom: 1.5, crop: "crop")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio("1.0").Gravity("face").Zoom(1.5).Crop("crop")).BuildImageTag("woman.jpg")
```

```dart
cloudinary.image('woman.jpg').transformation(Transformation()
	.resize(Resize.crop().aspectRatio('1.0')
.zoom(1.5)
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio("1.0").setGravity("face").setZoom(1.5).setCrop("crop")).generate("woman.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().aspectRatio("1.0").gravity("face").zoom(1.5).crop("crop")).generate("woman.jpg");
```

```flutter
cloudinary.image('woman.jpg').transformation(Transformation()
	.resize(Resize.crop().aspectRatio('1.0')
.zoom(1.5)
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	));
```

```kotlin
cloudinary.image {
	publicId("woman.jpg")
	 resize(Resize.crop() { aspectRatio(1.0F)
 zoom(1.5F)
	 gravity(
	Gravity.focusOn(
	FocusOn.face()))
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("woman.jpg", {aspect_ratio: "1.0", gravity: "face", zoom: "1.5", crop: "crop"})
```

```react_native
new CloudinaryImage("woman.jpg").resize(
  crop()
    .aspectRatio("1.0")
    .zoom(1.5)
    .gravity(focusOn(face()))
);
```

### With c_thumb for resolution-independent sizing

When you need a specific output size that's the same across source images of different resolutions, use `c_thumb`. `z` keeps working even with `w` and `h` set:

**Default zoom** (`c_thumb,g_face,h_300,w_300`):

![Face thumbnail with default zoom](https://res.cloudinary.com/demo/image/upload/c_thumb,g_face,h_300,w_300/woman.jpg "thumb: w_300")

```nodejs
cloudinary.image("woman.jpg", {gravity: "face", height: 300, width: 300, crop: "thumb"})
```

```react
new CloudinaryImage("woman.jpg").resize(
  thumbnail()
    .width(300)
    .height(300)
    .gravity(focusOn(face()))
);
```

```vue
new CloudinaryImage("woman.jpg").resize(
  thumbnail()
    .width(300)
    .height(300)
    .gravity(focusOn(face()))
);
```

```angular
new CloudinaryImage("woman.jpg").resize(
  thumbnail()
    .width(300)
    .height(300)
    .gravity(focusOn(face()))
);
```

```js
new CloudinaryImage("woman.jpg").resize(
  thumbnail()
    .width(300)
    .height(300)
    .gravity(focusOn(face()))
);
```

```python
CloudinaryImage("woman.jpg").image(gravity="face", height=300, width=300, crop="thumb")
```

```php
(new ImageTag('woman.jpg'))
	->resize(Resize::thumbnail()->width(300)
->height(300)
	->gravity(
	Gravity::focusOn(
	FocusOn::face()))
	);
```

```java
cloudinary.url().transformation(new Transformation().gravity("face").height(300).width(300).crop("thumb")).imageTag("woman.jpg");
```

```ruby
cl_image_tag("woman.jpg", gravity: "face", height: 300, width: 300, crop: "thumb")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("face").Height(300).Width(300).Crop("thumb")).BuildImageTag("woman.jpg")
```

```dart
cloudinary.image('woman.jpg').transformation(Transformation()
	.resize(Resize.thumbnail().width(300)
.height(300)
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("face").setHeight(300).setWidth(300).setCrop("thumb")).generate("woman.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().gravity("face").height(300).width(300).crop("thumb")).generate("woman.jpg");
```

```flutter
cloudinary.image('woman.jpg').transformation(Transformation()
	.resize(Resize.thumbnail().width(300)
.height(300)
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	));
```

```kotlin
cloudinary.image {
	publicId("woman.jpg")
	 resize(Resize.thumbnail() { width(300)
 height(300)
	 gravity(
	Gravity.focusOn(
	FocusOn.face()))
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("woman.jpg", {gravity: "face", height: 300, width: 300, crop: "thumb"})
```

```react_native
new CloudinaryImage("woman.jpg").resize(
  thumbnail()
    .width(300)
    .height(300)
    .gravity(focusOn(face()))
);
```

**Zoomed in** (`c_thumb,g_face,h_300,w_300,z_2.0`):

![Face thumbnail zoomed in for a tighter crop](https://res.cloudinary.com/demo/image/upload/c_thumb,g_face,h_300,w_300,z_2.0/woman.jpg "thumb: w_300")

```nodejs
cloudinary.image("woman.jpg", {gravity: "face", height: 300, width: 300, zoom: "2.0", crop: "thumb"})
```

```react
new CloudinaryImage("woman.jpg").resize(
  thumbnail()
    .width(300)
    .height(300)
    .zoom("2.0")
    .gravity(focusOn(face()))
);
```

```vue
new CloudinaryImage("woman.jpg").resize(
  thumbnail()
    .width(300)
    .height(300)
    .zoom("2.0")
    .gravity(focusOn(face()))
);
```

```angular
new CloudinaryImage("woman.jpg").resize(
  thumbnail()
    .width(300)
    .height(300)
    .zoom("2.0")
    .gravity(focusOn(face()))
);
```

```js
new CloudinaryImage("woman.jpg").resize(
  thumbnail()
    .width(300)
    .height(300)
    .zoom("2.0")
    .gravity(focusOn(face()))
);
```

```python
CloudinaryImage("woman.jpg").image(gravity="face", height=300, width=300, zoom="2.0", crop="thumb")
```

```php
(new ImageTag('woman.jpg'))
	->resize(Resize::thumbnail()->width(300)
->height(300)
->zoom(2.0)
	->gravity(
	Gravity::focusOn(
	FocusOn::face()))
	);
```

```java
cloudinary.url().transformation(new Transformation().gravity("face").height(300).width(300).zoom(2.0).crop("thumb")).imageTag("woman.jpg");
```

```ruby
cl_image_tag("woman.jpg", gravity: "face", height: 300, width: 300, zoom: 2.0, crop: "thumb")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("face").Height(300).Width(300).Zoom(2.0).Crop("thumb")).BuildImageTag("woman.jpg")
```

```dart
cloudinary.image('woman.jpg').transformation(Transformation()
	.resize(Resize.thumbnail().width(300)
.height(300)
.zoom('2.0')
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("face").setHeight(300).setWidth(300).setZoom(2.0).setCrop("thumb")).generate("woman.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().gravity("face").height(300).width(300).zoom(2.0).crop("thumb")).generate("woman.jpg");
```

```flutter
cloudinary.image('woman.jpg').transformation(Transformation()
	.resize(Resize.thumbnail().width(300)
.height(300)
.zoom('2.0')
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	));
```

```kotlin
cloudinary.image {
	publicId("woman.jpg")
	 resize(Resize.thumbnail() { width(300)
 height(300)
 zoom(2.0F)
	 gravity(
	Gravity.focusOn(
	FocusOn.face()))
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("woman.jpg", {gravity: "face", height: 300, width: 300, zoom: "2.0", crop: "thumb"})
```

```react_native
new CloudinaryImage("woman.jpg").resize(
  thumbnail()
    .width(300)
    .height(300)
    .zoom("2.0")
    .gravity(focusOn(face()))
);
```

> **NOTE**: When used with `c_crop`, `z` has no effect if you set both `w` and `h`. Either omit `w`/`h`, or use an aspect ratio with `ar` for the zoom to take effect. `c_thumb` accepts `z` even when `w` and `h` are both set.

For more details, see [c_crop](transformation_reference#c_crop), [c_thumb](transformation_reference#c_thumb), and [z (zoom)](transformation_reference#z_zoom) in the Transformation Reference.

## Nudging the face position with a two-step crop

If you need precise directional control over where the face appears in the final image, use a **two-step crop**:

1. **First step**: Use `c_thumb` with `g_face` and dimensions larger than your target size. `c_thumb` scales the cropped region proportionally to the detected face, so the technique produces consistent results across source images of different resolutions.
2. **Second step**: Apply a `c_crop` with `x` and `y` to shift the crop window within the region from step 1.

Because the second `c_crop` operates on the already-cropped intermediate image, `x` and `y` now work as expected since there's no gravity to conflict with.

### Direction guide

In the second crop step, `x` and `y` set the top-left corner of the final crop rectangle within the intermediate image:

* **Increasing `x`**: Moves the crop window to the right, which shifts the face **to the left** in the output.
* **Increasing `y`**: Moves the crop window down, which shifts the face **upward** in the output.

### Example

First extract a 600 × 600 region proportional to the detected face, then crop a 400 × 400 region with different offsets:

**x=0, y=0** (top-left of the face region):

![Two-step crop with x=0 and y=0](https://res.cloudinary.com/demo/image/upload/c_thumb,g_face,h_600,w_600/c_crop,h_400,w_400,x_0,y_0/woman.jpg "thumb: w_400")

```nodejs
cloudinary.image("woman.jpg", {transformation: [
  {gravity: "face", height: 600, width: 600, crop: "thumb"},
  {height: 400, width: 400, x: 0, y: 0, crop: "crop"}
  ]})
```

```react
new CloudinaryImage("woman.jpg")
  .resize(
    thumbnail()
      .width(600)
      .height(600)
      .gravity(focusOn(face()))
  )
  .resize(crop().width(400).height(400).x(0).y(0));
```

```vue
new CloudinaryImage("woman.jpg")
  .resize(
    thumbnail()
      .width(600)
      .height(600)
      .gravity(focusOn(face()))
  )
  .resize(crop().width(400).height(400).x(0).y(0));
```

```angular
new CloudinaryImage("woman.jpg")
  .resize(
    thumbnail()
      .width(600)
      .height(600)
      .gravity(focusOn(face()))
  )
  .resize(crop().width(400).height(400).x(0).y(0));
```

```js
new CloudinaryImage("woman.jpg")
  .resize(
    thumbnail()
      .width(600)
      .height(600)
      .gravity(focusOn(face()))
  )
  .resize(crop().width(400).height(400).x(0).y(0));
```

```python
CloudinaryImage("woman.jpg").image(transformation=[
  {'gravity': "face", 'height': 600, 'width': 600, 'crop': "thumb"},
  {'height': 400, 'width': 400, 'x': 0, 'y': 0, 'crop': "crop"}
  ])
```

```php
(new ImageTag('woman.jpg'))
	->resize(Resize::thumbnail()->width(600)
->height(600)
	->gravity(
	Gravity::focusOn(
	FocusOn::face()))
	)
	->resize(Resize::crop()->width(400)
->height(400)
->x(0)
->y(0));
```

```java
cloudinary.url().transformation(new Transformation()
  .gravity("face").height(600).width(600).crop("thumb").chain()
  .height(400).width(400).x(0).y(0).crop("crop")).imageTag("woman.jpg");
```

```ruby
cl_image_tag("woman.jpg", transformation: [
  {gravity: "face", height: 600, width: 600, crop: "thumb"},
  {height: 400, width: 400, x: 0, y: 0, crop: "crop"}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Gravity("face").Height(600).Width(600).Crop("thumb").Chain()
  .Height(400).Width(400).X(0).Y(0).Crop("crop")).BuildImageTag("woman.jpg")
```

```dart
cloudinary.image('woman.jpg').transformation(Transformation()
	.resize(Resize.thumbnail().width(600)
.height(600)
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	)
	.resize(Resize.crop().width(400)
.height(400)
.x(0)
.y(0)));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setGravity("face").setHeight(600).setWidth(600).setCrop("thumb").chain()
  .setHeight(400).setWidth(400).setX(0).setY(0).setCrop("crop")).generate("woman.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .gravity("face").height(600).width(600).crop("thumb").chain()
  .height(400).width(400).x(0).y(0).crop("crop")).generate("woman.jpg");
```

```flutter
cloudinary.image('woman.jpg').transformation(Transformation()
	.resize(Resize.thumbnail().width(600)
.height(600)
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	)
	.resize(Resize.crop().width(400)
.height(400)
.x(0)
.y(0)));
```

```kotlin
cloudinary.image {
	publicId("woman.jpg")
	 resize(Resize.thumbnail() { width(600)
 height(600)
	 gravity(
	Gravity.focusOn(
	FocusOn.face()))
	 })
	 resize(Resize.crop() { width(400)
 height(400)
 x(0)
 y(0) }) 
}.generate()
```

```jquery
$.cloudinary.image("woman.jpg", {transformation: [
  {gravity: "face", height: 600, width: 600, crop: "thumb"},
  {height: 400, width: 400, x: 0, y: 0, crop: "crop"}
  ]})
```

```react_native
new CloudinaryImage("woman.jpg")
  .resize(
    thumbnail()
      .width(600)
      .height(600)
      .gravity(focusOn(face()))
  )
  .resize(crop().width(400).height(400).x(0).y(0));
```

**x=150, y=0** (face shifted left):

![Two-step crop with x=150 shifting the face to the left](https://res.cloudinary.com/demo/image/upload/c_thumb,g_face,h_600,w_600/c_crop,h_400,w_400,x_150,y_0/woman.jpg "thumb: w_400")

```nodejs
cloudinary.image("woman.jpg", {transformation: [
  {gravity: "face", height: 600, width: 600, crop: "thumb"},
  {height: 400, width: 400, x: 150, y: 0, crop: "crop"}
  ]})
```

```react
new CloudinaryImage("woman.jpg")
  .resize(
    thumbnail()
      .width(600)
      .height(600)
      .gravity(focusOn(face()))
  )
  .resize(crop().width(400).height(400).x(150).y(0));
```

```vue
new CloudinaryImage("woman.jpg")
  .resize(
    thumbnail()
      .width(600)
      .height(600)
      .gravity(focusOn(face()))
  )
  .resize(crop().width(400).height(400).x(150).y(0));
```

```angular
new CloudinaryImage("woman.jpg")
  .resize(
    thumbnail()
      .width(600)
      .height(600)
      .gravity(focusOn(face()))
  )
  .resize(crop().width(400).height(400).x(150).y(0));
```

```js
new CloudinaryImage("woman.jpg")
  .resize(
    thumbnail()
      .width(600)
      .height(600)
      .gravity(focusOn(face()))
  )
  .resize(crop().width(400).height(400).x(150).y(0));
```

```python
CloudinaryImage("woman.jpg").image(transformation=[
  {'gravity': "face", 'height': 600, 'width': 600, 'crop': "thumb"},
  {'height': 400, 'width': 400, 'x': 150, 'y': 0, 'crop': "crop"}
  ])
```

```php
(new ImageTag('woman.jpg'))
	->resize(Resize::thumbnail()->width(600)
->height(600)
	->gravity(
	Gravity::focusOn(
	FocusOn::face()))
	)
	->resize(Resize::crop()->width(400)
->height(400)
->x(150)
->y(0));
```

```java
cloudinary.url().transformation(new Transformation()
  .gravity("face").height(600).width(600).crop("thumb").chain()
  .height(400).width(400).x(150).y(0).crop("crop")).imageTag("woman.jpg");
```

```ruby
cl_image_tag("woman.jpg", transformation: [
  {gravity: "face", height: 600, width: 600, crop: "thumb"},
  {height: 400, width: 400, x: 150, y: 0, crop: "crop"}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Gravity("face").Height(600).Width(600).Crop("thumb").Chain()
  .Height(400).Width(400).X(150).Y(0).Crop("crop")).BuildImageTag("woman.jpg")
```

```dart
cloudinary.image('woman.jpg').transformation(Transformation()
	.resize(Resize.thumbnail().width(600)
.height(600)
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	)
	.resize(Resize.crop().width(400)
.height(400)
.x(150)
.y(0)));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setGravity("face").setHeight(600).setWidth(600).setCrop("thumb").chain()
  .setHeight(400).setWidth(400).setX(150).setY(0).setCrop("crop")).generate("woman.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .gravity("face").height(600).width(600).crop("thumb").chain()
  .height(400).width(400).x(150).y(0).crop("crop")).generate("woman.jpg");
```

```flutter
cloudinary.image('woman.jpg').transformation(Transformation()
	.resize(Resize.thumbnail().width(600)
.height(600)
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	)
	.resize(Resize.crop().width(400)
.height(400)
.x(150)
.y(0)));
```

```kotlin
cloudinary.image {
	publicId("woman.jpg")
	 resize(Resize.thumbnail() { width(600)
 height(600)
	 gravity(
	Gravity.focusOn(
	FocusOn.face()))
	 })
	 resize(Resize.crop() { width(400)
 height(400)
 x(150)
 y(0) }) 
}.generate()
```

```jquery
$.cloudinary.image("woman.jpg", {transformation: [
  {gravity: "face", height: 600, width: 600, crop: "thumb"},
  {height: 400, width: 400, x: 150, y: 0, crop: "crop"}
  ]})
```

```react_native
new CloudinaryImage("woman.jpg")
  .resize(
    thumbnail()
      .width(600)
      .height(600)
      .gravity(focusOn(face()))
  )
  .resize(crop().width(400).height(400).x(150).y(0));
```

**x=0, y=150** (face shifted up):

![Two-step crop with y=150 shifting the face upward](https://res.cloudinary.com/demo/image/upload/c_thumb,g_face,h_600,w_600/c_crop,h_400,w_400,x_0,y_150/woman.jpg "thumb: w_400")

```nodejs
cloudinary.image("woman.jpg", {transformation: [
  {gravity: "face", height: 600, width: 600, crop: "thumb"},
  {height: 400, width: 400, x: 0, y: 150, crop: "crop"}
  ]})
```

```react
new CloudinaryImage("woman.jpg")
  .resize(
    thumbnail()
      .width(600)
      .height(600)
      .gravity(focusOn(face()))
  )
  .resize(crop().width(400).height(400).x(0).y(150));
```

```vue
new CloudinaryImage("woman.jpg")
  .resize(
    thumbnail()
      .width(600)
      .height(600)
      .gravity(focusOn(face()))
  )
  .resize(crop().width(400).height(400).x(0).y(150));
```

```angular
new CloudinaryImage("woman.jpg")
  .resize(
    thumbnail()
      .width(600)
      .height(600)
      .gravity(focusOn(face()))
  )
  .resize(crop().width(400).height(400).x(0).y(150));
```

```js
new CloudinaryImage("woman.jpg")
  .resize(
    thumbnail()
      .width(600)
      .height(600)
      .gravity(focusOn(face()))
  )
  .resize(crop().width(400).height(400).x(0).y(150));
```

```python
CloudinaryImage("woman.jpg").image(transformation=[
  {'gravity': "face", 'height': 600, 'width': 600, 'crop': "thumb"},
  {'height': 400, 'width': 400, 'x': 0, 'y': 150, 'crop': "crop"}
  ])
```

```php
(new ImageTag('woman.jpg'))
	->resize(Resize::thumbnail()->width(600)
->height(600)
	->gravity(
	Gravity::focusOn(
	FocusOn::face()))
	)
	->resize(Resize::crop()->width(400)
->height(400)
->x(0)
->y(150));
```

```java
cloudinary.url().transformation(new Transformation()
  .gravity("face").height(600).width(600).crop("thumb").chain()
  .height(400).width(400).x(0).y(150).crop("crop")).imageTag("woman.jpg");
```

```ruby
cl_image_tag("woman.jpg", transformation: [
  {gravity: "face", height: 600, width: 600, crop: "thumb"},
  {height: 400, width: 400, x: 0, y: 150, crop: "crop"}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Gravity("face").Height(600).Width(600).Crop("thumb").Chain()
  .Height(400).Width(400).X(0).Y(150).Crop("crop")).BuildImageTag("woman.jpg")
```

```dart
cloudinary.image('woman.jpg').transformation(Transformation()
	.resize(Resize.thumbnail().width(600)
.height(600)
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	)
	.resize(Resize.crop().width(400)
.height(400)
.x(0)
.y(150)));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setGravity("face").setHeight(600).setWidth(600).setCrop("thumb").chain()
  .setHeight(400).setWidth(400).setX(0).setY(150).setCrop("crop")).generate("woman.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .gravity("face").height(600).width(600).crop("thumb").chain()
  .height(400).width(400).x(0).y(150).crop("crop")).generate("woman.jpg");
```

```flutter
cloudinary.image('woman.jpg').transformation(Transformation()
	.resize(Resize.thumbnail().width(600)
.height(600)
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	)
	.resize(Resize.crop().width(400)
.height(400)
.x(0)
.y(150)));
```

```kotlin
cloudinary.image {
	publicId("woman.jpg")
	 resize(Resize.thumbnail() { width(600)
 height(600)
	 gravity(
	Gravity.focusOn(
	FocusOn.face()))
	 })
	 resize(Resize.crop() { width(400)
 height(400)
 x(0)
 y(150) }) 
}.generate()
```

```jquery
$.cloudinary.image("woman.jpg", {transformation: [
  {gravity: "face", height: 600, width: 600, crop: "thumb"},
  {height: 400, width: 400, x: 0, y: 150, crop: "crop"}
  ]})
```

```react_native
new CloudinaryImage("woman.jpg")
  .resize(
    thumbnail()
      .width(600)
      .height(600)
      .gravity(focusOn(face()))
  )
  .resize(crop().width(400).height(400).x(0).y(150));
```

### Tips

* Make the first crop dimensions large enough to give the second step room to adjust. If the first crop is too tight, there's no space to nudge.
* The difference between the first and second crop dimensions determines how far you can shift. For example, a 600 × 600 first crop with a 400 × 400 second crop allows up to 200 pixels of adjustment in each direction.
* Experiment with the `x` and `y` values to find the right positioning for your image.

## Focusing on objects other than faces

If your images feature subjects other than people (products, animals, or specific objects), substitute `g_face` with object-detection gravity from the [Cloudinary AI Content Analysis add-on](cloudinary_ai_content_analysis_addon). Use `g_auto:<object>` (for example `g_auto:cat`), or even `g_<object>` (for example `g_cat`), with any of the techniques above to center and nudge the crop around that subject.