Starting a website?

Purpose-Built Templates

ZU2B Blueprints

Business in a Box

Reference

ZU2B Pulse™

See what visitors experience before they leave — paste any public URL and get a plain-English performance report in seconds.

Scan Your URL Free
FAQ • Support

Two Ways a Square Crop Quietly Distorts an Image

Field Note #130
🔬 Generalized 🟢 Beginner ⏱ 5 Minutes ✓ Observation from Experience
You need a square avatar or icon from a source image that isn’t square. You crop a rectangular region around the subject, resize it to your target square dimensions, and export. The result looks subtly off — proportions feel slightly stretched, or the subject isn’t quite centered the way it looked in the original crop.

Two separate, easy-to-miss mistakes usually cause this, and they often happen together.
Mistake 1: Resizing a non-square crop into a square canvas
If your crop region is, say, 320px wide by 460px tall, and you resize that directly to 240×240, the image gets squashed to fit — width and height are scaled by different factors to force a non-square rectangle into a square. The result renders, and at a glance it might not look obviously “wrong,” but proportions are off in a way that reads as subtly unnatural (a face or logo that looks slightly wider or taller than it should).

The fix: before resizing, crop to an actual 1:1 square first — same pixel width and height — then scale that square down to your target size. Scaling a square into a square never distorts proportions, regardless of the final size.
Mistake 2: Assuming the bounding box’s center is the subject’s visual center
If you’re cropping around a character or logo that has asymmetric elements — an arm reaching out further on one side than the other, for instance — the mathematical center of its full bounding box is not the same as where the “important” part (a face, a focal point) actually sits. Centering a crop on the bounding box’s midpoint can leave the actual subject noticeably off-center in the final crop, even though the math was technically correct.

The fix: measure the position of the specific feature you want centered directly — not the whole subject’s outer bounds. For a face/head crop specifically, sample a narrow horizontal band right at the top of the subject (before any wider elements like outstretched arms enter frame) and find that band’s center — this is a much closer proxy for where the visual focal point actually sits.

How to tell the difference
If a cropped avatar looks “almost right” but slightly stretched, check whether the pre-resize crop was actually square. If it looks proportionally fine but the subject is shifted to one side, check whether you centered on the full bounding box instead of the specific feature.

How to avoid it next time
Always crop to a true square before resizing, never resize a rectangle directly into your final square dimensions. And when centering on a subject with asymmetric parts, sample the actual feature you care about rather than trusting the geometric midpoint of everything in frame.

Tagged in :

More from the field