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

Blur radius 2,bl-2/medium_cafe_B1iTdD0C.jpg

Blur radius 30,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

Image With Red background


Original Image

Image super-imposed on a solid background,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,h-100,r-20/medium_cafe_B1iTdD0C.jpg

Image with completely rounded corners (a circular image),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.,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).