Blur, background color and radius

This is a quick guide to demonstrate how to use blur, background and border-radius transformations on images. You can read a more detailed documentation here.

1. Blur

This can be used to create an image loading effect where the image comes into focus from a blurred version of the same image similar to the image-loading effect we see on the popular blogging site Medium.

Original Image

https://ik.imagekit.io/demo/tr:w-200/medium_cafe_B1iTdD0C.jpg

Blur radius 2

https://ik.imagekit.io/demo/tr:w-200,bl-2/medium_cafe_B1iTdD0C.jpg

Blur radius 30

https://ik.imagekit.io/demo/tr:w-200,bl-30/medium_cafe_B1iTdD0C.jpg

2. Background

This can be used to provide a solid background to a PNG image with a transparent background or to provide a solid background for an image that is to be overlaid on a canvas larger than its dimension.

Original PNG Image with transparent background

https://ik.imagekit.io/demo/imagekitwebsite/tr:bg-FF0000/static/build/img/logo-dark.png?hash=a498f59e8058270aa124971fd3c79653

Image With Red background

https://ik.imagekit.io/demo/imagekitwebsite/tr:bg-FF0000/static/build/img/logo-dark.png?hash=a498f59e8058270aa124971fd3c79653

 

Original Image

https://ik.imagekit.io/demo/tr:w-200/medium_cafe_B1iTdD0C.jpg

Image super-imposed on a solid background

https://ik.imagekit.io/demo/tr:w-400,h-200,cm-pad_resize,bg-FF0000/medium_cafe_B1iTdD0C.jpg

 

3. Border radius

This transformation can be used to create rounded images like rounded profile pictures.

Image with slightly rounded corners

https://ik.imagekit.io/demo/tr:w-100,h-100,r-20/medium_cafe_B1iTdD0C.jpg

Image with completely rounded corners (a circular image)

https://ik.imagekit.io/demo/tr:w-100,h-100,r-max/medium_cafe_B1iTdD0C.jpg

Size consideration when using radius transform

If radius transformation has to be used, try specifying a solid background colour for the image, especially for photographic images. Specifying a solid colour background means that the image can be delivered in JPEG format which is smaller than a PNG for photographic images.

https://ik.imagekit.io/demo/tr:w-100,h-100,r-max:bg-FFFFFF,f-jpg/medium_cafe_B1iTdD0C.jpg

Image with solid white background

 

You can refer to the detailed documentation here to get more options for background (bg), blur (bl) and radis (r).