A circular image for an email attachment is created by clipping the largest centered square of a JPG, PNG, or WebP into a circle, marking every pixel outside that circle transparent, and exporting the result as a PNG, all within your local browser tab. The geometry is simple: the output canvas is always a square whose side length equals the shorter side of the source image. For example, a 1200 × 800 landscape photo produces an 800 × 800 circular PNG, with the source pixels drawn from the centered rectangle spanning x = 200 to x = 1000. Because the corners outside the circle become fully transparent, the same PNG blends into white, gray, colored, or dark email layouts without producing halo rectangles. Email clients that strip, block, or refuse remote-hosted images still render local attachments, which is why an inline circular PNG sent as an attachment remains a reliable way to put a profile photo, contact card image, or team avatar into a message.
Why Circular PNGs Fit Email Attachments
When you paste a square or rectangular photo into an email signature, the rectangular shape sits inside a hard block and competes with surrounding text, links, and contact details. A circular PNG with transparent corners sits flush against the signature background, mirroring the way social platforms, contact cards, and team directories already display headshots. That visual consistency reads as more polished on a phone screen, in a desktop mail client, and inside a forwarded thread where the recipient never sees your original layout choices.
Transparency is the main reason this works. JPEG cannot represent transparent pixels at all, so any crop that needs an irregular edge has to be exported as PNG. The trade-off is file size, because PNG uses lossless compression and is often larger than the source JPEG that produced it. That difference is normal and not an error. For an email signature, contact card, or team directory avatar, the gap between a 40 KB rectangular JPEG and a 90 KB circular PNG is negligible on modern inboxes, but the visual polish in the final email is dramatic.
How to Circle Crop an Image for an Email Attachment
The cropping step itself only takes three clicks, and it never uploads the source to a server.
- Pick a JPG, PNG, or WebP file up to 25 MiB in size. Confirm the source dimensions displayed beneath the preview and note the shorter side; that is the exact size of the circular PNG you will download, and the shorter side is also the side length of the output square.
- Select Create circle crop. The browser creates a transparent canvas at the source's shorter side, applies a circular clip path to that canvas, and draws the centered square from the source image into the clipped circle. The output canvas uses the natural pixel size of the source, not the smaller preview shown on screen, so the downloaded file is full resolution.
- Inspect the transparent PNG preview against both a light and a dark background to confirm the circle edge and any partially transparent edge pixels look clean. Then download the resulting PNG and attach it to the email as a profile photo, contact card image, or team avatar.
The flow runs entirely through the browser's Canvas API: the file is decoded from a temporary local object URL, drawn into the clipped canvas, and exported as a PNG through a second temporary object URL. Both URLs are released when a newer file replaces them or when the page is closed, so the original photo never leaves the current tab. Job guards also cancel any older decode or PNG encode that is still running when a newer file is selected, which prevents stale results from overwriting the preview you just generated.
Source Dimensions and Output Sizing
The crop plan is fixed and predictable. The output square is always derived from the shortest side of the source, the cropped rectangle is always centered, and there are no sliders, drag handles, or repositioning controls. The table below shows the relationship between common input sizes and the circular PNG you will get back.
| Source dimensions | Output PNG | Source region used |
|---|---|---|
| 1200 × 800 (landscape) | 800 × 800 | x = 200 to x = 1000 |
| 800 × 1200 (portrait) | 800 × 800 | y = 200 to y = 1000 |
| 1000 × 1000 (square) | 1000 × 1000 | full source |
For a 1200 × 800 source the shorter side is 800 pixels and the horizontal offset is (1200 − 800) ÷ 2 = 200 pixels, so the cropped rectangle is x = 200 to x = 1000. Any landscape, portrait, or square input follows the same pattern, so the arithmetic only needs to be worked out once if your photo is not already in the table. Note that the output is never resized: a 1500 × 1500 source produces a 1500 × 1500 circle, and a 4000 × 3000 source produces a 3000 × 3000 circle.
There are also hard limits worth noting before you start. The source file must be a JPG, PNG, or WebP up to 25 MiB; after decoding it must fit inside 40 megapixels with no side above 20,000 pixels, because canvas memory depends on decoded dimensions rather than compressed file size. SVGs and GIFs are not handled by this tool because it is designed for ordinary static bitmaps and does not preserve vector behavior or animation. If your source is in one of those formats, export it to a supported raster format first.
Before You Attach: Checks to Run on the Circular PNG
The cropped circle is purely geometric. It does not detect faces, does not adjust for off-center subjects, and does not recenter anything, so a short checklist before you attach the file will protect the final email from looking unprofessional.
- Open the downloaded PNG against a white background, then against a dark background. The circle edge should look smooth in both. Partially transparent edge pixels are normal and exist specifically to soften the boundary at normal display sizes.
- Confirm the main subject sits well inside the circle, not on the boundary. If a face, logo, or product edge touches the perimeter, crop or reposition the source first, then re-run the circle crop on the edited photo.
- Check that the file is genuinely transparent at the corners by opening it in your image viewer or pasting it into a colored canvas. If a rectangular block of the source shows through anywhere outside the circle, regenerate the PNG.
- Keep the original file. The newly encoded output does not preserve EXIF metadata, camera orientation tags, color profiles, animation, or embedded text fields, so work from the unedited source if you ever need those properties back later.
Pairing the Circular PNG With Other Email-Friendly Tweaks
A full-resolution circular PNG is suitable for archives, marketing assets, and high-density displays, but signature photos and contact card avatars are usually shown at thumbnail size. If the destination inbox has a 10 MB attachment cap, or your corporate mail server limits total attachment size, resize the circular PNG down to around 200–400 pixels on each side after cropping. The Circle Crop tool preserves the original pixel dimensions, so resizing once after the circle step is the simplest way to keep the file small without losing the circular shape. If a tighter version in a different format is needed for a strict mail server, encode the smaller circular PNG into an alternate format and attach both so recipients still get an image that loads.
If your email workflow needs the circular PNG on a solid color rather than a transparent background, for example to match a branded signature or a colored email template, the natural follow-up is to add a background to a PNG for email attachment. A solid color painted under the transparent corners is far easier to control than trying to crop a square that already has the wrong background baked into the corners. Center cropping also works best when the subject is already near the middle of the source and has enough breathing room around it, so verify that requirement once before exporting.
When a Rectangle Is the Better Choice
A circle is not always the right shape. Email banners, product screenshots, charts, event flyers, and document previews carry rectangular content that would be clipped to nothing useful by a circular boundary. For those attachments, you need a rectangular crop with a custom region and aspect ratio rather than a centered circle, and the circle tool is the wrong tool for the job.
Similarly, if the subject in the source photo sits close to an edge, the largest centered square will cut off the part that matters most. Edit the source first to nudge the subject toward the middle or to enlarge the area around it, then run the circular crop on the edited version. The geometric plan is identical; only the source pixel positions change, and the output circle is still computed from the new shorter side. With the subject centered and the file in a supported format, the resulting circular PNG is ready to attach and remains crisp across phones, desktops, and forwarded threads.