There are certain cases where the output image would depend on the order in which the transformations are carried out. For example, let's say we want to resize an image to 400x300 and rotate it by 90 degrees. We can have two ways of achieving this - resize before rotation and resize after rotation.
In resize before rotation, the image is first resized to 400x300 and then rotated by 90 degrees resulting in a 300x400 image dimension of the output image. Whereas in resize after rotation, the image is first rotated by 90 degrees and then resized to 400x300. The output image remains 400x300 in size. Let's look at the difference in the output of the two methods.
What are chained transformations?
Chained transformations provide a simple way to control the sequence in which the transformations are applied. This allows you to have a finer control on the final output image and also enables you to achieve really complex transformations by combining or chaining smaller transformations together.
Each step in the chained transform is separated by a colon (":"). The step appearing first is applied first.
Let's look at how we can chain transforms together. We will start with the above example.
The general resize transformation to get a 400x300 image is `tr:w-400,h-300`. The general rotation transformation for 90 degree rotation in an image is `rt-90`.
1. Resize before rotate
The step that resizes the image should come before the step that rotates the image and the two steps need to be separated by a colon ":"
https://ik.imagekit.io/demo/img/default-image.jpeg?tr=w-400,h-300:rt-90
2. Resize after rotate
The step that resizes the image should come after the step that rotates the image and the two steps need to be separated by a colon ":"
https://ik.imagekit.io/demo/img/default-image.jpeg?tr=rt-90:w-400,h-300
Apart from providing more control on the output image, using chained transforms also makes it easier to logically understand the transformation sequence and have no surprises. Just by reading the transformation, you would able to anticipate the output. The output of a chained transformation, compared to writing everything in the same transformation step, is much more predictable.
This is especially true for more complex transformations. Let's take a look at a more complex transform below.
Complex example of chained transforms
Let's say that we want an image to be first resized to 400x400, then we want to add a 100px padding to the left of that image which is black in color. Then we want to add ImageKit's logo in this padding on the left. The logo should have a height of 20px and should be positioned 10px from the left and 40px from the top.
This is a complex transformation to achieve. Let's break it down in to steps.
1. Resize to 400x400
This is fairly straightforward.
w-400,h-400
2. Add a 100px padding to the left
100px padding on the left means that the resulting image will have a width of 400+100px = 500px. And the image should be completely on the right in this image. This is achieved using the pad_resize crop mode (to pad the image in case resize doesn't match the aspect ratio) along with the focus parameter set to right (to focus the image to the right). We also need to set the background to black (#000000). The transformation thus becomes -
w-500,h-400,cm-pad_resize,fo-right,bg-000000
3. Overlay ImageKit's logo
ImageKit's logo is accessible at logo-white_SJwqB4Nfe.png and then we can position and resize the overlay using overlay x, y and overlay height transforms. The transformation thus becomes
oi-logo-white_SJwqB4Nfe.png,ox-10,oy-40,oh-20
We combine these three steps into a chain with each step separated by a colon (":")
Final Chained Transformation
w-400,h-400:w-500,h-400,cm-pad_resize,fo-right,bg-000000:oi-logo-white_SJwqB4Nfe.png,ox-10,oy-40,oh-20
Final URL
https://ik.imagekit.io/demo/img/default-image.jpg?tr=w-400,h-400:w-500,h-400,cm-pad_resize,fo-right,bg-000000:oi-logo-white_SJwqB4Nfe.png,ox-10,oy-50,oh-20
Output Image
Breaking down this complex transformation into steps and chaining them together, makes it very simple to understand and easier to construct. You can also create a named transformation to cover this complex chained transformation.
For example, we created a named transformation 'pad_overlay' with the transformation set to the above chained transformation.
Our URL then becomes,
https://ik.imagekit.io/demo/img/default-image.jpg?tr=n-pad_overlay
This way we combine the power of named transformations with chained transformations to achieve really complex transformations, yet keeping our URLs clean and understandable.
You can read more about named transformations here.
If you have any questions about using chained transformations, please create a support ticket from your ImageKit dashboard.