Skip to content

Circle Crop

Crop a JPG, PNG, or WebP into a centered circle locally and download a full-resolution transparent PNG.

Privacy: your files never leave your device. All processing happens locally in your browser.

How to use

  1. 1.Choose a JPG, PNG, or WebP image up to 25 MiB and confirm the displayed source dimensions.
  2. 2.Select Create circle crop to use the largest centered square at its original pixel size.
  3. 3.Inspect the transparent PNG preview, then download the result.

About Circle Crop

Circle Crop creates a circular image with transparent corners directly in your browser. Choose a JPG, PNG, or WebP file, inspect the source preview, and create a PNG that is ready for profile pictures, team directories, contact cards, marketplace avatars, and simple design layouts. The workflow has one deliberate behavior: it takes the largest square that fits in the center of the source, clips that square to a circle, and makes every pixel outside the circle transparent. There are no positioning controls or automatic subject detection, so the result is predictable and easy to verify.

The output is not silently resized. Its width and height both equal the shorter side of the original image. For example, a 1200Γ—800 landscape photo produces an 800Γ—800 PNG using the centered source rectangle from x=200 to x=1000. An 800Γ—1200 portrait photo also produces 800Γ—800, using the centered vertical region from y=200 to y=1000. A square image keeps its original dimensions. The visible preview is constrained only for the page layout; the downloaded file comes from the natural-size output canvas.

The production renderer and isolated tests share one crop plan. That plan defines the exact source rectangle, destination rectangle, output dimensions, circle center, and radius. The renderer starts with a transparent canvas, clips it to the planned circular path, and draws the centered square into the matching output rectangle. Golden tests cover landscape, portrait, square, and odd-difference dimensions, including half-pixel source coordinates where they are required to keep the crop mathematically centered instead of favoring one side.

All work stays in the current browser tab. The selected file is opened through a temporary local object URL, decoded by the browser, and drawn with the Canvas API. The generated PNG receives a separate temporary object URL for its preview and download. Both URLs are released when they are replaced or when the page closes, and asynchronous job guards prevent an older decode or PNG export from overwriting a newer selection. No image pixels, filename, crop result, or usage detail is uploaded to Lizely.

JPEG, PNG, and WebP inputs are accepted. SVG and GIF are excluded because this tool is designed for ordinary static bitmaps and does not preserve vector behavior or animation. The compressed file limit is 25 MiB (26,214,400 bytes). After decoding, images are also limited to 40 megapixels and 20,000 pixels per side because canvas memory depends on decoded dimensions rather than compressed file size. Unsupported, empty, oversized, over-budget, unreadable, canvas, encoding, and download-URL failures are shown explicitly, with any stale output cleared.

Every result is encoded as PNG because transparency is required outside the circle. A PNG may be larger than the original JPEG or WebP; that is normal because PNG uses lossless compression. The newly encoded output does not promise to preserve EXIF metadata, camera orientation tags, color profiles, animation, or embedded text fields. The circular boundary may contain partially transparent edge pixels from browser antialiasing, which produces a smoother visual edge at normal display sizes.

Center cropping works best when the subject is already near the middle of the image and has enough space around it. If a face or object sits close to an edge, crop or reposition the source in an image editor first. Keep the original file, inspect the transparent PNG against both light and dark backgrounds, and confirm that important details do not touch the circular boundary before publishing it. Use Image Cropper when you need a custom rectangular region, Image Resizer when you need a specific pixel dimension, or Image Rotator when orientation must be corrected before the circular crop.

Methodology & sources

The browser validates JPEG, PNG, or WebP MIME type and a 25 MiB (26,214,400-byte) compressed-size limit, decodes the image through a temporary object URL, then rejects invalid dimensions, either side above 20,000 pixels, or images above 40 megapixels. A shared crop plan selects the largest centered square without resizing and defines the output rectangle plus a circle centered at half the output side with radius half the side. Production and tests share a renderer that clears the natural-size canvas to transparency, clips that exact circle, draws the planned source rectangle into the equal-size destination rectangle, restores the context, and exports image/png. Isolated tests assert landscape, portrait, square, horizontal and vertical odd-difference geometry, plus the clear-clip-draw call sequence. Job and mounted-state guards prevent stale asynchronous decode or encoding work from replacing newer results, and source and result object URLs are revoked when replaced or unmounted.

Frequently asked questions

Does Circle Crop resize my image?
No. The output width and height equal the source image's shorter side. The largest centered square is drawn at the same pixel size.
Can I move or zoom the crop?
No. This focused tool always uses the largest centered square. Reposition the source first if the subject is not centered.
Are my images uploaded?
No. File decoding, canvas clipping, preview creation, and PNG export happen locally in your current browser tab.
Why is the download a PNG?
PNG supports the transparent pixels outside the circle. JPEG does not support transparency.

Image Tools guides

View all