Crop Image to Circle

This tool cuts an image down to a circle — or a rounded square where you choose how round the corners are — and saves it as a PNG with everything outside the shape fully transparent. It is for a round profile picture, an avatar, a logo badge, a sticker, a presentation icon: anywhere you need the picture itself to be round rather than sitting inside a square with white in the corners. The image never leaves your browser.

The crop is a centre crop. The tool keeps the largest square that fits in your picture — the shorter of its width and height — taken from the middle, and cuts the strips off the two longer sides. An 800 × 600 landscape photo keeps a 600 × 600 square starting 100 px in from the left, so 100 px is cut from each side; a 600 × 800 portrait keeps a 600 × 600 square starting 100 px down, cutting 100 px from the top and bottom. It is not face detection and not a smart crop: the middle of the picture is the middle of the circle, whatever is there. If your subject is not centred, crop the picture first with the crop tool and then circle-crop it.

You choose the shape and, for a rounded square, how round the corners are on a 0–50% slider — 0% gives square corners and 50% gives a full circle, so the two shapes meet at the ends of the same slider. You can also pick the output size: by default the result is the same pixel size as the kept square (no resampling at all), or you can scale it down to 128, 256, 512 or 1024 px, or up — with a plain warning that enlarging adds pixels, not detail.

The outside of the circle is transparent, and only some formats can store transparency. PNG is the default and is lossless; WebP is offered for a smaller file and also keeps the transparent outside. JPEG has no alpha channel at all, so it cannot store a transparent outside — a "JPEG circle" would be a circle sitting on a solid rectangle. This tool refuses JPEG output rather than quietly filling the corners with white or black. If your source is a JPEG and you leave "Save as" on "Same as input", it is saved as PNG, because that is the only way to keep the transparent outside.

How it works: the browser decodes the image with its own codecs (phone photos are turned upright using their EXIF orientation, so the crop matches what you see), computes the centred square, draws exactly that region onto a square canvas through a clip path — an arc for a circle, a rounded rectangle for a rounded square — and encodes the result. Because the canvas starts transparent and only the clipped region is painted, the outside stays transparent. PNG output is lossless. WebP output is re-compressed at the quality you set. EXIF metadata such as camera model, date and GPS location is not copied into the output.

Limits: up to 50 images at once, 50 MB each, and an output up to 16,384 px per side and 100 megapixels. iPhones and iPads allow canvases of only about 16.7 megapixels, so a very large output may fail there with a message saying so. If you need a rectangular crop you can position by hand, use the crop image tool; to resize the whole picture, use the image resizer.

Your images stay on your device. They are read into the page's memory, cropped on a canvas and offered back as downloads; you can confirm in your browser's developer tools (Network tab) that no request carries your files.

1. The file's size is checked against the 50 MB limit, and its leading bytes confirm it really is PNG, JPG, WebP, GIF, BMP or AVIF, whatever its name says. 2. The browser decodes it with EXIF orientation applied, giving the upright width w and height h. 3. The kept region is the largest centred square: side s = min(w, h), at x = floor((w − s) ÷ 2) and y = floor((h − s) ÷ 2). The strips outside it — (w − s) horizontally and (h − s) vertically — are cut. An odd strip is rounded down on the right or bottom, so the square always stays inside the picture. 4. The output side is the chosen size, or s by default, and the scale is size ÷ s: 1 copies the pixels unchanged, below 1 shrinks, above 1 enlarges. 5. The corner radius is size ÷ 2 for a circle, or size × cornerPercent ÷ 100 for a rounded square, where cornerPercent is between 0 (square corners) and 50 (a circle). 6. On a square output canvas, a clip path is set — ctx.arc for a circle, a rounded rectangle for the rounded square — then the kept square is drawn from the source into the whole canvas and the canvas is encoded as PNG or WebP. Nothing is painted outside the clip, so those pixels stay transparent. The file is named after the original plus the shape: photo.jpg → photo-circle.png, logo.png → logo-rounded.png.