Crop an image to a circle

Why the download has to be a PNG

Image files are rectangles. There is no format that stores a circle; what “circular image” means in practice is a square file whose corners are nothing — fully transparent pixels that let whatever is behind them show through. Storing “nothing” requires an alpha channel, and of the common formats only PNG, WebP and GIF have one.

JPEG does not. Save a circular crop as a JPEG and the corners have to become some actual colour, almost always white or black, which is why so many “circle crop” results look fine on a white page and grow visible square shoulders the moment they land on anything else. That is the whole reason the export here is a PNG.

Where the transparency then gets ignored anyway

Worth knowing before you fuss over the edge. Word, PowerPoint, Keynote and Google Slides all honour PNG transparency properly. Most avatar uploaders — Slack, Discord, LinkedIn, GitHub — apply their own circular mask on top of whatever you give them, so a pre-cropped circle and a plain square end up looking identical there. Some older forum and CMS uploaders flatten transparency onto white without telling you.

If you already know the background the image will sit on, the corner-fill option is the better choice: set it to that exact colour and you get a smaller file with no risk of an unexpected dark halo where the anti-aliased edge meets a background it was not expecting.

Picking an export size

Profile pictures are displayed small — most avatar slots render somewhere between 40 and 200 px — but the sites store what you give them and scale down on demand, often at several sizes. Uploading something tiny locks you out of the larger renderings.

512 px covers essentially every profile-picture use on the web with room to spare. Go to 1024 px if the same image will also appear as a large header or in print, and 2048 px only if you know why. Larger is not sharper once the display size is fixed; it is just more bytes. The export is a true square, so a 512 px setting gives a 512×512 file containing a 512 px-diameter circle.

How the framing works

The image is first scaled so it covers the whole circle, which means there is never an empty wedge at the edge no matter what shape you started with. Zoom scales up from there; the two sliders move the picture behind the opening rather than moving the opening across the picture, which is the way every avatar cropper you have used behaves even if nobody says so.

A border is drawn inside the circle's edge, not outside it, so adding one never changes the exported dimensions — a 512 px export with a 16 px border is still exactly 512×512. One image at a time, because framing is a decision per picture and a batch version of this would just be a worse crop applied to everything.