Circle cropping is the process of taking a rectangular image and turning it into a circular image by making every pixel outside a defined circle fully transparent. The result is a PNG file, not a JPG, because only PNG can store per-pixel transparency around the curve. The circle is typically defined as the largest centered square inscribed in the source rectangle, which keeps the subject symmetric and avoids any guesswork about where to "cut." For example, a 1200x800 landscape photo produces an 800x800 transparent PNG using the source region from x=200 to x=1000; the same rule applied to an 800x1200 portrait produces an 800x800 PNG using the centered vertical region from y=200 to y=1000. A square source image keeps its original dimensions. Because the shorter side of the source becomes both the width and the height of the output, a circle crop never silently resizes the image, it only masks it. That predictable, geometry-first behavior is exactly what the Circle Crop tool performs directly inside the browser tab without uploading anything.
What "Circle Crop" Actually Means
In everyday language, "circle crop" usually means "turn this rectangular photo into a round avatar." Behind the scenes, the operation is more specific: the tool does not bend or warp the image, and it does not try to find a face inside it. It simply chooses a geometric region, draws that region onto a transparent canvas, and clips the canvas to a circle. Anything inside the circle keeps the original pixels; anything outside becomes transparent. The user-visible result is a round image that drops cleanly onto any background, light, dark, or patterned, without a square border around it.
This matters because the term gets used loosely. Some apps use "circle crop" to mean a soft vignette, an elliptical crop, or a square crop with rounded corners. A true circle crop is the strict version: a perfect geometric circle, hard boundary, and transparent outside. When you understand that the operation is geometric rather than interpretive, the rest of the behavior, including dimensions, output format, and the no-resize guarantee, follows logically.
The Geometry Behind a Perfect Circle
To produce a perfect circle, the browser first chooses a square. A circle only fits cleanly inside a square of equal side length, so the tool takes the largest centered square that fits inside the source rectangle. The shorter side of the source becomes the side length of that square. For a landscape photo, the square sits in the middle of the frame; for a portrait, it spans the full width and centers vertically; for an already-square photo, nothing is trimmed at all.
That square is then drawn onto an output canvas of the same size, and a circular clip path is applied before the draw. In Canvas API terms, this is a two-step operation: a call to CanvasRenderingContext2D.clip constrains drawing to a circular region, and CanvasRenderingContext2D.drawImage paints the selected source rectangle into the matching destination rectangle. Pixels outside the circle never get drawn, so they stay transparent. The result is mathematically predictable: same center, same radius, same output dimensions every time, which is why golden tests for landscape, portrait, square, and odd-difference inputs all rely on one shared crop plan.
Why the Output Is Always a PNG
JPEG cannot store transparency. Every JPEG pixel is opaque RGB with no alpha channel, so a JPEG "circle crop" would have to either fill the corners with a single color (which looks wrong on any other background) or keep a square frame (which defeats the purpose). PNG, by contrast, stores a true alpha channel, so each pixel outside the circle can hold a 0 value and remain invisible over any backdrop. The trade-off is file size: PNG uses lossless compression, so a transparent circle PNG is often larger than the original JPEG even though it covers a smaller visible area. That is normal, not a bug, and it is exactly why every circle crop export uses image/png.
It is also worth knowing what the output does not preserve. PNG export from a rebuilt canvas keeps the pixels but discards EXIF metadata, camera orientation tags, embedded color profiles, animation frames, and any private text fields. The visible image is unchanged, but if you rely on metadata downstream, you will need to handle it separately.
How to Circle Crop an Image in Your Browser
- Open Circle Crop in your browser tab.
- Choose a JPG, PNG, or WebP file from your computer. The tool accepts compressed files up to 25 MiB (26,214,400 bytes) and, after decoding, images up to 40 megapixels with each side capped at 20,000 pixels.
- Confirm the displayed source dimensions so you know exactly which square the tool will use and what the resulting output size will be.
- Select Create circle crop. The tool takes the largest centered square at its original pixel size and clips it to a circle on a transparent canvas.
- Inspect the transparent PNG preview against both a light and a dark background to confirm no important detail touches the curve.
- Download the PNG. The downloaded file comes from the natural-size output canvas, not from the smaller on-page preview.
Output Dimensions and the No-Resize Rule
The single most important rule of a circle crop is that the output dimensions equal the shorter side of the source. The tool does not resample, does not upscale, and does not downscale. It only masks. The table below shows what to expect for the three source shapes the tool explicitly supports.
| Source shape | Source example | Output PNG size | Centered source region |
|---|---|---|---|
| Landscape | 1200 x 800 | 800 x 800 | x = 200 to 1000 |
| Portrait | 800 x 1200 | 800 x 800 | y = 200 to 1000 |
| Square | 1000 x 1000 | 1000 x 1000 | Full image |
You can verify the same rule on any image with simple arithmetic. For width W and height H, the side length of the centered square is min(W, H). The output canvas is that value by that value. The circle is centered at (min(W, H) / 2, min(W, H) / 2) and has radius min(W, H) / 2. That single formula is the entire math behind the operation, and the renderer applies it before any pixels are drawn.
When the Centered Square Is the Wrong Choice
Because the rule is automatic, there are inputs where a centered crop misses the subject. If a face sits close to the top edge of a tall portrait, the centered vertical region may crop the forehead. If a wide product shot has the item on the far left or right, a centered square will lop off half of it. There is no positioning control, no zoom slider, and no automatic subject detection. The tool deliberately stays simple so the output is easy to predict and verify.
The fix is to prepare the source first. Open the original in an Image Cropper if you need a custom rectangular region, in an Image Resizer if you need a specific pixel dimension, or in an Image Rotator if the source is sideways. Once the subject is centered and the unwanted edges are gone, run the circle crop and the centered-square rule will do what you want.
Also keep the original file. Browser antialiasing can leave a thin band of partially transparent pixels right at the curve, which looks soft at normal sizes but may show a faint halo against certain backgrounds. Inspecting the result against both light and dark surfaces before publishing takes only a few seconds and avoids a public fix-up later.
Related Tools for the Edges Around Circle Cropping
A circle crop is rarely the only edit you need. To put a circular avatar on a flat background color, an Add Background to PNG tool will replace the transparency with an exact solid color while keeping the original pixel dimensions intact. To soften the curve visually, an Add Shadow to Image tool can drop a controlled shadow around the circle for a floating effect. To shrink the file size without losing transparency, the Image Compressor can re-encode PNGs locally in your browser. For a softer non-circular alternative, an Round Image Corners tool gives a configurable corner radius rather than a perfect circle. Each of those steps lives in the same browser-only workflow, so the file never has to leave your machine between edits.