PNG Cropper
Crop a PNG by dragging a selection rectangle, or by typing exact pixel coordinates. The selection respects aspect-ratio presets if you want a square, 16:9, 4:3 or 1200×630 OG image. Transparency is preserved.
What "cropping" actually does
Cropping is the act of cutting a smaller rectangle out of a larger image and discarding everything outside it. Unlike resizing, which scales the entire image, cropping changes what's inside the frame: it removes distracting backgrounds, tightens composition around a subject, or extracts one region of a multi-part picture. Photographers, designers and content marketers crop dozens of images a week — it's one of the most useful basic edits.
The output of a crop is a brand-new image with the dimensions of the rectangle you selected. The pixels that survived are unchanged; the rest are simply gone. No quality is lost — every remaining pixel is identical to the source.
How this PNG cropper works
The browser draws your PNG into a hidden image element, overlays a draggable/resizable selection rectangle, and lets you adjust the crop region either by mouse (drag the rectangle, drag the corners to resize) or by typing exact pixel values in the X/Y/W/H boxes. When you click Crop, the tool creates a fresh <canvas> at the size of the selection, copies just that region from the source, and re-encodes it as a new PNG. Transparency is preserved automatically.
Coordinates start at 0,0 in the top-left corner and increase rightward (X) and downward (Y), which is the convention every image-editing tool follows. So X=100, Y=50, W=400, H=300 means "start 100 pixels from the left, 50 pixels from the top, and cut out a 400×300 rectangle".
Aspect-ratio presets
The aspect-ratio dropdown locks the selection to a specific shape. Pick one when you need the output to match a known target — for example, "1200:630" forces a 1200×630-shaped rectangle so the result fits Facebook/Twitter/LinkedIn share previews cleanly. The full preset list:
- Free — no constraint, drag any shape.
- 1:1 — square. Great for Instagram posts, avatars, app icons.
- 16:9 — widescreen. YouTube thumbnails, video posters, modern monitor wallpapers.
- 9:16 — vertical. Instagram/TikTok stories, mobile-first hero shots.
- 4:3 — older standard. Most presentation slides, some legacy cameras.
- 3:2 — classic photography. DSLR sensors, full-frame photos.
- 1200:630 — Open Graph image, used by Facebook, LinkedIn, Twitter card-large.
Compose better crops — composition rules that work
Rule of thirds. Imagine the image divided into nine equal parts by two horizontal and two vertical lines. Place your subject's eyes (portraits) or the main horizon (landscapes) on one of the four intersection points or along one of the lines. This is the most-taught compositional rule because it consistently produces images that feel balanced without being boring.
Leave breathing room in the direction of movement. If your subject is looking or moving to the right, leave more space on the right side of the frame. A tight crop on the trailing edge feels claustrophobic.
Match the crop to the destination's aspect ratio. Cropping a 16:9 photo and then squeezing it into a 1:1 Instagram tile means a chunk of your composition gets sliced off on the left and right. Pick the ratio first, compose for it second.
Don't crop awkwardly through joints. Cropping a portrait through the knees, elbows or fingertips looks amputated. Crop above or below the joint, not through it.
Cropping for the web — destination cheat-sheet
| Destination | Aspect ratio | Exact pixels |
|---|---|---|
| Open Graph (Facebook, LinkedIn) | 1200:630 | 1200 × 630 |
| Twitter card (large) | 16:9 (≈ 1200:628) | 1200 × 628 |
| YouTube thumbnail | 16:9 | 1280 × 720 |
| Instagram post | 1:1 | 1080 × 1080 |
| Instagram story / reel | 9:16 | 1080 × 1920 |
| Pinterest pin | 2:3 | 1000 × 1500 |
| Profile avatar (typical) | 1:1 | 400 × 400 |
| Hero banner (desktop) | 21:9 or 16:9 | 2400 × 1000 |
Tips and best practice
- Crop first, resize second. Cropping a huge image to a target region and then resizing it down is faster than the reverse and produces sharper output.
- For social previews, leave a small safe-zone margin on every edge — some platforms apply rounded corners or text overlays that cover the very edges of the image.
- If you only want to remove a specific colour from the edges (a white border, for example), the Transparent Background tool may be a better fit than cropping.
- For pixel-art crops, type exact integer coordinates rather than dragging — sub-pixel imprecision will misalign your sprite grid.
FAQs
Will my transparency be preserved?
Yes — every pixel inside the crop keeps its alpha value.
Does the image quality drop?
No. Cropping removes pixels but doesn't re-encode the rest at lower quality. The remaining pixels are bit-identical to the source.
Can I type the crop coordinates instead of dragging?
Yes — fill in the X/Y/W/H fields. The selection rectangle updates as you type.
What's the minimum crop size?
1 × 1 pixel, but anything that small is rarely useful.
Is anything uploaded?
No. The tool runs in your browser.
Can I crop multiple PNGs at once?
Not yet — one file at a time.
Why is my selection bigger than the visible image?
The image may be displayed at less than full size to fit your screen. Coordinates are in original pixels — the on-screen rectangle is just a guide.