Circular images are the default for profile pictures across almost every platform, and they are increasingly common for team pages, testimonial cards and app avatars. Most of those platforms apply the circle themselves with CSS, but plenty of surfaces do not, and a file that arrives already circular looks correct everywhere.
The crop is a canvas clip performed on your own device. No upload happens at any point, which matters more than usual here because the input is very often a photograph of a person.
When you need a real circular file
If the destination applies its own circular mask, uploading a square photograph is usually better. You keep the corners in reserve, and if the platform changes its avatar shape later your image still fills the frame. Cropping to a circle first and then having a second circle applied on top produces a visibly smaller subject inside a ring of empty space.
Everywhere else, a real circular file is the only option that works. Slide decks, printed material, email signatures, PDF documents and desktop applications all place bitmaps as rectangles, so the circle has to be in the file.
- Export a circle for slide decks, documents and printed material.
- Export a circle for email signatures, where CSS masking is unreliable.
- Export a circle when a design tool places the image without its own mask.
- Upload a square instead when the platform crops avatars for you.
- Keep the original square file whichever route you take.
Why a circle crop png is the only sensible output
A circle inside a square leaves roughly 21 percent of the frame with nothing in it. Those pixels need an alpha value of zero, otherwise they become a colour, and the moment your circular avatar lands on a background that is not exactly that colour the square outline reappears.
PNG stores a full eight bit alpha channel, so the corners disappear completely and the rim of the circle is antialiased with partially transparent pixels. That soft rim is what stops a small avatar looking jagged. JPG cannot do either of those things, which is why this tool always exports PNG.
Framing the subject with zoom and offset
A circle is an unforgiving frame. It crops the corners of the composition hardest, so a portrait that looks balanced as a rectangle often ends up with the top of the head clipped and too much space under the chin. The zoom control scales the source image inside the circle, and the two offset controls slide it horizontally and vertically.
The usual approach is to zoom until the subject fills roughly 70 to 80 percent of the circle diameter, then move the frame so the eyes sit slightly above the centre line. Portraits framed that way read correctly at avatar sizes where facial detail is only a handful of pixels.
How this circle crop image tool works
A square canvas is created at your chosen output size, an arc path of exactly half that size in radius is added, and clip restricts all further drawing to the inside of that path. Your decoded image is then drawn through the clip at the scale and offset you set, so the pixels outside the circle are never written and keep the alpha of zero the canvas began with.
Because the clip is applied before the draw, there is no erase step and no halo of leftover background colour around the rim. The circle crop image tool then encodes the canvas directly to a PNG blob, which is handed to your browser as a download without ever touching a network.
Choosing a smaller output size than the source resamples the image down through the browser high quality scaler, which is normally what you want for an avatar. Choosing a size larger than the source will not add detail that was not there.
Picking an output size for a round profile picture
Most platforms display avatars somewhere between 32 and 200 pixels, but they store and re serve a larger master. Exporting at 512 pixels square is a good default: it survives a high density display at any of those sizes, and it is small enough that the file stays well under a megabyte.
Go to 1024 when the same image will also appear as a large header or on a printed page. Drop to 256 only when a strict upload limit forces it, since the difference is very visible on a retina screen once the platform scales your file up to fill its own frame.
| Output size | File size, typical | Best for |
|---|---|---|
| 128 px | Under 40 KB | Tiny inline avatars and comment threads |
| 256 px | 40 to 120 KB | Strict upload limits |
| 512 px | 120 to 400 KB | The safe default for profile pictures |
| 1024 px | 400 KB to 1.5 MB | Headers, print and large team pages |
How to crop image into a circle
- 1
Add your photo
Drop a PNG, JPG or WebP onto the drop area, or click it to browse. The photograph never leaves your device.
- 2
Choose an output size
512 pixels square is a good default for a profile picture. Go larger if the image will also be shown big.
- 3
Zoom and position the subject
Zoom until the subject fills about three quarters of the circle, then offset it so the eyes sit above centre.
- 4
Crop and download
Press crop, check the preview against the checkerboard, then download the transparent PNG.
Related tools worth bookmarking
Sources and further reading
- MDN: CanvasRenderingContext2D.arcThe arc call that builds the circular path this tool clips to before drawing your photograph.developer.mozilla.org
- W3C: Portable Network Graphics specificationThe PNG specification and its alpha channel, which is what makes the area outside the circle disappear.w3.org
- WHATWG: HTML canvas specificationDefines clipping regions, drawImage scaling and the antialiasing that keeps the circle rim smooth.html.spec.whatwg.org
Frequently asked questions
Common questions about the circle crop image tool.
Every image file is a rectangle of pixels, so a circular image is always stored in a square frame. The difference is that the corners of that frame have an alpha value of zero, so nothing is drawn there and any background shows through.
No, and that is deliberate. JPG has no alpha channel, so the corners would be filled with a solid colour and the square edge would reappear on any background of a different shade. PNG is the only correct output here.
Upload a square when the platform masks avatars itself, since it keeps more of the photograph in reserve. Export a circle when the file goes somewhere that places bitmaps without a mask, such as a slide deck or an email signature.
The circle is cut from the centre of the frame by default and the shorter side sets the diameter. Use the offset controls to move the visible area toward whichever part of a wide or tall photograph you actually want.
Only up to the resolution of your source. Scaling beyond the original pixel dimensions stretches existing detail rather than adding any, so the result looks softer than a native capture at that size would.