Crop an image into a circle
Crop any photo into a circle or rounded square with a transparent PNG background, optional border and exact output size. Ideal for avatars.
- Runs in your browser
- Files are never uploaded
- Free, no account
How to crop a photo into a circle
- Drop a photo onto the box above — or several, if you are making avatars for a whole team.
- Choose the shape: a full circle, a rounded square (with an adjustable corner radius) or a plain square.
- Set the output size. The image is automatically scaled to cover the frame, so there are never empty edges.
- Drag the preview to reposition, or use the zoom and position sliders for precise, keyboard-friendly control.
- Optionally add a border ring and a solid background, then export as PNG for genuine transparency.
Why the output is a PNG
A circle inside a square file needs the corners to be nothing at all, not white. That requires an alpha channel, which PNG and WebP have and JPEG does not. Export a circular crop as JPEG and the corners become solid black — or whatever background you set. If a site insists on JPEG uploads, turn on the solid background and match it to the page colour behind the avatar.
WebP is worth considering when you control the site: it supports transparency and produces files roughly a quarter the size of the equivalent PNG.
Profile picture sizes across platforms
| Platform | Displayed at | Upload | Shape |
|---|---|---|---|
| Slack | up to 512 px | 512 × 512 | Rounded square |
| Discord | 128 px | 512 × 512 | Circle |
| 400 px | 400 × 400 or larger | Circle | |
| GitHub | 460 px | 500 × 500 | Rounded square |
| X (Twitter) | 400 px | 400 × 400 | Circle |
| 320 px | 320 × 320 or larger | Circle | |
| Zoom / Teams | 256 px | 512 × 512 | Circle |
| Gravatar | up to 2048 px | 512 × 512 | Square (cropped by site) |
A square 512 × 512 export covers essentially every case. Uploading something much larger just makes the platform downscale it for you, and uploading something smaller than the display size is the usual cause of a soft, blurry avatar.
Framing a headshot well
- Fill the frame. The head and shoulders should occupy most of the circle. A full-body shot cropped to 128 px is an unrecognisable smudge.
- Eyes on the upper third. Leave a little space above the head, not a lot — most people crop too loose.
- Beware the corners. A circular mask removes about 21% of a square image. Anything you care about needs to be inside the inscribed circle, not the corners.
- Check it small. Zoom your browser out until the preview is about 40 px across. If you cannot tell who it is, crop tighter.
- Contrast the background. Avatars are shown against both light and dark UI. A subject that blends into a mid-grey background disappears in one of them; a border ring solves it.
Rounded squares and the corner-radius number
The radius slider is a percentage of the output size, so it stays proportional at any export resolution. 50% produces a full circle. Around 22–25% matches the “squircle” look used by iOS and macOS app icons, and 8–12% gives the gentle rounding used by most web card components.
Batch avatars for a team
Add every headshot at once, dial in one set of settings using the first image, and the whole batch is rendered with the same shape, size, border and zoom. Each photo is scaled to cover its own frame, so mixed portrait and landscape sources all come out square. Download them together as a ZIP. If the source photos vary a lot in framing, it is worth pre-cropping the odd ones so the faces sit at a consistent scale.
Questions
Will the corners really be transparent?
Yes, with PNG or WebP output the area outside the circle has an alpha value of zero, so it disappears over any background. JPEG cannot store transparency — pick a solid background colour if you must export JPEG.
What size should a profile picture be?
512 × 512 is a safe universal choice. Slack and Discord display at 128, LinkedIn at 400, GitHub at 460 and most sites downscale from whatever you give them, so uploading a square 512 or 1024 covers every case without looking soft.
How do I choose which part of the photo is inside the circle?
The image is scaled to cover the frame, then you drag the preview to reposition it and use the zoom slider to pull in tighter. The horizontal and vertical sliders do the same job precisely, and with a keyboard.
Can I add a ring around the avatar?
Yes. Turn on the border and set its width as a percentage of the output size, so the ring stays proportional whether you export at 128 px or 1024 px.