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

# Transformation refiners


Many of our transformations harness AI to transform your images in creative ways. While AI typically produces high-quality results, you may sometimes want to refine these results to perfectly match your creative vision. Our refinement tools make it easy to iterate until you achieve exactly the look you want.

The [Background Removal Refiner](#background_removal_refiner) gives you full control over every detail in your background-removed image. 

The [generative AI refiners](#generative_ai_refiners) help you achieve your desired result by creating a number of variations for the same transformation and letting you choose which variation to associate with that transformation for a particular image.

The [Focus Area Refiner](#focus_area_refiner) lets you fine-tune face coordinates that are automatically detected on upload, in addition to letting you specify custom coordinates and custom regions.

## Updating AI-based transformations

The refiners are available from [Studio](dam_editing_and_transformations#new_studio), which you can access from an image in your Media Library by clicking **Edit** from the (3-dots) options menu on the asset card.
> **NOTE**:
>
> If your Media Library doesn't yet have **Studio** enabled, you can open the refiners from the [Transformation Builder](image_transformations#transformation_builder).
### Background Removal Refiner

You can access the **Background Removal Refiner** through **Studio** when you've built a transformation that contains background removal. Select the **Background Removal** button to the right of the preview.

![Edit removed background](https://cloudinary-res.cloudinary.com/image/upload/bo_1px_solid_gray/f_auto/q_auto/docs/edit_removed_background_menu-studio.png  "thumb: c_scale,w_700/dpr_2.0, width:700, popup: true")

In the Background Removal Refiner, you can zoom in to the area that you want to touch up, choose a brush size, and paint over the area of the image that you want to remove. 

![Background Removal Refiner](https://cloudinary-res.cloudinary.com/image/upload/bo_1px_solid_gray/q_auto/f_auto/docs/use_background_removal_refiner_studio.png  "thumb: c_scale,w_700/dpr_2.0, width:700, popup: true")

You can use the opacity slider to view the original image underneath the background-removed image.

If you choose the **Restore** tool, anything you paint over will be restored to the original image. 

When you're happy with your changes, click **Update Transformation**. Any changes that you've made will apply to any existing and future derived images for this asset when delivered with the `e_background_removal` parameter.

### Generative AI refiners

When using transformations powered by generative AI like [Generative Fill](transformation_reference#b_gen_fill) and [Generative Background Replace](transformation_reference#e_gen_background_replace), you might want to refine the results to better match your vision. There are two ways to do this:

* **Using the seed parameter**: To generate different variations of the same transformation, you can manually modify the `seed` parameter in your transformation URL. While this gives you immediate results, this process can be time-consuming and affects the URL ([learn more](generative_ai_transformations)).

* **Using the Generative AI refiner tools**: The refiner tools provide an intuitive interface for generating and selecting variations while maintaining clean, simple URLs. When you select your preferred variation, it becomes the standard result for that transformation URL.

The following example shows how to use the **Generative Fill Refiner**, accessed through **Studio**.

In **Studio**, select **Generative Fill** from **AI Transformations** and set an aspect ratio or a width and height different from the original. Optionally, add a prompt to guide the AI-generated padding.

Original

Transformed

If you're not happy with the generative fill result, open the Generative Fill Refiner by selecting the **Generative Fill** button to the right of the preview.

![Studio with an image transformed using c_pad and gen_fill](https://cloudinary-res.cloudinary.com/image/upload/bo_1px_solid_gray/f_auto/q_auto/docs/wide_edit_regenerate_padding_fill_studio.png  "thumb: c_scale,w_700/dpr_2.0, width:700, popup: true")

You can then choose how many different variations you want to generate, and optionally provide a prompt to guide the generation to meet your expectations. 

For example, in the generated picture the table looks empty, so you could set the prompt to `picnic lunch` to generate variations with picnic items on the table.

![Generative fill refiner interface](https://cloudinary-res.cloudinary.com/image/upload/bo_1px_solid_gray/f_auto/q_auto/docs/picnic_lunch_prompt_studio.png "thumb: c_scale,w_500/dpr_2.0, width:500, popup: true")

Click **Transform** to generate the variations.

You can hover over the icon in the top left of each image to compare the original transformation with that variation. If you don't like it, you can click the "thumbs down" icon towards the bottom of the image, removing it from the view.

![Generative fill refiner showing thumbs down button](https://cloudinary-res.cloudinary.com/image/upload/bo_1px_solid_gray/f_auto/q_auto/docs/thumbs_down_studio.png "thumb: c_scale,w_500/dpr_2.0, width:500, popup: true")

If none of the variations meet your needs, you can refine the prompt to be more specific about what you want to see. This will generate additional variations for you to review.

![Generative fill refiner with additional variations](https://cloudinary-res.cloudinary.com/image/upload/bo_1px_solid_gray/f_auto/q_auto/docs/update_transformation_studio.png "thumb: c_scale,w_500/dpr_2.0, width:500, popup: true")

When you find a variation you like, click **Update Transformation** to apply your choice. This selected variation will now be the standard result delivered by your transformation URL.

On returning to **Studio**, you'll see the updated image, which is what the same transformation URL now delivers. 

![Studio with the new version](https://cloudinary-res.cloudinary.com/image/upload/bo_1px_solid_gray/f_auto/q_auto/docs/new_variation_studio.png "thumb: c_scale,w_500/dpr_2.0, width:500, popup: true")

In this case the transformation is `ar_9:16,b_gen_fill,c_pad`.

### Understanding refined transformations

When you click **Update Transformation**, your selected variation becomes the standard result for that transformation. Any delivery URL that begins with the same transformation string (in this case `ar_2:3,b_gen_fill,c_pad`) will now deliver your chosen variation instead of generating a new one. This applies to:

* Direct use of the transformation string
* Longer transformation chains that begin with this string
* Named transformations that exactly match this string
    
More details...

If you have a named transformation that exactly matches this transformation string (e.g. `t_2x3_gen_fill_pad` = `ar_2:3,b_gen_fill,c_pad`), then the refined variation is used.

    ![Transformed image](https://res.cloudinary.com/demo/image/upload/t_2x3_gen_fill_pad/docs/coffee-man.jpg "width:400")

```nodejs
cloudinary.image("docs/coffee-man.jpg", {transformation: ["2x3_gen_fill_pad"]})
```

```react
import { name } from "@cloudinary/url-gen/actions/namedTransformation";

new CloudinaryImage("docs/coffee-man.jpg").namedTransformation(
  name("2x3_gen_fill_pad")
);
```

```vue
import { name } from "@cloudinary/url-gen/actions/namedTransformation";

new CloudinaryImage("docs/coffee-man.jpg").namedTransformation(
  name("2x3_gen_fill_pad")
);
```

```angular
import { name } from "@cloudinary/url-gen/actions/namedTransformation";

new CloudinaryImage("docs/coffee-man.jpg").namedTransformation(
  name("2x3_gen_fill_pad")
);
```

```js
import { name } from "@cloudinary/url-gen/actions/namedTransformation";

new CloudinaryImage("docs/coffee-man.jpg").namedTransformation(
  name("2x3_gen_fill_pad")
);
```

```python
CloudinaryImage("docs/coffee-man.jpg").image(transformation=["2x3_gen_fill_pad"])
```

```php
use Cloudinary\Transformation\NamedTransformation;

(new ImageTag('docs/coffee-man.jpg'))
	->namedTransformation(NamedTransformation::name("2x3_gen_fill_pad"));
```

```java
cloudinary.url().transformation(new Transformation().named("2x3_gen_fill_pad")).imageTag("docs/coffee-man.jpg");
```

```ruby
cl_image_tag("docs/coffee-man.jpg", transformation: ["2x3_gen_fill_pad"])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Named("2x3_gen_fill_pad")).BuildImageTag("docs/coffee-man.jpg")
```

```dart
cloudinary.image('docs/coffee-man.jpg').transformation(Transformation()
	.namedTransformation(NamedTransformation.name("2x3_gen_fill_pad")));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setNamed("2x3_gen_fill_pad")).generate("docs/coffee-man.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().named("2x3_gen_fill_pad")).generate("docs/coffee-man.jpg");
```

```flutter
cloudinary.image('docs/coffee-man.jpg').transformation(Transformation()
	.namedTransformation(NamedTransformation.name("2x3_gen_fill_pad")));
```

```kotlin
cloudinary.image {
	publicId("docs/coffee-man.jpg")
	 namedTransformation(NamedTransformation.name("2x3_gen_fill_pad")) 
}.generate()
```

```jquery
$.cloudinary.image("docs/coffee-man.jpg", {transformation: ["2x3_gen_fill_pad"]})
```

```react_native
import { name } from "@cloudinary/url-gen/actions/namedTransformation";

new CloudinaryImage("docs/coffee-man.jpg").namedTransformation(
  name("2x3_gen_fill_pad")
);
```

    

    If the named transformation is edited at a later date, so it no longer contains an exact match of the refined transformation string (e.g. `t_2x3_gen_fill_pad` = `ar_4:6,b_gen_fill,c_pad`), then a new derived variation is created, and the refined variation is no longer associated with the named transformation. 

    If a new named transformation contains the refined transformation string (e.g. `t_scaled_2x3_gen_fill` = `ar_2:3,b_gen_fill,c_pad/c_scale,w_400`), then it too will use the refined variation.

> **NOTE**: The transformation string can contain several components chained together.

### When refined variations won't be used

Your refined variation won't be delivered in the following cases:

* **Different transformation order**  
    The transformation parameters must appear in the exact same order. For example, moving `b_gen_fill` after `c_pad` will generate a new variation.

    
More details...

The transformation string must be identical to the one used for the refined transformation to return the refined variation. Any differences, even if the transformation itself is equivalent, will result in the original variation being returned. For example, moving the `b_gen_fill` parameter to after the `c_pad` results in the original variation being returned, rather than the refined one:

    ![Transformed image](https://res.cloudinary.com/demo/image/upload/ar_2:3,c_pad,b_gen_fill/docs/coffee-man.jpg "thumb: c_scale,w_400, width:400")

```nodejs
cloudinary.image("docs/coffee-man.jpg", {aspect_ratio: "2:3", background: "gen_fill", crop: "pad"})
```

```react
import { pad } from "@cloudinary/url-gen/actions/resize";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/coffee-man.jpg").resize(
  pad()
    .aspectRatio("2:3")
    .background(generativeFill())
);
```

```vue
import { pad } from "@cloudinary/url-gen/actions/resize";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/coffee-man.jpg").resize(
  pad()
    .aspectRatio("2:3")
    .background(generativeFill())
);
```

```angular
import { pad } from "@cloudinary/url-gen/actions/resize";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/coffee-man.jpg").resize(
  pad()
    .aspectRatio("2:3")
    .background(generativeFill())
);
```

```js
import { pad } from "@cloudinary/url-gen/actions/resize";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/coffee-man.jpg").resize(
  pad()
    .aspectRatio("2:3")
    .background(generativeFill())
);
```

```python
CloudinaryImage("docs/coffee-man.jpg").image(aspect_ratio="2:3", background="gen_fill", crop="pad")
```

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

(new ImageTag('docs/coffee-man.jpg'))
	->resize(Resize::pad()->aspectRatio("2:3")
	->background(
	Background::generativeFill())
	);
```

```java
cloudinary.url().transformation(new Transformation().aspectRatio("2:3").background("gen_fill").crop("pad")).imageTag("docs/coffee-man.jpg");
```

```ruby
cl_image_tag("docs/coffee-man.jpg", aspect_ratio: "2:3", background: "gen_fill", crop: "pad")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio("2:3").Background("gen_fill").Crop("pad")).BuildImageTag("docs/coffee-man.jpg")
```

```dart
cloudinary.image('docs/coffee-man.jpg').transformation(Transformation()
	.resize(Resize.pad().aspectRatio("2:3")
	.background(
	Background.generativeFill())
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio("2:3").setBackground("gen_fill").setCrop("pad")).generate("docs/coffee-man.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().aspectRatio("2:3").background("gen_fill").crop("pad")).generate("docs/coffee-man.jpg");
```

```flutter
cloudinary.image('docs/coffee-man.jpg').transformation(Transformation()
	.resize(Resize.pad().aspectRatio("2:3")
	.background(
	Background.generativeFill())
	));
```

```kotlin
cloudinary.image {
	publicId("docs/coffee-man.jpg")
	 resize(Resize.pad() { aspectRatio("2:3")
	 background(
	Background.generativeFill())
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/coffee-man.jpg", {aspect_ratio: "2:3", background: "gen_fill", crop: "pad"})
```

```react_native
import { pad } from "@cloudinary/url-gen/actions/resize";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/coffee-man.jpg").resize(
  pad()
    .aspectRatio("2:3")
    .background(generativeFill())
);
```

* **Added parameters before the transformation**  
    Adding effects or other transformations before the refined transformation string will generate a new variation.

    
More details...

Whenever the refined transformation string is used at the start of a chained transformation, the refined variant is used. For example, you can decide to make the image grayscale by applying the `grayscale` effect after the transformation, in addition to applying scaling and automatic format and quality optimizations:

    ![Transformed image](https://res.cloudinary.com/demo/image/upload/ar_2:3,b_gen_fill,c_pad/e_grayscale/c_scale,w_400/f_auto/q_auto/docs/coffee-man.jpg "width:400")

```nodejs
cloudinary.image("docs/coffee-man.jpg", {transformation: [
  {aspect_ratio: "2:3", background: "gen_fill", crop: "pad"},
  {effect: "grayscale"},
  {width: 400, crop: "scale"},
  {quality: "auto"}
  ]})
```

```react
import { pad, scale } from "@cloudinary/url-gen/actions/resize";
import { grayscale } from "@cloudinary/url-gen/actions/effect";
import { format, quality } from "@cloudinary/url-gen/actions/delivery";
import { auto as autoFormat } from "@cloudinary/url-gen/qualifiers/format";
import { auto as autoQuality } from "@cloudinary/url-gen/qualifiers/quality";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/coffee-man.jpg")
  .resize(
    pad()
      .aspectRatio("2:3")
      .background(generativeFill())
  )
  .effect(grayscale())
  .resize(scale().width(400))
  .delivery(format(autoFormat()))
  .delivery(quality(autoQuality()));
```

```vue
import { pad, scale } from "@cloudinary/url-gen/actions/resize";
import { grayscale } from "@cloudinary/url-gen/actions/effect";
import { format, quality } from "@cloudinary/url-gen/actions/delivery";
import { auto as autoFormat } from "@cloudinary/url-gen/qualifiers/format";
import { auto as autoQuality } from "@cloudinary/url-gen/qualifiers/quality";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/coffee-man.jpg")
  .resize(
    pad()
      .aspectRatio("2:3")
      .background(generativeFill())
  )
  .effect(grayscale())
  .resize(scale().width(400))
  .delivery(format(autoFormat()))
  .delivery(quality(autoQuality()));
```

```angular
import { pad, scale } from "@cloudinary/url-gen/actions/resize";
import { grayscale } from "@cloudinary/url-gen/actions/effect";
import { format, quality } from "@cloudinary/url-gen/actions/delivery";
import { auto as autoFormat } from "@cloudinary/url-gen/qualifiers/format";
import { auto as autoQuality } from "@cloudinary/url-gen/qualifiers/quality";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/coffee-man.jpg")
  .resize(
    pad()
      .aspectRatio("2:3")
      .background(generativeFill())
  )
  .effect(grayscale())
  .resize(scale().width(400))
  .delivery(format(autoFormat()))
  .delivery(quality(autoQuality()));
```

```js
import { pad, scale } from "@cloudinary/url-gen/actions/resize";
import { grayscale } from "@cloudinary/url-gen/actions/effect";
import { format, quality } from "@cloudinary/url-gen/actions/delivery";
import { auto as autoFormat } from "@cloudinary/url-gen/qualifiers/format";
import { auto as autoQuality } from "@cloudinary/url-gen/qualifiers/quality";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/coffee-man.jpg")
  .resize(
    pad()
      .aspectRatio("2:3")
      .background(generativeFill())
  )
  .effect(grayscale())
  .resize(scale().width(400))
  .delivery(format(autoFormat()))
  .delivery(quality(autoQuality()));
```

```python
CloudinaryImage("docs/coffee-man.jpg").image(transformation=[
  {'aspect_ratio': "2:3", 'background': "gen_fill", 'crop': "pad"},
  {'effect': "grayscale"},
  {'width': 400, 'crop': "scale"},
  {'quality': "auto"}
  ])
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Effect;
use Cloudinary\Transformation\Delivery;
use Cloudinary\Transformation\Format;
use Cloudinary\Transformation\Quality;
use Cloudinary\Transformation\Background;

(new ImageTag('docs/coffee-man.jpg'))
	->resize(Resize::pad()->aspectRatio("2:3")
	->background(
	Background::generativeFill())
	)
	->effect(Effect::grayscale())
	->resize(Resize::scale()->width(400))
	->delivery(Delivery::format(
	Format::auto()))
	->delivery(Delivery::quality(
	Quality::auto()));
```

```java
cloudinary.url().transformation(new Transformation()
  .aspectRatio("2:3").background("gen_fill").crop("pad").chain()
  .effect("grayscale").chain()
  .width(400).crop("scale").chain()
  .quality("auto")).imageTag("docs/coffee-man.jpg");
```

```ruby
cl_image_tag("docs/coffee-man.jpg", transformation: [
  {aspect_ratio: "2:3", background: "gen_fill", crop: "pad"},
  {effect: "grayscale"},
  {width: 400, crop: "scale"},
  {quality: "auto"}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .AspectRatio("2:3").Background("gen_fill").Crop("pad").Chain()
  .Effect("grayscale").Chain()
  .Width(400).Crop("scale").Chain()
  .Quality("auto")).BuildImageTag("docs/coffee-man.jpg")
```

```dart
cloudinary.image('docs/coffee-man.jpg').transformation(Transformation()
	.resize(Resize.pad().aspectRatio("2:3")
	.background(
	Background.generativeFill())
	)
	.effect(Effect.grayscale())
	.resize(Resize.scale().width(400))
	.delivery(Delivery.format(
	Format.auto()))
	.delivery(Delivery.quality(
	Quality.auto())));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setAspectRatio("2:3").setBackground("gen_fill").setCrop("pad").chain()
  .setEffect("grayscale").chain()
  .setWidth(400).setCrop("scale").chain()
  .setQuality("auto")).generate("docs/coffee-man.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .aspectRatio("2:3").background("gen_fill").crop("pad").chain()
  .effect("grayscale").chain()
  .width(400).crop("scale").chain()
  .quality("auto")).generate("docs/coffee-man.jpg");
```

```flutter
cloudinary.image('docs/coffee-man.jpg').transformation(Transformation()
	.resize(Resize.pad().aspectRatio("2:3")
	.background(
	Background.generativeFill())
	)
	.effect(Effect.grayscale())
	.resize(Resize.scale().width(400))
	.delivery(Delivery.format(
	Format.auto()))
	.delivery(Delivery.quality(
	Quality.auto())));
```

```kotlin
cloudinary.image {
	publicId("docs/coffee-man.jpg")
	 resize(Resize.pad() { aspectRatio("2:3")
	 background(
	Background.generativeFill())
	 })
	 effect(Effect.grayscale())
	 resize(Resize.scale() { width(400) })
	 delivery(Delivery.format(
	Format.auto()))
	 delivery(Delivery.quality(
	Quality.auto())) 
}.generate()
```

```jquery
$.cloudinary.image("docs/coffee-man.jpg", {transformation: [
  {aspect_ratio: "2:3", background: "gen_fill", crop: "pad"},
  {effect: "grayscale"},
  {width: 400, crop: "scale"},
  {quality: "auto"}
  ]})
```

```react_native
import { pad, scale } from "@cloudinary/url-gen/actions/resize";
import { grayscale } from "@cloudinary/url-gen/actions/effect";
import { format, quality } from "@cloudinary/url-gen/actions/delivery";
import { auto as autoFormat } from "@cloudinary/url-gen/qualifiers/format";
import { auto as autoQuality } from "@cloudinary/url-gen/qualifiers/quality";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/coffee-man.jpg")
  .resize(
    pad()
      .aspectRatio("2:3")
      .background(generativeFill())
  )
  .effect(grayscale())
  .resize(scale().width(400))
  .delivery(format(autoFormat()))
  .delivery(quality(autoQuality()));
```

    

    If you place transformation parameters before the refined transformation string, then the refined variant isn't used. For example, here, the `grayscale` effect is in the component before the `gen_fill` transformation and you can see that it's not the refined variant that's used for the generative fill:

    ![Transformed image](https://res.cloudinary.com/demo/image/upload/e_grayscale/ar_2:3,b_gen_fill,c_pad/c_scale,w_400/f_auto/q_auto/docs/coffee-man.jpg "width:400")

```nodejs
cloudinary.image("docs/coffee-man.jpg", {transformation: [
  {effect: "grayscale"},
  {aspect_ratio: "2:3", background: "gen_fill", crop: "pad"},
  {width: 400, crop: "scale"},
  {quality: "auto"}
  ]})
```

```react
import { grayscale } from "@cloudinary/url-gen/actions/effect";
import { pad, scale } from "@cloudinary/url-gen/actions/resize";
import { format, quality } from "@cloudinary/url-gen/actions/delivery";
import { auto as autoFormat } from "@cloudinary/url-gen/qualifiers/format";
import { auto as autoQuality } from "@cloudinary/url-gen/qualifiers/quality";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/coffee-man.jpg")
  .effect(grayscale())
  .resize(
    pad()
      .aspectRatio("2:3")
      .background(generativeFill())
  )
  .resize(scale().width(400))
  .delivery(format(autoFormat()))
  .delivery(quality(autoQuality()));
```

```vue
import { grayscale } from "@cloudinary/url-gen/actions/effect";
import { pad, scale } from "@cloudinary/url-gen/actions/resize";
import { format, quality } from "@cloudinary/url-gen/actions/delivery";
import { auto as autoFormat } from "@cloudinary/url-gen/qualifiers/format";
import { auto as autoQuality } from "@cloudinary/url-gen/qualifiers/quality";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/coffee-man.jpg")
  .effect(grayscale())
  .resize(
    pad()
      .aspectRatio("2:3")
      .background(generativeFill())
  )
  .resize(scale().width(400))
  .delivery(format(autoFormat()))
  .delivery(quality(autoQuality()));
```

```angular
import { grayscale } from "@cloudinary/url-gen/actions/effect";
import { pad, scale } from "@cloudinary/url-gen/actions/resize";
import { format, quality } from "@cloudinary/url-gen/actions/delivery";
import { auto as autoFormat } from "@cloudinary/url-gen/qualifiers/format";
import { auto as autoQuality } from "@cloudinary/url-gen/qualifiers/quality";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/coffee-man.jpg")
  .effect(grayscale())
  .resize(
    pad()
      .aspectRatio("2:3")
      .background(generativeFill())
  )
  .resize(scale().width(400))
  .delivery(format(autoFormat()))
  .delivery(quality(autoQuality()));
```

```js
import { grayscale } from "@cloudinary/url-gen/actions/effect";
import { pad, scale } from "@cloudinary/url-gen/actions/resize";
import { format, quality } from "@cloudinary/url-gen/actions/delivery";
import { auto as autoFormat } from "@cloudinary/url-gen/qualifiers/format";
import { auto as autoQuality } from "@cloudinary/url-gen/qualifiers/quality";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/coffee-man.jpg")
  .effect(grayscale())
  .resize(
    pad()
      .aspectRatio("2:3")
      .background(generativeFill())
  )
  .resize(scale().width(400))
  .delivery(format(autoFormat()))
  .delivery(quality(autoQuality()));
```

```python
CloudinaryImage("docs/coffee-man.jpg").image(transformation=[
  {'effect': "grayscale"},
  {'aspect_ratio': "2:3", 'background': "gen_fill", 'crop': "pad"},
  {'width': 400, 'crop': "scale"},
  {'quality': "auto"}
  ])
```

```php
use Cloudinary\Transformation\Effect;
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Delivery;
use Cloudinary\Transformation\Format;
use Cloudinary\Transformation\Quality;
use Cloudinary\Transformation\Background;

(new ImageTag('docs/coffee-man.jpg'))
	->effect(Effect::grayscale())
	->resize(Resize::pad()->aspectRatio("2:3")
	->background(
	Background::generativeFill())
	)
	->resize(Resize::scale()->width(400))
	->delivery(Delivery::format(
	Format::auto()))
	->delivery(Delivery::quality(
	Quality::auto()));
```

```java
cloudinary.url().transformation(new Transformation()
  .effect("grayscale").chain()
  .aspectRatio("2:3").background("gen_fill").crop("pad").chain()
  .width(400).crop("scale").chain()
  .quality("auto")).imageTag("docs/coffee-man.jpg");
```

```ruby
cl_image_tag("docs/coffee-man.jpg", transformation: [
  {effect: "grayscale"},
  {aspect_ratio: "2:3", background: "gen_fill", crop: "pad"},
  {width: 400, crop: "scale"},
  {quality: "auto"}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Effect("grayscale").Chain()
  .AspectRatio("2:3").Background("gen_fill").Crop("pad").Chain()
  .Width(400).Crop("scale").Chain()
  .Quality("auto")).BuildImageTag("docs/coffee-man.jpg")
```

```dart
cloudinary.image('docs/coffee-man.jpg').transformation(Transformation()
	.effect(Effect.grayscale())
	.resize(Resize.pad().aspectRatio("2:3")
	.background(
	Background.generativeFill())
	)
	.resize(Resize.scale().width(400))
	.delivery(Delivery.format(
	Format.auto()))
	.delivery(Delivery.quality(
	Quality.auto())));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setEffect("grayscale").chain()
  .setAspectRatio("2:3").setBackground("gen_fill").setCrop("pad").chain()
  .setWidth(400).setCrop("scale").chain()
  .setQuality("auto")).generate("docs/coffee-man.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .effect("grayscale").chain()
  .aspectRatio("2:3").background("gen_fill").crop("pad").chain()
  .width(400).crop("scale").chain()
  .quality("auto")).generate("docs/coffee-man.jpg");
```

```flutter
cloudinary.image('docs/coffee-man.jpg').transformation(Transformation()
	.effect(Effect.grayscale())
	.resize(Resize.pad().aspectRatio("2:3")
	.background(
	Background.generativeFill())
	)
	.resize(Resize.scale().width(400))
	.delivery(Delivery.format(
	Format.auto()))
	.delivery(Delivery.quality(
	Quality.auto())));
```

```kotlin
cloudinary.image {
	publicId("docs/coffee-man.jpg")
	 effect(Effect.grayscale())
	 resize(Resize.pad() { aspectRatio("2:3")
	 background(
	Background.generativeFill())
	 })
	 resize(Resize.scale() { width(400) })
	 delivery(Delivery.format(
	Format.auto()))
	 delivery(Delivery.quality(
	Quality.auto())) 
}.generate()
```

```jquery
$.cloudinary.image("docs/coffee-man.jpg", {transformation: [
  {effect: "grayscale"},
  {aspect_ratio: "2:3", background: "gen_fill", crop: "pad"},
  {width: 400, crop: "scale"},
  {quality: "auto"}
  ]})
```

```react_native
import { grayscale } from "@cloudinary/url-gen/actions/effect";
import { pad, scale } from "@cloudinary/url-gen/actions/resize";
import { format, quality } from "@cloudinary/url-gen/actions/delivery";
import { auto as autoFormat } from "@cloudinary/url-gen/qualifiers/format";
import { auto as autoQuality } from "@cloudinary/url-gen/qualifiers/quality";
import { generativeFill } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryImage("docs/coffee-man.jpg")
  .effect(grayscale())
  .resize(
    pad()
      .aspectRatio("2:3")
      .background(generativeFill())
  )
  .resize(scale().width(400))
  .delivery(format(autoFormat()))
  .delivery(quality(autoQuality()));
```

* **Changed original image**  
    If you overwrite the original image, all refined variations are lost.

    
More details...

If you overwrite the saved image in the product environment (maintaining the same public ID), you'll lose the refined variations. Therefore, if you apply the same transformation string, you'll generate a completely new variation.

* **Using variables**  
    [User defined variables](user_defined_variables) are not supported in refined transformations.

## Focus Area Refiner
When cropping images, or placing layers, you may have certain areas of interest in the composition of the picture that you want to focus on. Although there are [AI-based ways](ai_in_action#ai_content_analysis_for_transformations) to focus on areas of an image, sometimes you need to ensure accuracy and consistency, so Cloudinary provides the capability to define and refine custom areas of an image.
The **Focus Area Refiner** lets you fine-tune or specify new [custom focus areas](custom_focus_areas) in an image.
You can open the Focus Area Refiner for any image from [Studio](dam_editing_and_transformations#new_studio). Click **Refiners** in the left panel, then select the **Focus Area** button.

![Thumbnail of the image with the Select Focus Areas option](https://cloudinary-res.cloudinary.com/image/upload/bo_1px_solid_gray/f_auto/q_auto/docs/edit_focus_areas-studio.png "thumb: c_scale,w_500/dpr_2.0, width:500, popup: true")

> **TIP**:
>
> In the Media Library, you can open the **Focus Area Refiner** from the **Analysis** tab of the Manage page. For more information, see [Asset analysis](media_library_for_developers#asset_analysis_images_only).

The Focus Area Refiner contains three tabs:

* **Face**: lets you adjust the areas automatically detected as faces on upload, in addition to adding new ones.
* **Custom**: lets you define or edit a custom region for the image.
* **Region**: lets you define or edit multiple named regions for the image.

![Focus Area Refiner](https://cloudinary-res.cloudinary.com/image/upload/bo_1px_solid_gray/f_auto/q_auto/docs/focus_area_refiner_studio.png "thumb: c_scale,w_500/dpr_2.0, width:500, popup: true")

You can either enter exact coordinates for the focus areas, or drag your mouse to select the desired region on the displayed image, which automatically populates the coordinates.
Learn more about using [custom focus areas](custom_focus_areas).