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.
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.
Blur radius 2
Blur radius 30
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
Image With Red background
Image super-imposed on a solid background
3. Border radius
This transformation can be used to create rounded images like rounded profile pictures.
Image with slightly rounded corners
Image with completely rounded corners (a circular image)
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.
You can refer to the detailed documentation here to get more options for background (bg), blur (bl) and radis (r).