A circular avatar from a rectangular photo
- Input
- Foto 1600x900, forma círculo, modo crop
- Expected output
- Recorte central quadrado de 900x900 antes do círculo
The source square guarantees a true circle, not a stretched ellipse.
rounded corners and avatars
A circular avatar made from a rectangular photo is not just an ellipse fitted to the rectangle: an ellipse warped to a non-square photo comes out oval, not round. This tool first decides the source square (either by center-cropping or by letterboxing) and only then applies the circular shape or the rounded corners on top of that square.
The source square guarantees a true circle, not a stretched ellipse.
50% is the tool's ceiling: beyond it the shape would stop being a rectangle with corners and become something else.
Without padding around the shape, a solid background fills everything, and the rounding becomes, in practice, a visual no-op.
If the background is transparent, the output needs an alpha channel: PNG (the most compatible) or WebP. JPG cannot store transparency, so it is not even offered in that case. If you chose a solid background colour, there is no transparency to preserve and JPG produces a much smaller file.
Because a circle applied directly to a non-square rectangle comes out warped; this tool fixes that by first cropping (or fitting) the image into a square, and only then applying the circular shape on top of that square.
They can if the crop uses the Canvas 2D default `clip()`, which is not antialiased in Chromium; this tool avoids that by drawing the whole image first and compositing the shape on top with `destination-in`, an operation that reuses the rasterizer's own antialiasing instead of the clip path.
50% of the image's shorter side; at that point the corner takes up half the side, the maximum rounding possible without the rectangle turning into a different shape.
Because without space around the shape, a solid background fills the entire rectangle behind it, and the rounded area ends up covered by the same color as the background, making the rounding visually imperceptible.
Rounding happens entirely in your browser. No image is sent to any server.