To crop an image into a circle, take the largest centered square of the source photo, clip that square to a circular path, and export the result as a PNG so the area outside the circle becomes transparent. The cleanest way to do this without installing software is to use Circle Crop, which reads a JPG, PNG, or WebP file directly in your browser, draws the centered square through a circular clip mask, and hands back a full-resolution PNG with transparent corners. The whole pipeline runs on your computer: the file is decoded through the browser's Canvas API, the circular mask is applied locally, and the encoder produces the PNG that downloads to your machine. Nothing is sent to a server, so the original photo and the resulting avatar never leave your device. Because every pixel outside the circle is given alpha transparency instead of a solid fill, the output sits cleanly on any background — white pages, dark themes, colored hero sections, and textured layouts all work without a square frame bleeding through. That single property is what makes a circle-cropped PNG useful for profile pictures, team directories, marketplace seller avatars, contact cards, and quick design mockups where a square thumbnail would look out of place.
How the Crop Geometry Works
Center cropping is a precise geometric operation, and knowing the exact output dimensions before you click can save you a round trip back to an image editor. Circle Crop does not resize or upscale; the output PNG's width and height both equal the shorter side of the original image. That means a square input stays the same size, a landscape image shrinks its width down to its height, and a portrait image shrinks its height down to its width. The source rectangle used inside the circle is always the largest centered square that fits in the original frame.
The table below shows the four common orientation cases. Source rectangle coordinates are zero-based and assume the original has not been rotated. The output column is exactly what the downloaded PNG will measure.
| Source dimensions | Centered source rectangle | Output PNG dimensions |
|---|---|---|
| 1200×800 (landscape) | x: 200 to 1000, y: 0 to 800 | 800×800 |
| 800×1200 (portrait) | x: 0 to 800, y: 200 to 1000 | 800×800 |
| 1500×1500 (square) | x: 0 to 1500, y: 0 to 1500 | 1500×1500 |
| 1920×1080 (wide landscape) | x: 420 to 1500, y: 0 to 1080 | 1080×1080 |
A quick verification: subtract the shorter side from the longer side, then divide the difference by two to get the offset on the longer axis. For 1200×800, the offset is (1200 − 800) ÷ 2 = 200 pixels on each side, leaving an 800-pixel-wide band in the middle. That is the source rectangle that ends up inside the circle. For 1920×1080, the offset is (1920 − 1080) ÷ 2 = 420 pixels on each side, leaving a 1080-pixel-wide centered square. The same rule applies vertically when the longer axis is height instead of width, which is why portrait sources crop down the same way.
Crop an Image Into a Circle in Three Steps
The workflow is deliberately focused: pick a file, click once, and download. There are no sliders, zoom controls, or reposition handles to wrestle with, which is what makes the result easy to verify before you publish.
- Choose a JPG, PNG, or WebP file up to 25 MiB. The browser validates the MIME type and the compressed file size before it tries to decode anything, and the displayed source dimensions confirm what the tool sees.
- Select Create circle crop. The renderer takes the largest centered square at its original pixel size, uses the Canvas API's clip primitive to constrain drawing to a circular path, and uses drawImage to place the centered source rectangle into the matching destination rectangle on a transparent canvas. There is no silent resize step.
- Inspect the transparent PNG preview, then download the result. The preview is constrained only for the page layout; the file you save is the natural-size output canvas at the dimensions described in the geometry table above.
Because the visible preview and the downloaded file share the same crop plan and renderer used by the isolated tests, what you see is what you save. The preview is the easiest place to confirm that important details do not touch the circular boundary before you publish the avatar.
What the Output Will and Won't Have
Because transparency is required outside the circle, every result is encoded as PNG. JPEG cannot represent alpha, so a JPEG export would either fill the corners with white or with black, which defeats the purpose of a circle crop. A side effect worth knowing: the downloaded PNG may be larger on disk than the original JPEG or WebP. That is normal. PNG uses lossless compression, so it cannot match JPEG's file-size advantage on photographic content, but it preserves the transparency that makes the circle crop useful.
The freshly encoded PNG also does not promise to preserve EXIF metadata, camera orientation tags, color profiles, animation frames, or embedded text fields from the source. If you need the original camera metadata for archival reasons, keep the source file alongside the cropped PNG rather than treating the output as a replacement. For most avatar and design use cases — where the cropped PNG is the final artifact — that trade-off is acceptable.
The circular boundary itself may contain partially transparent edge pixels from browser antialiasing. That is a feature, not a bug: those edge pixels produce a smoother visual edge at normal display sizes instead of a jagged stair-step outline against the page background.
Supported Inputs and Hard Limits
Circle Crop accepts three input formats by design: JPEG, PNG, and WebP. SVG and GIF are excluded because the tool targets ordinary static bitmaps and does not preserve vector behavior or animation frames. If your source is in a different format, convert it first — for example, with the Webp Converter or the JPG to PNG tool.
Three numeric limits apply before the image is decoded:
- Compressed file size: 25 MiB, which is exactly 26,214,400 bytes.
- Decoded pixel area: 40 megapixels total.
- Decoded pixel length on either side: 20,000 pixels.
The last two limits matter because the browser allocates canvas memory based on decoded dimensions, not compressed file size. A small JPEG that decodes to a 16,000-by-12,000 bitmap is well within the 40-megapixel cap, but a similarly sized JPEG that decodes to a 25,000-pixel-wide canvas will be rejected even though the file on disk is far below 25 MiB. Unsupported, empty, oversized, over-budget, unreadable, canvas, encoding, and download-URL failures are all reported explicitly, and any stale output is cleared. If a decoding or encoding error appears, re-export the source from a known-good editor and try again rather than retrying the same file.
Prepare the Source First If the Subject Isn't Centered
Center cropping only works when the subject is already near the middle of the frame. The tool has no positioning controls and no automatic subject detection, so if a face or product sits close to an edge, the circle will clip it. Two simple prep steps solve most cases:
- Reposition the subject in a full image editor first. Move the important content into the central square region before exporting, so the circle has room around it.
- Use Image Cropper to trim the source down so the subject already fills the shorter side. A 1200×800 photo of a person standing on the left third becomes a much better circle crop after a rectangular crop centers them.
It is also worth inspecting the transparent PNG against both light and dark backgrounds before you publish it. A dark hairline on a light page background, or a pale shirt collar on a dark theme, can reveal subtle antialiasing issues that a single-color preview hides. The same preview can also confirm that no important details — eyebrows, ear, hand, product label — touch the circular boundary where they could be clipped at small display sizes. Finally, keep the original file. Circle Crop does not modify your source, but the cropped PNG is a derived artifact, not a substitute for the original.
Other Browser Tools That Pair With Circle Crop
Circle Crop solves one specific problem, so a few adjacent tools cover the situations where it is not quite the right fit. All of them run locally the same way, so you can chain them in any order without uploading anything.
- When the subject needs a custom rectangular region before the circle mask, use Image Cropper. It lets you drag a crop box to an exact rectangle, which is useful when the centered square is too tight or too loose for the framing you want.
- When the source photo came out sideways and the orientation needs to be corrected before the circular crop, use Image Rotator first. Rotating after a circle crop is pointless because the circle would simply rotate with the canvas.
- When the final avatar needs a specific pixel dimension — say 256×256 for a directory thumbnail — chain Circle Crop with Image Resizer. Circle Crop delivers the natural-size square, and the resizer scales it to the exact pixel target without an extra upload step.
Used in that order, the three tools cover the typical avatar workflow: crop the framing, fix the orientation, crop into a circle, and finally resize to the exact pixel target — all without the source leaving your browser.