Circle Image Cropper

Your company's About page wants circular headshots. The designer sent a spec that says, in the confident tone of someone who has never opened an image editor at 4:55 on a Friday, "just make them round, with transparent corners." You have twelve headshots, all straight off the camera at 800 pixels wide and 600 tall, and no desktop software on the machine you're using. What you have is a browser.

This is the exact job the Circle Image Cropper exists for. It takes any image, finds the largest circle that fits, masks everything outside that circle to transparency, and hands you back a PNG you can drop onto any background — white, dark, striped, it no longer matters. Twelve headshots become twelve pastes and twelve downloads, and the corners take care of themselves.

The tool is deliberately narrow. It does one geometric transformation with real care — centered placement, adjustable radius, a smooth antialiased edge, and honest PNG output — instead of doing forty things adequately. If you also need to land the result at a specific platform size, the Instagram Profile Picture Resizer finishes the job, and a general Image Cropper handles the rectangle work this tool refuses to do.

Below you'll find how to use it, the pixel mathematics that make a circle crop honest rather than approximated, worked examples with real dimensions, the ways circles go wrong, and a comparison with the CSS trick people suggest right before they learn why it doesn't apply. Everything from an 800×600 headshot to a wide banner gets covered, because those two cases fail in completely different ways.

The workflow is short because the operation is short. A first run takes under a minute, including the time you spend choosing which of your three favorite photos to sacrifice to the round cause.

1. 1

   Open or drop your image

   Drag a file onto the tool, or click to browse. JPEG, PNG, WebP, GIF, BMP, and AVIF all load — the browser decodes them into raw pixels before anything happens.

2. 2

   Check the preview circle

   The tool immediately shows a circle inscribed in your image, centered, with a diameter equal to your image's shorter side. On an 800×600 photo that's a 600-pixel circle centered at (400, 300).

3. 3

   Adjust if you want

   Off-center faces and oddly composed shots benefit from nudging the circle toward the subject, or shrinking the radius to tighten on a face. The overlay shows exactly what survives.

4. 4

   Export as PNG

   One click encodes the masked result as a PNG with alpha. The corners come out transparent, not white, not checkerboard-that-is-actually-gray — genuinely invisible.

5. 5

   Resize for your destination

   If the target platform wants 400×400 or 320×320, resize the exported PNG. Shrinking after the mask keeps the geometry perfect; enlarging reveals the limits of your source resolution.

That's the entire ceremony. The next headshot takes fifteen seconds, because muscle memory is the real user interface.

A circle crop looks elementary — and it is, in the way a well-made joint in woodworking is elementary: three decisions done exactly right. The tool computes a center, a radius, and then sets an alpha value for every pixel based on its distance from that center.

The center defaults to the geometric middle of the image: half the width, half the height. The radius defaults to half the shorter side, which is the largest circle the image can contain without the mask reaching outside the frame. For that 800×600 headshot, the center lands at (400, 300) and the radius at 300 pixels, giving a 600-pixel circle that grazes the top and bottom edges. Square sources are the circle cropper's favorite food for exactly this reason: a 1000×1000 image yields a 1000-pixel circle using every pixel available.

Then comes the alpha mask, the part that separates a real circle crop from a fake one. For each pixel, the tool measures the distance from the pixel's center to the circle's center — pixel centers sit at half-pixel offsets, a detail that prevents the classic off-by-one where a circle lands visibly lopsided on even-sized images. If the distance is less than the radius, the pixel keeps its color and full opacity. If it's greater, the pixel's alpha drops to zero and it vanishes. At the boundary, the tool blends across roughly one pixel of width so the rim of your circle reads as a curve rather than a staircase.

• Center: defaults to (width ÷ 2, height ÷ 2), adjustable when your subject isn't centered.
• Radius: defaults to min(width, height) ÷ 2, shrinkable to tighten on a subject, never expandable past the frame.
• Alpha: fully opaque inside, zero outside, a short gradient at the rim for an antialiased edge.
• Output: PNG, because it is the only mainstream format that stores per-pixel transparency.

None of this involves destructive editing. Your original file stays untouched on disk; the cropped circle exists only in memory until you export it. Botch the center placement? Adjust and export again — the tool can't run out of undos because there's nothing to undo.

Numbers make this concrete. Here are three representative jobs — a headshot, a logo, and the wide-banner problem child — with the exact geometry each one produces.

The banner case deserves a second look, because it's the most common way people get mad at circle croppers. The tool isn't being stingy; geometry is. A circle wider than the image's short side would extend beyond the frame, and a mask has no opinion about what fills the area outside your pixels — there is nothing there to keep. The fix is order of operations: pre-crop the banner to a square around the part that matters, then circle that. A quick pass with the Image Cropper first turns a 25-percent disaster into a clean result.

Every geometric tool has failure modes that live just outside the happy path. These are the ones that generate support email, with fixes attached.

