Image Cropper

The reason I added social media presets instead of just a free-form crop box is that most people cropping an image aren't doing it for artistic reasons — they're trying to stop a platform from auto-cropping their photo in a way that cuts off someone's head. Every platform enforces its own aspect ratio on thumbnails and feed previews, and if your uploaded image doesn't already match it, the platform crops it for you, usually from the center, with no regard for what's actually in the frame.

How it works

This runs on the Canvas API, entirely client-side. When you drag the crop handles, you're defining a rectangle in the original image's coordinate space; on export, the canvas draws just that rectangle at its native pixel dimensions into a new image. Cropping itself is lossless — you're only removing pixels outside the box, not touching the ones you keep. Compression only enters the picture at the export step, and only if you choose a lossy format like JPEG or WEBP with a quality setting below 100 — PNG output stays lossless regardless.

A real example

A 4000×3000px landscape photo (4:3) meant for an Instagram post, which displays square (1:1) in the feed. Uploaded as-is, Instagram would crop it to 3000×3000 from the center, likely cutting off whatever's at the left or right edge of the original frame. Using the Instagram preset here instead, you get to choose which 3000×3000 square of the original photo to keep — dragging the crop box left or right to keep the actual subject in frame — before the image ever reaches the platform. Same total information loss either way, but you control what's lost instead of a center-crop algorithm deciding for you.

Common mistakes

• Cropping to the display size instead of the platform's actual recommended upload size. A 1:1 ratio at 400×400px will look fine in feed but soft and blurry if the platform displays it larger anywhere (a profile view, a lightbox). Crop to the ratio, but export from as high a source resolution as you have — don't crop and then also downscale unnecessarily.
• Not checking the platform's ratio has changed. Presets are based on each platform's current published specs, but platforms do change these — if a preset looks off compared to what you're actually seeing live on the platform, it's worth double-checking their current guidelines rather than assuming the preset is wrong.
• Circle-cropping and exporting as JPEG. Circle crop relies on a transparent background outside the circle, which JPEG doesn't support — you'll get square corners filled in with a solid color instead of transparency. Export as PNG or WEBP if you need the actual circular shape with transparency.