Skip to main content
ToolsHub

Circle Crop Image

Upload an image, position the circular crop, and download a round PNG with transparency — processed on a canvas in your browser.

Files never leave your browser
Files never leave your browser

Drop an image here, or click to browse

JPG, PNG, WebP · up to 50 MB

How to use Circle Crop Image

Crop any image into a perfect circle with a transparent PNG background — ideal for round profile pictures, avatars, and circular thumbnails for social media and apps. The crop is centred on the image, using the shorter dimension as the diameter. All processing happens on a canvas in your browser; your image never leaves your device.

  1. Upload your image using the file picker or drag-and-drop.
  2. The tool automatically crops to a centred square using the shorter dimension.
  3. A circular clip mask is applied, making everything outside the circle transparent.
  4. Preview the round result against the chequered transparency background.
  5. Click "Download Circular PNG" to save the transparent-background PNG.

Your data never leaves your device — 100% private processing.

Profile picture sizing: platform requirements

Most social platforms display profile pictures as circles regardless of your uploaded image shape, but uploading a pre-cropped circular PNG ensures precise control and eliminates unexpected cropping at the platform level. Optimal upload sizes vary by platform. Twitter/X and LinkedIn both display at 400×400 px and recommend square uploads. Facebook uses 170×170 px on desktop. GitHub profile pictures display at 230×230 px. Discord uses 128×128 px. For the sharpest result at any size, upload the largest available image — the canvas maintains the original pixel dimensions and the platform scales down.

PlatformDisplay sizeRecommended upload
Twitter/X48px (feed) / 200px (profile)400×400 px
Facebook170×170 px180×180 px minimum
LinkedIn400×400 px400×400 px or larger
GitHub230×230 px500×500 px or larger
Discord128×128 px256×256 px or larger

Canvas clipping path for circular crop

The circular crop uses the Canvas 2D API's clipping path feature. A circular path is created with ctx.arc(centerX, centerY, radius, 0, 2π), then ctx.clip() is called to restrict all subsequent drawing to the interior of that circle. The source image is then drawn offset so its centre aligns with the circle's centre. Pixels outside the circle are never drawn, leaving them as transparent (alpha = 0) in the canvas. When exported as a PNG, the transparent region is preserved. JPEG export would fill transparent areas with black, which is why PNG is the only appropriate format for circle-cropped images.

Glossary

Clipping path
A shape defined in the Canvas 2D context that restricts where drawing operations are visible — pixels outside the path are not rendered.
Alpha channel
The transparency component of each pixel, where 0 is fully transparent and 255 is fully opaque.
Transparent PNG
A PNG file containing pixels with partial or full transparency, allowing the background of the containing page to show through.
Avatar
A small, typically circular image used to represent a user on digital platforms.

Related reading

Frequently Asked Questions

Free · No spam

Get weekly tool tips & updates

New tools, power-user tips, and productivity hacks — delivered free every Friday.

No spam, ever. Unsubscribe with one click.

Why use Circle Crop Image?

  • Lossless and lossy compression options to balance quality vs file size
  • Supports all major formats: JPEG, PNG, WebP, AVIF, GIF
  • Batch operations keep filenames and folder structure intact
  • Runs client-side — no image data ever leaves your device

Common use cases

  • Resize product photos before uploading to an online store
  • Compress images to pass file-size limits on job application portals
  • Convert PNG screenshots to WebP for faster web pages
  • Create thumbnails for YouTube or social media posts
  • Remove backgrounds from profile photos

Related Image Tools

Explore all Image Tools.