When UI designers specify a "large avatar," the rendered pixel dimensions vary significantly across frameworks. Material UI defines large at 56×56 dp, Ant Design sets 40×40 for default and 64×64 for large, Chakra UI offers 2xl at 48×48, and Bootstrap's default avatar is 40×40 with utility classes scaling upward. None of these match 360×360 directly — and that is exactly the point. A 360×360 source image is a retina-safe master from which every one of these display sizes can be served with integer downscaling ratios.
Integer Scaling to Retina Display Sizes
The key advantage of a 360×360 source is that it divides cleanly by 2, 3, and 4. On a 2× retina display rendering a 180×180 logical-pixel avatar, the source maps exactly — 360 / 2 = 180. At 3× retina (120 logical pixels), it is 360 / 3 = 120. For a 1× 90×90 logical avatar, 360 / 4 = 90. This integer scaling avoids sub-pixel interpolation artifacts that degrade perceived sharpness when a source must be downscaled by a non-integer factor. The browser's bilinear or bicubic sampler renders crisp edges because each destination pixel maps to an integer-aligned group of source pixels rather than a fractional region that requires weighted averaging.
Consider a 100×100 source scaled to 56×56 for a Material-UI large avatar — the ratio is 1.785, a non-integer. The browser must blend across fractional pixel boundaries, softening fine details like lip contours and eyelash definition. A 360×360 source scaled to 180×180 (2×) or 120×120 (3×) avoids this entirely.
Circular Masking and the Visible Area Budget
Avatar UI components apply a border-radius: 50% or clip-path: circle(50%) mask that discards roughly 22% of the square's pixel area (the four corners). For a 360×360 source, the visible circular area contains approximately 101,788 pixels. At 180×180 display size, the visible circle is about 25,447 pixels — enough to render recognizable facial features at typical viewing distances on mobile and desktop. Drop to a 100×100 source at 56×56 display, and the visible circle drops to roughly 2,463 pixels, at which point fine texture (skin pores, hair strands, text on badges) begins to alias or disappear entirely.
At 360×360, the central subject typically occupies 60–70% of the frame for a well-composed headshot. After circular masking, the subject's face still occupies 45–55% of the visible area — sufficient for recognition even in crowded UI layouts like team directory grids or comment threads where avatars appear at 40–56px.
object-fit: cover and background-size: cover at 360×360
When you set CSS to object-fit: cover or background-size: cover, the browser fits the source into the container's aspect ratio. For a 360×360 source rendered in a 40×40 container, the browser computes: 360 / 40 = 9 and 360 / 40 = 9. Since the aspect ratio is already identical (1:1), no cropping occurs beyond the container boundaries. The source fills exactly 40×40 logical pixels, and on a 2× display the GPU reads an 80×80 region of the source — well within the 360×360 area, so image decode is efficient and no upsampling is required.
/* Example: Large avatar in a comment thread */
.avatar-large {
width: 56px;
height: 56px;
object-fit: cover;
border-radius: 50%;
}
/* With a 360×360 source, the GPU samples a 112×112 pixel region
on a 2× display — 360 / 112 = 3.21× oversampling, safe. */
For Ant Design's Avatar size="large" (64×64), a 360×360 source provides 5.6× oversampling at 1× resolution. This oversampling acts as a built-in anti-aliasing buffer: the browser's downscaling filter has more source pixels to average per destination pixel, producing smoother tonal gradients and fewer jaggies on curved mask boundaries.
