Some transformations are dependent on the sequence they're carried out in. Chained transformations provide a simple way to control the sequence in which transformations are applied.
For example, we have a transformation sequence that requires the input image to be resized from 800x600px to 400x300px and rotated by 90 degrees. The transformation string would be
Here are two possible scenarios:
Resize before Rotation: The input image of 800x600px is first resized to obtain a 400x300px image. The image is then rotated by 90 degrees. The output image would be a 300x400px image with all the content from the original image (despite 90-degree rotation). This is also the
default behaviour of ImageKit.io.
Rotation before Resize: The input image of 800x600px is first rotated by 90 degrees to obtain a 600x800px image. Then, the image is resized to obtain a 400x300px image. The output image would be a sideways image of 400x300px dimension with some portion of the original image missing.
As it is easy to confuse the two cases while performing image transformations, ImageKit.io helps you with an easy way to get the desired output image using Chained Transformations. In Chained Transformations, you specify the transformations in the sequence you want the transformations to be applied in. Each step of the transformation is separated by a colon
In the above example, rotate and resize can be considered as two steps of the transformation chain.
tr:w-400,h-300 and Rotate Step:
These two steps can be combined within a chained transformation to get the desired output image.
Resize before Rotation:
Resize after Rotation:
In the above transformations, note that each step is separated using
: . Also, the transformation string becomes expressive about the transformation that will be performed and the sequence it will be performed in. You can use similar sequences to perform complex transformations as well.