DEV Community

Miriam Alonso
Miriam Alonso

Posted on

Zoom, Teams, Meet and Slack all crop your avatar differently. Here are the numbers.

Your profile picture is one file being rendered by 6 products that disagree about what shape a person is.

I measured what each one does, because I got tired of a photo that looked right in one place and decapitated in another.

What each platform does to it

Zoom. Circular crop from a square source. In gallery view the tile is 16:9 and the avatar sits centred in it, so the effective visible area is a circle inscribed in the shorter dimension. Anything in the corners of your square is gone in every view.

Teams. Circular, smaller than you expect in the roster list, and it renders your initials instead if the image fails to load, which happens more than it should on constrained connections.

Meet. Circular, and in the tiled layout it scales with tile size, so the same avatar is 40px in a 20-person call and 200px in a 1:1. It has to survive both.

Slack. Rounded square, not a circle. That sounds like a small difference and it changes which parts of your image survive: a rounded square keeps more of the corners than a circle does.

LinkedIn. Circular, and the size that matters is 48px in the feed, not the 400px on your profile.

GitHub. Rounded square, and the file gets aggressively resized server-side. Uploading a 4000px source achieves nothing; it comes back to you as a few kilobytes.

The one rule that satisfies all of them

Compose for a circle inscribed in a square, then leave margin.

Concretely: square source, face occupying roughly the central 60% of the frame, nothing important within 15% of any edge. That survives circular crops, rounded squares and hard square crops simultaneously.

The failure mode is a photo cropped tight to look good on a profile page, which then loses the top of the head in every circular context. Tight looks confident at 400px and decapitated at 48.

/* worth testing your own avatar against, both shapes */
.avatar-circle { border-radius: 50%; aspect-ratio: 1; object-fit: cover; }
.avatar-rounded { border-radius: 12px; aspect-ratio: 1; object-fit: cover; }
Enter fullscreen mode Exit fullscreen mode

Render your own photo in both at 48px and 96px. It takes 2 minutes and usually finds something.

The other half: what is behind you

Since remote work, the video call is where most people see most faces, which makes the conventions for video call photos worth more attention than they get. Background contrast matters more than resolution at these sizes, because at 48px separation is all you have.

Where the standard advice does not apply

The framing rules above assume a desk job. Several categories break them on purpose.

Anyone whose product is physical capability needs a wider crop and a real environment: fitness photos and personal trainer photos throw away the evidence if you crop to head and shoulders, and hard light is arguably correct there because it shows musculature that soft light is designed to hide.

Outdoor work has a scheduling problem rather than a framing one, since sun is a light you book rather than control, and overcast is genuinely good rather than a consolation.

Political photos have conventions that are close to regulated in some jurisdictions and vary by office.

And if what you actually need is a set rather than one frame, that is a business shoot, a different commission from a headshot, and booking the wrong one is a common and expensive mistake.

Test it properly

Put your avatar in a 6-person call and screenshot it. That is the size and shape most people will ever see you at, and it is not the one you have been reviewing.


More from this series

On BetterPic

Top comments (0)