A Simple Solution to Adjust the Profile Photo

Recently, one of our client came to us with a problem. Their problem was not uncommon, in fact, many major online apps like Facebook too has this issue — “how to adjust the profile photo to avoid the virtual beheading”.

Suppose you have a mobile app or a website, where the user can upload their profile pic. Here, you can control the size of the photo which is to be uploaded but nobody can control how the photo will be. It can be vertical, it can be horizontal and so on…

So adjusting the uploaded photo as a perfect avatar image is a challenge. Take a look at this example –

Here, on the left size is the photo which user is uploading and on the right size is the circular shaped subject in which that image will be placed by software and shall act as an avatar image.

So if the algorithm of the app keeps the actual photo size; or even adjusts the width as per the subject’s width the end result looks out of shape. Nobody would like an avatar profile with cropped face.

And since you can’t control the type of photo a user would upload, there cannot be a foolproof solution to this issue, but with a simple adjustment, it can be handled to some extent.

Here is how —

When a user uploads a photo as a profile image, do this —

reduce or increase the width of the photo to match the width of the crop area (space where the profileimage would fit). This space can be rectangle, square or circle.
Adjust the height of the photo in proportion to the width.
Now align the profile pic “Vertical / Top” to the crop area.
Put the profile photo inside the crop area.
Here you go!

A friend asked me, what if the user is on her hands with legs up? or what if he is lying on a sofa?

Well, in this case, the coders would have to develop an AI to detect the face and adjust the photo accordingly. 🙂
But in most cases, people generally upload selfies and photos with a straight face, so this simple hack would solve the puzzle in 90% cases.