Circle crop

A circular crop is a square image plus an alpha channel. The square is drawn first, then the circle is composited over it in destination-in mode, which keeps the existing pixels only where the new shape is opaque and sets everything else to an alpha of zero.

Because it is a composite rather than a hard clip, the pixels sitting on the boundary get a partial alpha instead of being fully in or fully out, which is what makes the edge read as a smooth curve at 128 pixels as well as at 1024. Save it as PNG or WebP and that alpha channel survives into the file. Save it as JPEG and it cannot, which is why JPEG only appears once you have chosen a colour for the corners.

Most sites show an avatar at somewhere between 40 and 200 pixels but store a larger copy for high resolution screens, so 400 or 512 pixels is a sensible default. It stays sharp when a page draws it at twice its CSS size, and it is still a small file.

Match the crop keeps whatever resolution your frame actually covers. Take a circle out of a 12 megapixel photo without zooming in and that is around 3000 pixels across, which is more than an avatar needs but right if the cut out is going into print or into a poster.

The circle always fills the square, so the size you pick is both the width of the file and the diameter of the circle. There is no padding to account for.

Slides and documents are the usual reason. A white cornered circle looks fine on a white slide and looks like a mistake on any other colour. With real transparency the same file works on every background, so you do not need one copy per deck.

Team pages and CVs are the other one. A row of head shots cut to the same circle at the same size reads as one set, which is much harder to get by cropping each photo to a square and hoping the layout rounds them off.

If you need a square or a fixed ratio rather than a circle, the image cropper does that, and the image watermarker puts your name or logo over a picture before you share it. For documents there is watermark PDF and add page numbers to PDF.

How do I crop a picture into a circle with a transparent background?

Load the picture, drag the square frame over the part you want, and pick PNG with transparent corners. The tool masks everything outside the circle to an alpha of zero, so the four corners of the saved file are genuinely empty rather than white. Drop it into a slide, a document or a profile field and the background behind it shows through.

Which file format keeps the transparency?

PNG and WebP both store an alpha channel, so both keep the corners empty. JPEG has no alpha channel at all, which is why it is only offered once you choose a solid colour for the corners. If a site rejects your PNG, pick the solid colour option and match it to the background of the page it will sit on.

What size should a profile picture be?

Most platforms display an avatar somewhere between 40 and 200 pixels across but store something larger, so 400 or 512 pixels is a safe choice that stays sharp on a high resolution screen without being a heavy file. Going far above 1000 pixels for an avatar mostly adds bytes. The size list here covers the common ones, and you can type your own.

Why is my circle cut off at the edges?

It is not. The frame is locked to a square that cannot leave the picture, so the circle drawn inside it is always complete. If part of your face is missing, the frame is sitting somewhere else on the picture. Drag it, or use the zoom and position sliders underneath, and the preview updates as you go.

Does the circle edge look jagged when I zoom in?

No. The mask is composited rather than clipped, which means the browser antialiases the boundary and the pixels right on the edge get a partial alpha. The result is a smooth curve at any output size instead of a staircase.

Is my picture uploaded anywhere?

No. The file is decoded, cropped, masked and encoded entirely inside your browser with the Canvas API. Nothing is sent to FORKSAI or to any third party, nothing is stored, and there is no account. Turn your connection off once the page has loaded and the tool still works.

Can I add a ring around the circle?

Yes. Turn on the ring, set its thickness in pixels and pick a colour. It is drawn just inside the edge of the circle, so it never gets clipped, and the corners stay transparent around it. A thin ring in the colour of your slide deck is a quick way to make a cut out photo look deliberate.