Circle Crop Geometry

Circle crop geometry explains how much of a photo a round mask keeps, and why a face near the edge disappears on a small avatar. The figures match the editor, so you can plan the crop before you export.

Zoom1.0×

What share of a square does the circle cover?

Build the circle so it touches all four sides of a square. Its area is π/4 of the square, which is 78.54 percent. The four corners that a crop throws away add up to 21.46 percent. A 1000 by 1000 crop at zoom 1 therefore keeps the full square as the source and still discards that corner share when the circle mask is applied.

The same percentage is why a busy background in the corners disappears in Crop mode and stays visible in Fit mode. Fit does not delete those corners; it shrinks the whole photo until they sit on the circle.

How large is the safe square inside the circle?

The largest square that fits inside a circle has a side of diameter divided by the square root of 2. For a 512 pixel circle that side is 362 pixels, 70.7 percent of the diameter. Eyes, a wordmark, or a product that must survive a 32 pixel avatar should sit inside this square, not near the ring.

The preview strip at 24, 32, 48, and 96 pixels is there so you can see that safe area after the mask, instead of judging the crop only at full size.

How does Fit scale a 1200 by 800 photo?

Fit sets the scale to the inner diameter divided by the diagonal of the photo. For 1200 by 800, output diameter 512, and no border or padding, the diagonal is 1442.22 and the scale is 0.35501. The drawn image is 426 by 284 pixels. Its top-left corner on the 512 canvas is (43, 114).

A border of 4 percent and padding of 5 percent on that same 512 canvas rounds to a 20 pixel border and 26 pixels of padding, leaving an image circle 420 pixels across. Those integers come from rounding the diameter times each percent.

How much area remains for common photo ratios?

When the circle’s diameter is the short side of the photo, a wider frame keeps a smaller share of its pixels. The table uses min(width, height) as the diameter and divides that circle’s area by the rectangle. 3:2, 4:3, and 16:9 are the rows. Scale the numbers up to a real file and the percentages stay the same.

Share of the rectangle kept by a circle whose diameter is the short side
RatioArea keptShort side used
3:252.36%2
4:358.90%3
16:944.18%9

Circle area uses diameter min(width, height), divided by width times height. The ratio is unchanged if you scale both sides.

Why are the numbers not typed by hand?

Hand-typed percentages drift away from the code. This page asks the build for π/4, for the inscribed square at 512 pixels, for the 1200 by 800 Fit example, and for the retention of 3:2, 4:3, and 16:9. If a rounding rule changes in the tool, the article changes with it. That is the methodology, and it is also why you should treat the table as a calculation, not as a platform’s rule.

Platform pixel sizes do not belong in this math. They live in the size chart with their own sources. Mixing LinkedIn’s pixel range into a geometry formula would make both pages worse.

How should a designer use the safe square?

Anything that must remain recognizable at 32 pixels should sit inside the inscribed square, not merely inside the circle. The circle still contains pixels near the rim, but those pixels are the first to be covered by a border, a ring highlight, or a sloppy mask in an app. The preview strip is the practical test. The square is the planning tool.

Borders shrink the image circle further. A 4 percent border and 5 percent padding on a 512 canvas are worked in the section above from the rounding rule, not from a sketch. Turn the border on and look again. The face that fit before may need a slightly higher zoom.

What does circle crop geometry tell you before you export?

Circle crop geometry is the reason a face near the edge disappears. The circle keeps about 78.54 percent of the square and throws the corners away. Use circle crop geometry to place the subject inside the inner square, which at 512 pixels is the side length printed above. Circle crop geometry also explains Fit: the whole photo stays, and the gaps are the price. You do not need a separate calculator for that circle crop geometry. This page prints the figures the editor uses.

Frequently asked questions

What share of a square does the circle keep?

π/4, printed above from the build, 78.54 percent. The corners are the rest.

What is the safe square?

The side is the diameter divided by the square root of two, rounded. At 512 pixels the page shows the rounded result from the code.

How does Fit compute scale?

Inner diameter divided by the diagonal of the photo. The 1200 by 800 example is calculated on this page.

Do 16:9 photos keep less area?

Yes, when the circle’s diameter is the short side. The retention table shows the share.

Are these platform sizes?

No. They are geometry. Platform sizes are on the size chart.

Can the formulas disagree with the tool?

They should not. The page and the tool import the same module, and the tests check both copies.

Sources

On this page

    ↑↓ Enter Esc

    Share this page

    On this page