# Focal point in percentage

**URL:** <https://community.imagekit.io/t/focal-point-in-percentage/216>\
**Category:** Image API\
**Created:** [September 29, 2025, 10:19pm UTC](https://community.imagekit.io/t/focal-point-in-percentage/216 "2025-09-29T22:19:41Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![RobinFerrari](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.imagekit.io/robinferrari/32/58_2.png) [@RobinFerrari](https://community.imagekit.io/u/RobinFerrari)\
**Post date:** [September 29, 2025, 10:19pm UTC](https://community.imagekit.io/t/focal-point-in-percentage/216/1 "2025-09-29T22:19:41Z")

</div>

Is there any way to crop image based on a focalpoint in percentage like we can do on imagix:

> **[Focal Point X Position | Rendering API](https://docs.imgix.com/en-US/apis/rendering/focal-point-crop/focal-point-x-position)**
>
> Sets the relative horizontal value for the focal point of an image

---

<div class="post-metadata">

**Author:** ![imagekit\_admin](https://avatars.discourse-cdn.com/v4/letter/i/76d3ee/32.png) [@imagekit\_admin](https://community.imagekit.io/u/imagekit_admin)\
**Post date:** [October 1, 2025, 7:32am UTC](https://community.imagekit.io/t/focal-point-in-percentage/216/2 "2025-10-01T07:32:44Z")

</div>

While we are working on implementing this in a single step transformation, it can be done in a two-step chained transformation as of now.

```auto
https://ik.imagekit.io/demo/img/default-image.jpg?tr=w-2000,ar-3200-1350,c-at_least:w-2000,ar-3200-1350,cm-extract,xc-cw_mul_0.5,yc-ch_mul_0.4

```

Here, the first step is `w-2000,ar-3200-1350,c-at_least`, which means resize the image to be atleast larger than or equal to - width 2000, aspect ratio 3200:1500. So we end up with an image 2000x2000

In next step `w-2000,ar-3200-1350,cm-extract,xc-cw_mul_0.5,yc-ch_mul_0.4` we are now extracting the area equal to width 2000, aspect ratio 3200:1500 (so our width in this step is same as the previous step, and focal point will effectively change only along the y axis. So, we use the `yc` parameter to say that focal point should be at 40% (`0.4`) of the previous step’s image height (`ch`). xc parameter is at the center of the previous steps width (by multiplying `cw` with `0.5`)

We are making use of [Arithmetic Expressions in Transformations](https://imagekit.io/docs/arithmetic-expressions-in-transformations) , [Chained Transformations](https://imagekit.io/docs/transformations#chained-transformations), and [different resize and crop modes](https://imagekit.io/docs/image-resize-and-crop).

---

<div class="post-metadata">

**Author:** ![RobinFerrari](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.imagekit.io/robinferrari/32/58_2.png) [@RobinFerrari](https://community.imagekit.io/u/RobinFerrari)\
**Post date:** [November 5, 2025, 9:35am UTC](https://community.imagekit.io/t/focal-point-in-percentage/216/3 "2025-11-05T09:35:36Z")

</div>

> [@imagekit\_admin](#):
>
> `?tr=w-2000,ar-3200-1350,c-at_least:w-2000,ar-3200-1350,cm-extract,xc-cw_mul_0.5,yc-ch_mul_0.4`

Ok, so just to be sure I understand correctly:  
Imagine I want a function to generate this transformation, it could look something like this.

```ts
function generateTransformation(width: number, height: number, x: string, y:string){
  const widthNormalize = 'w-2000';
  const aspectRatio = `ar-${width}-${height}`;
  return `?tr=${widthNormalize},${aspectRatio},c-at_least:${widthNormalize},${aspectRatio},cm-extract,xc-cw_mul_${x},yc-ch_mul_${y}:w-${width},h-${height}`
}

```

Is this logic correct ?

(and increase width normalize if target size is bigger than 2000)

---

<div class="post-metadata">

**Author:** ![imagekit\_admin](https://avatars.discourse-cdn.com/v4/letter/i/76d3ee/32.png) [@imagekit\_admin](https://community.imagekit.io/u/imagekit_admin)\
**Post date:** [November 6, 2025, 6:03am UTC](https://community.imagekit.io/t/focal-point-in-percentage/216/4 "2025-11-06T06:03:23Z")

</div>

Yes. The code looks right, as long as x and y are in decimals between 0 and 1.  
Did you try it out for a few images?

---

<div class="post-metadata">

**Author:** ![JeanBenitez](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.imagekit.io/jeanbenitez/32/80_2.png) [@JeanBenitez](https://community.imagekit.io/u/JeanBenitez)\
**Post date:** [January 4, 2026, 2:17am UTC](https://community.imagekit.io/t/focal-point-in-percentage/216/5 "2026-01-04T02:17:16Z")

</div>

Pure gold explanation. Thanks!

---

<div class="post-metadata">

**Author:** ![Tom](https://avatars.discourse-cdn.com/v4/letter/t/3d9bf3/32.png) [@Tom](https://community.imagekit.io/u/Tom)\
**Post date:** [January 21, 2026, 8:24pm UTC](https://community.imagekit.io/t/focal-point-in-percentage/216/6 "2026-01-21T20:24:39Z")

</div>

I’m not sure I understand why this couldn’t just be simplified down to this:

`?tr=h-{height},w-{width},c-maintain_ratio,fo-custom,xc-iw_mul_{focalX},yc-ih_mul_{focalY}`

It doesn’t seem to work, but it looks like it should hold the aspect ratio and set the focal point to the percent converted to pixels of the original image