Blur Transformation
The blur transformation adds a Gaussian blur to the image. The amount of blur can be controlled by an integer value from 1 to 100, 1 being the lowest amount of blur and 100 being the highest.
Syntax
bl-<blur_amount>
Let's take a look at some example URLs and output images
1. Adding a small blur with value 2 to the image
https://ik.imagekit.io/demo/tr:w-300,bl-2/medium_cafe_B1iTdD0C.jpg
2. Adding a large blur with value 50 to the image
https://ik.imagekit.io/demo/tr:w-300,bl-50/medium_cafe_B1iTdD0C.jpg
The blur transform can be used to create low-quality image placeholders for lazy loading images as explained in our post here.
Radius Transformation
The radius transformation is used to curve the corners of your image. If you are familiar with CSS, it is pretty similar to the border-radius property. You can either specify the radius as an integral value starting from 1 or you can provide a special value called "max", which turns the image into a perfect circle.
Syntax
r-<radius_value> - here radius value can be an integer greater than 1 or "max"
Let's take a look at some example URLs and output images
1. Image rounded with a small radius value
https://ik.imagekit.io/demo/tr:w-250,r-25/medium_cafe_B1iTdD0C.jpg
2. Image rounded with "max" radius value
https://ik.imagekit.io/demo/tr:w-250,r-max/medium_cafe_B1iTdD0C.jpg
3. Using radius with complex resizing logics
For simpler cases, you can use radius in the same transformation as the height and width parameters. However, if you are using advanced cropping parameters, like crop (c) and crop mode (cm), then you should chain the radius transformation in a step after the resizing transformation. This ensures correct application of radius on your images.
For example,
These work fine
https://ik.imagekit.io/demo/tr:w-250,r-40/medium_cafe_B1iTdD0C.jpg
https://ik.imagekit.io/demo/tr:w-250,h-200,r-40/medium_cafe_B1iTdD0C.jpg
But this won't work because of crop "at_max" in the same step
https://ik.imagekit.io/demo/tr:w-250,h-200,c-at_max,r-40/medium_cafe_B1iTdD0C.jpg
To make it work, use the radius transform in the next step after resizing
https://ik.imagekit.io/demo/tr:w-250,h-200,c-at_max:r-40/medium_cafe_B1iTdD0C.jpg
Note that, for moving radius to the next step, it is now separated from the rest of the transformation string by a colon ":" instead of a comma ",". You can read more about chained transformations here.
Trim Transformation
The trim transformation removes all redundant or similar colored pixels from the corners of your images. This transformation is particularly useful, if you have an image, where the image is on a solid colored background (or a nearly solid colored background) and you just want to extract out the object from that image and remove all the area surrounding that object.
By default, ImageKit does not apply trim transform to any image. The trim transform can be specified either as "true", in which case it uses a default logic to identify the redundant surrounding region and removes it, or you can specify it as an integer value, which is then used as the threshold for identifying the redundant surrounding region.
Syntax
t-<trim_value> - trim_value can either be true or a positive integer
Let's look at some examples of using trim. Here is the original image which has a red circle in the center and a background that has a gradient from white at the edges to light grey in the center.
1. With trim equal to true
Some of the white region from the corners of the images has got trimmed down.
https://ik.imagekit.io/demo/img/tr:t-true/trim_example_BkgQVu7oX.png
2. With trim equal to 5
Here some trimming does take place (you can notice that the grey circle in the background is getting cut off), but it is not as much as what happened when the value of trim was set to "true"
https://ik.imagekit.io/demo/img/tr:t-5/trim_example_BkgQVu7oX.png
3. With trim equal to 15
Here the amount of trimming is higher than what happened with trim set to "true". This is because with a higher value specified for trim, more and more pixels are considered as similar and redundant and hence get removed.
https://ik.imagekit.io/demo/img/tr:t-15/trim_example_BkgQVu7oX.png
In case of any questions, please create a support ticket from your ImageKit dashboard.