Instead of abstract specs, here are playbooks for common products—what to prepare, how to crop, and what to export so avatars look great everywhere.
Playbook A — Team directory / About page
What users see: A grid/list of people at medium sizes (48–128 px).
Prepare: One sharp photo per person; prefer soft, uncluttered backgrounds.
Crop recipe in the tool:
- Center the face; set eye line slightly above center.
- Zoom until the forehead-to-chin fits with ~8% padding.
- Keep the same visual scale across the whole set by eyeballing against a reference.
Export: Transparent PNG at a consistent size (e.g., 512 px).
QA checklist: Scroll the finished page—do heads jump in size? Re-crop outliers to match.
Playbook B — Chat and messaging UI
What users see: Tiny circles (24–40 px) next to messages.
Prepare: Photos with strong contrast; avoid wide shots.
Crop recipe:
- Add a touch more space than you think—tight crops die at 24 px.
- Keep hair/ears inside the frame; watch for clipping at the top.
- If your UI shows presence rings, leave 2–4 px margin around the circle.
Export: Transparent PNG. Provide @2x assets (e.g., 48 px slot → 96 px file).
QA: On a low-end monitor, can you identify people instantly? If not, re-crop simpler and closer.
Playbook C — Product reviews / testimonials
What users see: Small to medium circles next to quotes.
Prepare: Ask for neutral, high-key photos; avoid heavy filters.
Crop recipe: Center the face; keep 10% padding for a relaxed feel.
Export: Transparent PNG; match the rest of your site’s corner radii and shadows (UI layer, not baked into the image).
QA: Do avatars align vertically with text baselines? If not, adjust CSS line-height—not the crop.
Playbook D — Marketplaces (sellers/creators)
What users see: Profile avatars overlaid on busy cards with price/tags.
Prepare: Choose images with a clear silhouette and simple colors.
Crop recipe: Leave extra outer space so badges/verification ticks don’t cover faces.
Export: Transparent PNG; keep background simple to avoid card clutter.
QA: Place a status ring/badge in the UI—does it overlap important features? Re-crop with more margin if needed.
Playbook E — Logos & app icons in navigation
What users see: Circles on headers/sidebars of varying colors.
Prepare: A simplified mark (monogram/bug) if your logo is very wide.
Crop recipe: Keep 8–12% padding from the rim; ensure strokes don’t kiss the edge.
Export: Transparent PNG. Test on light and dark themes.
QA: At 24–32 px, are strokes still crisp? If not, use a simplified mark.
Delivery & maintenance (what helps long-term)
- Export a single large master (e.g., 1024 px) and generate smaller sizes in your build/UI.
- Use predictable filenames (e.g.,
[email protected]) to help caching/CDN. - Provide a fallback silhouette for missing avatars.
- Keep originals—re-crop later if your design changes.
Accessibility that actually helps users
- For people, use alt text = person’s name (e.g., “Jamal Rivera”).
- For decorative avatars (purely visual), set
alt=""so screen readers skip them. - Avoid baking text into the image; provide labels in real text next to the avatar.
Privacy: All cropping runs locally in your browser; nothing is uploaded.