How the circle is cut
The tool first takes the largest centred square from your picture: side = min(width, height), starting at (width - side) / 2 across and (height - side) / 2 down. It then clips the canvas to a circle using the canvas arc path and draws that square scaled to fit. Anything outside the circle stays transparent in a PNG or WebP, or white in a JPG. There is no drag-to-reposition; the middle of the photo always wins.
Worked example
Upload a 1920 by 1080 photo. The crop square is 1080 by 1080, starting at x = 420. The default output size is the smaller of 512 and the short side, so 512. The square is scaled by 512 / 1080, about 0.474, into a 512 px circle, giving a 512 by 512 file. A circle covers pi / 4 of its bounding square, so about 78.5 percent of the pixels carry the photo and the other 21.5 percent in the corners are transparent. Ask for a size above the short side, say 1500, and the image is enlarged and will look soft.
Border behaviour
The border width is measured inward from the edge. With size 512 and a 16 px border, the photo is drawn in a circle of radius 240 (a 480 px diameter) and a 16 px ring is stroked around it in the chosen colour, so the file stays 512 by 512 and the photo shrinks slightly. The slider allows up to a quarter of the size.
| Output format | Corners |
|---|---|
| PNG with "Transparent background" on | Transparent |
| PNG with it off | White |
| JPG | White, because JPG has no alpha channel (the checkbox is hidden) |
| WebP with "Transparent background" on | Transparent, and the file is usually much smaller than the PNG |
| WebP with it off | White |
Practical notes
- The download is named after your file, like
photo-circle-512.png. If the browser cannot encode WebP it saves a PNG and tells you. - Choose PNG or WebP whenever the avatar will sit over a coloured page. A white square corner around a circle looks like a mistake on dark themes.
- Many sites apply their own circular mask to uploads, so upload a plain square version for those and use this tool where you need the transparent circle itself.
- If the face is off-centre, trim first with Crop Image so the subject is in the middle.
- Photos with an EXIF rotation tag are used in the upright form current browsers show, so the crop matches what you see.
- For home-screen or store icons, the app icon generator offers a circle shape plus fixed sizes.