Profile Picture Cropper

Avatars are displayed as circles almost everywhere and stored as squares almost everywhere, which is why so many profile pictures have the top of a head or the side of a shoulder clipped off. The corners of the square are simply not shown, and a photograph framed for a rectangle rarely has its subject in the middle third where the circle can reach.

This cropper shows you the circle while you work. Load a photo, adjust zoom and position until the framing looks right inside the round preview, and export a 512-pixel square PNG with the circle masked out of it.

The output size is not adjustable, and that is a considered choice rather than a missing feature - the reasoning is set out below, along with what a face needs to look like when the same file is rendered at a fortieth of that size next to a comment.

The avatar you are designing will most often be seen at roughly 32 to 48 pixels across - beside a comment, in a notification, in a follower list. At that size a face is a few dozen pixels of information, and the only things that survive are the overall shape, the contrast between the subject and the background, and whether the eyes are near the centre.

That argues for cropping much tighter than instinct suggests. A comfortable head-and-shoulders portrait, the framing that looks correct at full size, becomes an unidentifiable smudge in a comment thread. Zooming until the head fills most of the circle feels aggressive on the 280-pixel preview and is what reads correctly where the avatar actually lives.

Background matters more than anything else at that scale. A face against a busy scene loses its edge and merges into the surroundings; the same face against a plain wall or an out-of-focus field stays legible. If you have a choice of photographs, the one with the simpler background beats the one with the better expression.

Platforms want an upload comfortably larger than any size they will display, because they generate their own set of thumbnails from it and downscaling produces better results than upscaling. Common avatar upload guidance across the major platforms sits well under 512, so exporting at 512 gives every one of them more pixels than it needs while keeping the file small enough that nothing rejects it.

Going larger buys nothing. A 2,000-pixel avatar is downscaled to the same handful of display sizes as a 512-pixel one, and the extra data is discarded on the platform’s server. Going smaller does cost something: a 200-pixel upload has to be enlarged for the largest display context, and enlargement is where avatars turn soft.

The corners of the exported square are transparent rather than filled, because the crop is a true circular mask on a PNG. Uploaded to a platform that displays a circle, the corners are irrelevant. Placed anywhere that shows a square, you will see your circle floating on whatever background sits behind it.

A 512-pixel square canvas is created and a circular path spanning its full width is set as the clipping region before anything is drawn. Your image is then drawn with a cover fit: scaled by whichever of width or height requires the larger factor, so the circle is guaranteed to be completely filled and the overflow falls outside the clip. The background is left transparent rather than filled with a colour.

Zoom multiplies that base scale, from 1 up to 3 in hundredth steps. The two pan sliders shift the image along each axis within the range the cover fit permits, so panning to an extreme moves the image as far as it can go before a gap would appear rather than pushing the subject out of frame entirely. A reset control returns all three to their defaults.

The 280-pixel preview is a scaled copy of that same export canvas, not a separate render, so the framing you approve is exactly the framing that downloads. The file is named from your original filename with a profile suffix, and every step - reading, decoding, cropping, encoding - happens in the browser with no upload.