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-

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- - 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 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.

Did this answer your question?