How to blur image?

Image API
1

I want to blur images before they load. How to do it with ImageKit?

2

There are two ways to do this

1. Using real-time URL transformations

The blur (bl) parameter helps you apply blurring to your images at scale using a simple URL based parameter.

For example, if my original image is

https://ik.imagekit.io/ikmedia/example_image.jpg

Then, to blur this image I have to add the bl transformation to the URL followed by number which defines the intensity of the blur

Lesser blur with a lower blur transformation value

https://ik.imagekit.io/ikmedia/example_image.jpg?tr=bl-10

Higher blur with higher blur transformation value

https://ik.imagekit.io/ikmedia/example_image.jpg?tr=bl-50

You can combine this blur transformation with other real-time transformation parameters to transform images as per your requirement. For ex, I can resize the same image to 200x200px create a lazy loading thumbnail for my website

https://ik.imagekit.io/ikmedia/example_image.jpg?tr=bl-20,w-200,h-200

2. Manual Blurring

If you want to blur images one by one, you can use the in-built image editor in ImageKit. Select the image you want to blur and open the image editor for it. Then head to the “Focus” section and select Gaussian blur (or a different kind of blur you desire)

You can then save this image back to the media library or download it for use on other platforms.