Add blurred border background to image to modify aspect ratio

This article discusses how to convert images of 1:1 or 4:3 aspect ratio to 16:9 aspect ratio and vice versa by adding blurred background matching the colour theme of the image.

When a vertical list of images is to be displayed, images of different aspect ratio spoils the uniqueness of the page. For example, consider a youtube video listing. What if all the images are of different aspect ratio; 4:3, 1:1, 3:4 etc. The display will not look nice.

One approach to solving this problem is to add left-right / top-bottom borders to the image to match the required resolution, as shown below

Original image with 4:3 aspect ratio

Converted image with 16:9 aspect ration and matching borders

       

How to add these borders which match the colour scheme of the image? Here is a simple technique

• Stretch the image to 16x9 aspect ratio 
• new width = image height * (16/9)
• Apply blur/ gaussian blur  as needed
• Place the original image in the centre on top of the stretched image

Using image magick, these all can be done using a single command.

convert <image_name> \( -clone 0 -resize 345x194! -blur 0x20 \) \( -clone 0 \) -delete 0 -gravity center -composite <output_image_name>

I hope your app or web page will look neater now!!!