Why does a JPG circle turn white outside?
JPEG has no alpha channel. When this editor writes a JPG it fills every pixel outside the circle with the background you picked, and that background starts as white. The photo can look like it has a white disc glued on it. If the destination is a website, a slide with a colored theme, or a chat app that shows a dark bubble, that white halo is the file format, not a failed crop.
PNG stores an alpha value on each pixel. Outside the circle that value is zero, so whatever sits behind the image shows through. WebP can store alpha too. Use those two when the circle must float. Use JPG only when a solid backdrop is acceptable or required.
How do I check the edge on light and dark?
The preview strip under the editor draws the same circle at 24, 32, 48, and 96 pixels. Switch the strip between a light plate and a dark plate. A fringe you cannot see on white often shows on charcoal, especially if the source photo was lifted off a white background with a soft edge.
Look at hair, glasses, and the shoulder line. If a pale rim appears only on the dark plate, zoom out slightly or add a thin border so the rim is a choice instead of an accident. The checkerboard behind the preview is painted with CSS, so you are not looking at a baked-in texture.
Which format should I pick for a sticker or a site?
A sticker, a round team photo on a colored card, or an avatar that will be composited later should be PNG. It is larger than JPG and that is the trade for a clean edge. WebP is the smaller transparent option when you control the page and know the browser can show it.
If a form only accepts JPG, crop the circle here, set the background to the same color as the page that will hold it, and export JPG. Do not expect that file to look transparent anywhere else. The square export checkbox is separate: it skips the circle and gives you a square photo for an app that will mask it later.
What does the editor change in the file?
The browser reads the image, honors EXIF orientation, and draws the circle on a canvas. PNG export is painted at double size and then scaled down so the rim is less jagged. The original pixels are the source for the final size. A working copy is used only while you drag, and only when the long edge is above 4096 pixels.
Nothing in that pipeline asks you to sign in. Closing the tab drops the bitmaps. The only saved preference is format, size, and background color mode, under the key cc_prefs.
When is a clear outside the right file?
Choose a circle crop transparent background when the page or the slide behind the photo should show through. A circle crop transparent background is a PNG or a WebP. JPG cannot keep those pixels clear, so the same circle on a JPG is white or whatever color you set. Export a circle crop transparent background, open it on a colored slide, and you can see the rim before you send it.
Frequently asked questions
Does PNG keep the outside clear?
Yes. Pixels outside the circle are transparent in the PNG this page exports by default.
Why is my downloaded circle on a white square?
You exported JPG, or you chose a white background. JPG cannot store transparency. Switch to PNG and set the background to clear.
Is WebP transparent too?
WebP from this editor can keep the outside clear, the same way PNG does. Use it when you want a smaller file and your destination accepts WebP.
Will a dark page show a halo?
It can, if the source edge is pale. Use the light and dark plates on the preview strip before you download.
Do you upload the photo to make the PNG?
No. The file is encoded in your browser. The download is a local blob.
Can I still add a border on a transparent PNG?
Yes. The border is opaque and the area outside the outer circle stays clear.
Sources
- createImageBitmap — The browser decodes the photo on this device
- HTMLCanvasElement.toBlob — The download is written by the browser, not uploaded