A profile photograph is one file rendered by several products that disagree about what shape a person is, and at sizes that differ by an order of magnitude.
Most people review it at exactly one of those and ship.
The targets, measured
LinkedIn feed. 48 pixels, circular. This is where most impressions happen and where the least information survives.
LinkedIn profile. Around 400, circular. The one everybody reviews at, and among the least-viewed.
Slack. Rounded square, not a circle. That difference is not cosmetic: a rounded square keeps corner content a circle discards.
Video call tiles. Circular, and scaled by participant count. The same file is 40 pixels in a twenty-person call and 200 in a one-to-one, and it must work at both.
GitHub. Rounded square, aggressively resized server side. Uploading a 4000px source achieves nothing.
Print. 15 to 25 millimetres, CMYK, often uncoated. Different physics entirely: contrast collapses and shadows fill.
What survives the shrink
At 48 pixels, three variables account for nearly all of it, and none is resolution.
Hair-to-background contrast, which is the most commonly wrong. Dark hair on a dark ground becomes a silhouette; the fix is contrast against that person's hair rather than a background you like.
Crop distance: anything below the collarbone is wasted.
Light direction: strong side light flatters large and turns half a face into a grey mass small.
The composition rule that satisfies all six
Compose for a circle inscribed in a square, then leave margin. Face occupying roughly the central 60%, nothing important within 15% of any edge.
.avatar-circle { border-radius: 50%; aspect-ratio: 1; object-fit: cover; object-position: 50% 35%; }
.avatar-rounded { border-radius: 12px; aspect-ratio: 1; object-fit: cover; object-position: 50% 35%; }
object-position: 50% 35% biases toward the upper third, where faces sit in a properly composed portrait. Centre-cropping is what removes foreheads.
Art direction, not just resolution
srcset gives you smaller files. It does not give you a different crop, and the small targets want one: a head-and-shoulders frame at 400px should become face-filling at 48.
<picture>
<source media="(max-width: 400px)" srcset="face-96.jpg">
<img src="portrait-400.jpg" width="400" height="400" alt="…">
</picture>
The reading, if you are choosing an image rather than rendering one
What the profile picture has to do and the LinkedIn conventions cover the destination. Styles by industry covers the part that changes by reader rather than by pixel.
And two on the wider case, where the requirement is a set rather than a single avatar: business photo generation and what a LinkedIn photo is doing generally.
The two-minute check
Render your own avatar at 48 and 96 pixels, in both a circle and a rounded square. If you cannot find your head's edge, that is the version most people see.
Top comments (0)