Complete Guide
Circular profile pictures dominate modern interfaces. WhatsApp, Slack, Twitter, LinkedIn, Discord, Instagram comments, Zoom, and dozens of apps display avatars as circles regardless of how you upload them. The problem: their auto-cropping algorithm uses the image center and often clips the top of your head, your shoulders, or background context that should be in frame.
Why crop to a circle yourself
Better composition control Auto-cropping centers on the image center pixel. Manual cropping lets you put the eye line in the upper third (the rule of thirds), follow the eyes' direction, and frame your face the way you want.
True transparent edges A square photo with a "circular" CSS mask still has square pixels underneath. A true circular PNG has transparent corners, which means it works correctly on any background — colored, patterned, gradient, or photographic.
Cross-platform consistency Different platforms crop slightly differently. A pre-cropped circular PNG looks identical everywhere.
Professional appearance A perfectly framed circular crop with clean edges signals attention to detail. It's a small thing buyers, recruiters, and clients notice subconsciously.
Where circular crops are essential - WhatsApp / Telegram / Signal: profile and group icons - Slack / Discord: workspace avatars and bot icons - Twitter / X: profile photo (auto-cropped to circle) - LinkedIn: profile photo, company logo - Instagram: profile, story circles - Zoom: webcam-off avatar - iOS / Android contacts: contact photos - Podcast and YouTube channel art: circular branding elements - Logos for circular badges, stickers, app icons
Composition tips for circular profile photos
For headshots - Eyes should sit in the upper third of the circle - Crown of head should have ~10% margin from circle edge - Chin should have ~5% margin from bottom of circle - Shoulders should be visible (don't crop too tight)
For logos - Important elements must be inside the inscribed square - Avoid placing critical detail near the circle edge (might be cut by frames or rings) - Test how the logo reads at small sizes (40–60px)
For animal/pet profiles - Center the eyes, not the nose - Keep ears within the circle if possible - Use a contrasting background for better visibility
For abstract/decorative avatars - Symmetrical designs work best in circles - Use bold, simple shapes that read at small sizes - High contrast between subject and background
Best resolution for circular crops
| Platform | Display size | Recommended source |
|---|
| WhatsApp | 192×192 | 500×500 |
| Slack | 192×192 | 500×500 |
| Twitter | 400×400 | 1000×1000 |
| LinkedIn | 400×400 | 1000×1000 |
| Instagram | 320×320 | 1000×1000 |
| Discord | 128×128 | 500×500 |
| Zoom | 200×200 | 500×500 |
Common mistakes - Cropping too tight: cuts off forehead or chin, makes the avatar feel cramped - Off-center subject: face placement looks accidental rather than intentional - Low-resolution source: produces a fuzzy avatar at retina display sizes - Saving as JPG: replaces transparent corners with white background - Using a busy background: distracts from the face/subject - Forgetting platform requirements: some platforms enforce 1:1 aspect ratio for avatars
The case for keeping original + circular versions Always keep the original square or rectangular photo in your archive. Different platforms may need different crops in the future, and source files give you maximum flexibility. The circular PNG is a derived asset — easy to regenerate as needed.
Related Tools
Image CropperCrop Image Online FreeBackground Remover In-Depth Guide, Best Practices & Expert FAQs
Reviewed by Abdulkeni Abdelwahid, Editor · Last updated July 20, 2026
A true circular crop needs an alpha channel — otherwise the four corners around your circle stay white and look like a bad Photoshop mistake wherever the destination background isn't also white. Our circle cropper draws a clipping path on an HTML5 canvas, then exports as PNG-24 with genuine transparency in the corners. The center of the crop is aligned to a smart-detected face when present, so team photos come out with the head correctly centered instead of the neck. This page explains the difference between visual circles (masked with CSS `border-radius`) and true circular images (needed for print, PDF, and any app that doesn't apply CSS), how to size the source correctly so the circle isn't pixelated, and how to add a stroke or drop shadow that renders on any background.
Who this tool is for
Profile photos for LinkedIn, Slack, and Zoom
Most apps display avatars as circles even if you upload a square. Pre-cropping avoids awkward auto-centering on your ear.
Team pages on company websites
Consistent circular headshots across a team page look far more polished than mixed square/circle.
Email signature avatars
Signatures live in Gmail/Outlook where CSS is limited — true circular PNGs display correctly in all clients.
Print materials and PDF certificates
Print software ignores CSS. Only true circular PNGs render as circles on business cards, brochures, and awards.
Podcast episode artwork
Spotify, Apple Podcasts, and Overcast all crop episode art in various ways. Providing a true circular version keeps the host photo centered.
Step-by-step workflow
- 1
Upload a square-ish source photo
Portrait framing works best; the closer to 1:1, the less you'll lose to the crop.
- 2
Center the face automatically or drag manually
Face detection places the crop center on the face. Adjust with the drag handle if you want it lower (shoulders visible) or higher (headshot).
- 3
Choose diameter
Common sizes: 400 px (Slack), 500 px (LinkedIn), 640 px (Discord), 1024 px (podcast art), 2048 px (print).
- 4
Add optional stroke or shadow
A 4 px white stroke helps the circle stand out on dark team-page backgrounds.
- 5
Export as PNG (not JPG)
PNG preserves transparency in the corners; JPG will fill them with white.
Real-world examples
Startup team page refresh
A 12-person team page is redesigned with circular avatars. Batch-cropping in one session produces 12 consistently framed PNGs at 500 px in under 5 minutes.
Author photo for a book
A publisher needs a 1200 px circular headshot for the back-cover flap. Cropping to true PNG lets the printer place it on any color background.
Podcast rebrand
A show swaps square host photos for circular ones matching new artwork. The circular PNGs work across Apple Podcasts, Spotify, and the show website.
Best practices from our editors
- Start with a source at least 2× the target diameter so downscaling is sharp.
- Center on the eyes — the classic portrait rule of thirds places eyes at the upper third of the crop.
- Use PNG for anywhere transparency matters; use JPG only if you're baking in a specific background color.
- Add a subtle 1–2 px stroke matching your brand color for team pages — helps consistency.
- Check the crop against both light and dark backgrounds before publishing.
- Keep the aspect ratio of the source close to 1:1 so you're not wasting a large portion of the photo.
At-a-glance comparison
| Approach | Works in print? | Works in email? | File extension |
|---|
| Yes | Yes | .png |
| No | Rarely | .jpg/.png + CSS |
| No | No | .png + SVG |
Common mistakes and how to fix them
✗ Exporting as JPG
✓ JPG fills the corners with white. Always export circular crops as PNG.
✗ Uploading a low-resolution source
✓ A 200 px source can't produce a sharp 500 px circle. Start with at least 2× the final diameter.
✗ Centering the crop on the head instead of the face
✓ Head-centering leaves the mouth low in the circle. Center on the eyes for a classic headshot look.
✗ Adding a colored background inside the circle
✓ Solid backgrounds inside the circle defeat the point — keep the subject and let the circle be transparent outside.
Troubleshooting
Symptom: Corners are white in Slack
Cause: You exported as JPG.
Fix: Re-export as PNG.
Symptom: Circle looks pixelated
Cause: Source resolution is smaller than target diameter.
Fix: Upload a larger source or reduce the target diameter.
Symptom: Face is off-center
Cause: Auto-detect failed on side profile or occluded face.
Fix: Drag the crop center manually to reposition.
Expert FAQs
Is the output really transparent? + Yes, the exported PNG has a proper alpha channel — the four corners are transparent.
What size should I pick for LinkedIn? + LinkedIn's max is 8 MB and it displays avatars at 400×400 px, but they accept up to 20000×20000. 800 px is a safe high-quality choice.
Can I add a stroke around the circle? + Yes, stroke width and color are configurable up to 8 px.
Will it work for print business cards? + Yes — export at 300 DPI (target diameter × 300 / 72) and hand the PNG to your printer.
Can I crop to an oval instead of a perfect circle? + This tool locks to a 1:1 circle. Use our Image Cropper for arbitrary aspect ratios.
Does it strip EXIF? + Yes, the canvas re-encode drops EXIF including GPS by default.
How large can the source be? + Up to 50 MP on desktop browsers. Larger files may fail on low-RAM devices.
Can I batch multiple photos? + Yes, batch mode crops up to 20 photos at once using the same center offset.
References & further reading
- MDN — CanvasRenderingContext2D.clip()
Continue with related tools
Image CropperBackground RemoverImage ResizerImage Converter