Resize, crop and other common transformations
A comprehensive guide that covers all the commonly used image transformations that you will need for your web applications.
Used to specify the width of the output image. Accepts integer value greater than 1. If a value between 0 and 1 is specified, it acts as a percentage width. Therefore, 0.1 means 10% of the original width, 0.4 means 40% of the original width, and so on.
You can also specify the
auto
_ _value for this parameter (w-auto). Doing so will instruct ImageKit to read the width value from the Width Client Hint request header. Learn more about client hints here.Original
200px wide
40% width of original image
Used to specify the height of the output image. Accepts integer value greater than 1. If a value between 0 and 1 is specified, the value acts as a percentage height. Therefore, 0.1 means 10% of the original height, 0.4 means 40% of the original height, and so on.
Original
200px height
40% height of the original image
If you specify both height(h) and width(w) in the URL along with aspect ratio(ar), then the aspect ratio is ignored.
Original
width 400px and aspect ratio 4:3
Tip for choosing the right cropping strategy
When choosing among different strategies for cropping, think in terms of your website layout and desired output image.
- If you want to preserve the whole image content (no cropping) and need the exact same dimensions (height and width) in the output image as requested, choose either of the pad resize crop or forced crop strategy.
- If you want to preserve the whole image content (no cropping), but it is okay if one or both the dimensions (height or width) in the output image are adjusted to preserve the aspect ratio. Then choose either of the max-size cropping or min-size cropping strategy. You can also use max-size-enlarge cropping strategy if you want to allow enlarging of image in case requested dimensions are more than original image dimension.
- If you need the exact same dimensions (height and width) in the output image as requested but it's okay to crop the image to preserve the aspect ratio (or extract a region from the original image). Then choose either of the maintain ratio crop or extract crop or pad extract crop strategy. You can combine the extract crop strategy with different focus values to get the desired result.
In the pad resize crop strategy, the output image's dimension (height and width) is the same as requested, no cropping takes place, and the aspect ratio is preserved. This is accomplished by adding padding around the output image to get it to match the exact dimension as requested.
Original
cm-pad_resize

Original 640x865 image
URL - https://ik.imagekit.io/demo/img/plant.jpeg?tr=w-300,h-200,cm-pad_resize,bg-F3F3F3
The output image is exactly 300x200. However, to maintain the aspect ratio and prevent cropping a solid colored padding is added around the resized image.

300x200 image
For sake of clarity, we have made the padding background slightly grey in color (#F3F3F3) using the background parameter (
bg
) in the URL.In the examples above, we saw that when the image is padded using the pad resize crop strategy, the padding is equal on both sides of the image. However, there might be cases where we want all the padding to be added on only one side of the image. This can be done using the focus (fo) parameter.
Padding to the right
Padding to the bottom
URL - https://ik.imagekit.io/demo/img/plant.jpeg?tr=w-300,h-200,cm-pad_resize,bg-F3F3F3,fo-left
We added the
fo-left
transformation to our image. Now, all the padding is on the right of the image, while the image itself is on the left (determined by the value of focus(fo) parameter).
We added the
fo-top
transformation to our image. Now, all the padding is on the bottom of the image, while the image itself is on the top (determined by the value of focus(fo) parameter).
In a forced crop strategy, the output image's dimension (height and width) is exactly the same as requested, no cropping takes place, but the aspect ratio is not preserved. It forcefully squeezes the original image to get it to fit completely within the output dimensions.
Original
c-force

Original 640x865 image

300x200 image
The entire original image is preserved in the output image as well, but the hand and the plant have been squeezed to fit into the output image.
In the max-size crop strategy, whole image content is preserved (no cropping), the aspect ratio is preserved, but one of the dimensions (height or width) is adjusted.
The output image is less than or equal to the dimensions specified in the URL,i.e., at least one dimension will exactly match the output dimension requested, and the other dimension will be equal to or smaller than the corresponding output dimension requested.
If the requested dimension is more than the original dimension of the image, then the original image is returned without cropping. For enlarging image more than original dimensions check max-size-enlarge cropping strategy.
Original
c-at_max

Original 640x865 image

148x200 image
The entire image content and the aspect ratio is preserved. The output image dimensions are 148x200. So the height is exactly what is requested, but the width is smaller than what was requested.
This mode is particularly useful if you have a container and you want to ensure that the image will never be larger than that container.
This strategy is similar to the max-size cropping strategy with the addition that it also allows image to enlarge more than its original dimensions.
The output image is less than or equal to the dimensions specified in the URL,i.e., at least one dimension will exactly match the output dimension requested, and the other dimension will be equal to or smaller than the corresponding output dimension requested.
Original
c-at_max_enlarge

Original 640x865 image

740x1000 image
The entire image content and the aspect ratio is preserved. The output image dimensions are 740x1000. So the height is exactly what is requested, but the width is smaller than what was requested.
This strategy is similar to the max-size cropping strategy, with the only difference being that unlike the max-size strategy, the image is equal to or larger than the requested dimensions. One of the dimensions will be exactly the same as what is requested, while the other dimension will be equal to or larger than what is requested.
Original
c-at_least

Original 640x865 image

300x405 image
The entire image content and aspect ratio is preserved. The output image dimensions are 300x405. So the width is exactly the same as what was requested, but the height is larger than what was requested.
This is useful for cases where you want to have an image that is always at least as large as the container.
This is the default crop strategy. If nothing is specified in the URL, this strategy gets applied automatically. In this strategy, the output image's dimension (height and width) is the same as requested, and the aspect ratio is preserved. This is accomplished resizing the image to the requested dimension and in the process cropping parts from the original image.
By default ImageKit.io extract the image from the center but you can change this using focus parameter.
Original
c-maintain_ratio (center crop)
c-maintain_ratio with fo-custom

Original 640x865 image

300x200 cropped image
In the above image, the top and the bottom of the image got cropped out. But the aspect ratio has been preserved from the original to the output image i.e. the hand and the plant are not skewed or forcefully resized to fit the output dimensions.

Using c-maintain_ratio with fo-custom - https://ik.imagekit.io/demo/img/bike-image.jpeg?tr=w-500,h-100,fo-custom