A circular crop keeps the pixels inside a circle and discards the rest. The four corners it discards have to become *something* — and getting that something right is the whole job.

Start Square

A circle inscribed in a rectangle is an ellipse. If your source is 1600 × 1200 and you crop a circle from it, either the result is squashed or the tool crops a 1200 × 1200 square first and you lose control over which part. Crop to a 1:1 square yourself first, positioning the subject where you want it, then apply the circle.

The Transparency Rule

The corners outside the circle must be transparent, which means:

  • PNG or WebP — both support alpha. Correct on every background.
  • JPG — no alpha, so the corners are filled with a solid color (usually white). It looks fine on a white page and shows four white wedges everywhere else.

If a "circle crop" tool hands you a JPG, it hasn't made a circle — it has drawn a white frame around one.

Place the Subject for the Mask, Not the Square

Most platforms that display circular avatars actually store your square image and mask it in the browser. That means:

  • Keep the important content inside the inscribed circle, whose diameter equals the square's width. Anything in the corners — ears, hair, a shoulder, part of a logo — will be clipped.
  • Leave a little breathing room: aim for the subject to occupy the middle ~80% of the square, so a slightly different mask on another platform doesn't clip it.

Because those platforms mask automatically, uploading a pre-cut circular PNG is usually a mistake: you get a circle inside a circle, with the transparent corners rendered as a visible box on some clients. Upload the square; let the platform round it.

When to Bake the Circle In

Do cut a real circular PNG when the image will sit somewhere you can't apply a mask: a slide deck, a PDF, an email signature, a printed document, or a website where you want the circular shape to be part of the asset itself.

On your own site, prefer CSS: border-radius: 50% on a square image gives you a perfect circle, keeps the source rectangular and reusable, and lets you serve a smaller JPG for photos.

Quick Checklist

  1. Crop to a square with the subject centred in the inner circle.
  2. Apply the circular mask.
  3. Export as PNG (or WebP) — never JPG.
  4. Preview on a dark background to confirm the corners are genuinely transparent.