I want to blur images before they load. How to do it with ImageKit?
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.