Where round images are useful
Circles draw the eye to faces, which is why they have become the standard shape for avatars. While social networks mask square images into circles for you, many other places do not: email signatures, presentation slides, website “about us” pages, documents and printed materials. A circle-cropped PNG with transparent corners drops into all of these and looks right on any background, light or dark.
Getting a good round crop
- Centre the face slightly above the middle. Leave a little space above the head and include the shoulders.
- Use a large enough source. The final circle should be at least 400 pixels across for crisp results on modern screens.
- Mind the corners. Anything in the corners of the square selection will be cut away, so do not place important details there.
- Simple backgrounds work best. A busy background is more noticeable inside a small circle.
PNG or WebP?
Both formats store transparency, so either works for a round image. PNG is the safe default: every email client, word processor, presentation app and website builder accepts it, and it is lossless, so faces stay crisp. WebP produces a file that is usually three to five times smaller, which is useful for a website team page where many avatars load at once, but some older desktop software and email clients cannot display it. If you are not sure where the image will end up, choose PNG.
How it works
Your photo is decoded in a background Web Worker, rotated according to its EXIF data, and displayed as a preview. When you click “Crop image”, the square selection is cut out of the full-resolution image and every pixel outside the inscribed circle is made transparent. Pixels along the edge are partially transparent according to how much of them lies inside the circle, which gives the smooth, anti-aliased edge. The result is encoded as PNG or WebP. Nothing leaves your device.
For rectangular crops with other ratios, use Crop Image. To make the avatar an exact size afterwards, use Resize Image or the 400 × 400 preset.