What is the minimum size for a profile picture when used somewhere other than the profile page?

Question

I am creating an app and want to know the recommended minimum size for profile pictures when their picture is used to show that they are assigned to something. I wanted to do something similar to facebook messenger, where there is a minimized profile picture that shows who you are talking to:

What is the recommended minimum picture size for this scenario? I only have found examples of standard profile picture sizes, not the minimized version. In my scenario, the profile pictures will be used inside a card like this:

Answer 1

From my experience, it really depends on this context questions:

• does it need to be interactive (touchable, clickable)?
• does the visibility of the face photo is important in that context?
• do you have an existing framework (dev or design)?

Depending on that, you would probably have different sizing needs.

For interactive avatar

The kind of avatar I can click/touch to do something on the interface (see profile, edit my avatar, etc.) you'll need to comply with the minimum size for a touchable interface component: Apple and Google don't agree here, but around 48px wide is enough.

Your context

If you don't need this to be touchable, do you have a context where the face of the people, or their avatar, matters? If yes, you would rather take a higher sizing. If not, a small one can be enough.

The framework

As @AndriiD said in their answer, most Designers use a 4/8px grid, so using a size among 24px (min IMO), 32, 40, 48, etc. is a safe solution. But, regarding my last point, if your team is using another framework, it could be a 5px grid for instance. If I remember well, Boostrap is using a 5px grid.

In your case

I would go for a sizing that is close to the chips used in Material UI. They are purely indicative avatar to give you more metadata on a card or on another component. The chips uses an image size if 24px.

• Documentation: https://m2.material.io/components/chips#input-chips
• Component examples: https://mui.com/material-ui/react-chip/

Hope this helps 😊

Answer 2

Typically, the profile image dimensions are made according to the selected mesh model. Often designers use an 8-dot grid, so the sizes will be 8, 16, 24, 32, 40,... My advice is to use a minimum size of 16 if you want the user to be able to see the profile picture.

Also, I would recommend adding a username tooltip that will appear when you hover over your profile picture.