• Blurry results come from small sources asked to fill big slots. A 200-pixel circle displayed at 400 pixels looks soft because it is soft — the detail never existed. Always crop from the largest original available, then scale down.
• A lopsided rim is the off-by-one artifact, and it's why the tool measures from pixel centers rather than pixel corners. On a 301×301 image, the true center sits at 150, and radius 150.5 covers both edges symmetrically. If a circle ever looks one pixel heavier on one side, the culprit is a tool that forgot the half-pixel — this one doesn't.
• White corners instead of transparent mean the file was re-encoded to JPEG somewhere downstream. JPEG has no alpha channel, so whatever converts the PNG flattens transparency against a solid background. Keep the chain PNG until the final destination genuinely can't accept it.
• Huge file sizes surprise people who crop a 12-megapixel photo and get a PNG several times larger than the original JPEG. That's lossless encoding plus an alpha channel doing exactly what they promise. Resize the export to the size you actually display, and the file shrinks to something polite.
• A sideways subject usually traces to EXIF rotation metadata that some software honors and some ignores. If your portrait loads rotated in the tool, open the original in any viewer that respects orientation, re-save it, and the crop will land correctly.
• Odd dimensions like 801×801 produce a radius of 400.5 and a center at 400.5 — half-pixel values the tool handles natively, with no visible asymmetry and no manual compensation needed.

A cropped circle at full source resolution is usually overkill, and occasionally undersized. Platforms display avatars at fixed sizes regardless of what you upload, so the working method is to know the display size, double it for retina screens, and export accordingly.

Two of those rows deserve comment. Email signatures punish large images: a 900-pixel photo in a signature makes every message you send heavier, and some clients simply refuse to render it. Print is the opposite — it rewards excess resolution, because a 300 DPI target at one physical inch demands a 900-pixel circle, and anything smaller softens at the edge exactly where a circle's quality is most visible.

The traffic to this tool arrives in waves, and the waves have shapes.

Office managers and HR teams bulk-process team pages — the twelve-headshots scenario from the top of this article is the single most common session pattern. Web designers produce round avatars for comment threads, testimonial rows, and author bios without wanting to boot a full editor for a two-minute task. Small-business owners round their logos for favicons, watermarks, and marketplace profiles. Video editors cut circular overlays — the talking-head bubble in a corner — and need transparency so the footage shows through the corners.

Then there's the long tail: teachers building round student photos for classroom displays, family historians making circular prints for craft projects, podcasters preparing guest headshots for episode artwork, and people assembling wedding programs who discovered at an ungodly hour that the venue's template wants every photo shaped like a coin. The tool doesn't care which. Pixels are pixels, and the circle is patient.

A pattern worth noticing: almost nobody needs a circle crop once. They need it eleven times, or sixty times, or every time a new colleague starts. That volume reality shaped the tool's design — no account, no project files, no library to curate. Paste, crop, download, repeat. The twentieth headshot of the afternoon deserves the same friction as the first, which is to say almost none.

Every time circular avatars come up, someone suggests border-radius: 50% in CSS and calls the problem solved. On your own website, they're mostly right — the browser masks the square image into a circle at render time, no image editing required. The MDN border-radius documentation covers exactly this technique, and it's the right tool when you control the page.

The honest framing is that they solve different problems. CSS changes how a browser renders a rectangle; a circular PNG changes the image itself, so it stays round in contexts that never read a line of your stylesheet. When a file needs to travel — and profile pictures, signature images, and logos are all travelers — the mask has to live inside the file. For the display-only case on rectangles you control, a Rounded Corners Image Tool offers a gentler middle path: soft corners without full roundness.

Headshots are personal. Team photos are personal times twelve. Logos are trade assets. The Circle Image Cropper treats all of them with the same policy: the image is decoded, measured, masked, and re-encoded by your own browser, in the tab, using the same canvas operations that power client-side graphics everywhere.

There is no upload step because there is no server on the receiving end. You can watch the network panel while you work and see nothing leave — or, more convincing still, load the page, go offline, and finish your crop with the Wi-Fi off. The tool keeps functioning because every byte it needs is already on your machine. The PNG specification's alpha channel, the pixel math, the encoder: all of it runs locally, and the only artifact is the file you chose to download.

The same policy covers the preview and the export equally. Some editors process the preview locally but quietly hand the full-resolution file to a rendering server for the final pass — a distinction that only surfaces in a privacy policy read carefully at midnight. Here the pipeline has one stage and one location: your browser. Corporate headshot policies, client photography contracts, and plain common sense all get the same answer when they ask where the images went: nowhere.

A circle crop rarely travels alone in a workflow. The neighbors above cover the rest of the route: the Image Cropper squares up awkward sources before they meet the circle, the Instagram Profile Picture Resizer lands the exported PNG at the exact pixel count each platform prefers, and the Rounded Corners Image Tool handles the softer geometry when full roundness is too much. Run files through those three and most avatar pipelines resolve without a heavyweight editor ever being opened.