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!!!
