Circle Crop Image

A circle is smaller than it looks

Cropping a square to a circle removes the four corners, but the amount actually removed is easy to underestimate. The visible area of a circle inscribed in a square is about 78 percent of the square, and the outer ring of the square is entirely gone. That is why a photo cropped naively to a circle often loses the top of a head or the corners of a product, and why centring matters so much here.

NoteKeep anything that matters inside the inner circle, which is roughly 78 percent of the image width.

Where the face needs to be

For a profile picture, the head should sit in the upper middle of the circle rather than dead centre, because the eye expects a head in a portrait to be above the midpoint, and centring it makes people look like they have no neck. Combined with the circular crop, the reliable position is horizontally centred and slightly above centre vertically, with space left below for shoulders. A face placed in the top third survives desktop and gets clipped on a phone, which is the most common failure.

• Centre the face horizontally, and place it slightly above the vertical centre.
• Leave room below the chin for shoulders, not just for the head.
• Keep the whole head inside the inner circle so nothing clips at the edge.
• Check how it looks small. A photo that reads fine large often fails at avatar size.
• Avoid fine detail in the background, since the circular edge makes it obvious.

Export format and background

A circular crop usually means the corners need to be transparent, because a round picture placed on a rectangular page needs something in the corners. PNG and WebP both support transparency, and both are the right output for that. JPG has no alpha channel, so it will fill the circle with a background colour and show a square. If the destination is a platform that crops to a circle itself, exporting an opaque square is fine and simpler, because the platform does the cropping.

• Platform crops to a circle itself: export an opaque square. It handles the rest.
• You need the circle already cut out: export PNG or WebP with transparency.
• Never use JPG for a cut-out circle. It will show a filled square.
• If you need transparency and a small file, WebP is usually the better choice.

Group photos and logos behave differently

A group of faces is much harder than one face, because the circle leaves room for perhaps three people comfortably and no more. The usual solution is to crop tighter so the faces fill more of the circle, accepting that shoulders and surroundings are lost. A logo is a different case: it should be centred with generous margin, and it is worth checking that the mark stays clear of the circular edge at every point, since a shape touching the edge looks clipped even though it is not.

• Three people fit comfortably. More requires a wider shot, which the circle will not give.
• Crop tighter on a group so the faces fill more of the available area.
• Centre a logo with margin on all sides so it does not touch the circular edge.
• Test a logo at small size, where a mark that is too detailed turns to mush.