✂️ Image Cropper
By Shihab Mia · Updated 2026-07-30
PNG, JPEG, WebP and GIF are supported. Your image never leaves your browser.
Upload an image to begin. Everything runs locally on your device.
This image cropper lets you cut out the part of a photo you want and download it, all without installing anything. Upload an image, set the crop area by typing exact pixel coordinates (X, Y, width and height) or pick a preset ratio like 1:1 or 16:9, check the live preview, then download the cropped result. The whole thing runs in your browser using the canvas, so your picture is never uploaded to a server.
What is the Image Cropper?
Cropping means keeping a rectangular region of an image and discarding the rest. A crop is fully described by four numbers: the X and Y of its top-left corner (measured in pixels from the top-left of the image) and its width and height. This tool exposes those four numbers directly, so you can position a crop precisely instead of dragging and hoping. Every value is clamped to the image bounds, so the selection can never run off the edge and produce a broken or empty result.
Unlike resizing, cropping does not stretch or squash anything. The pixels inside the rectangle are copied across at their original resolution, so a 400 by 400 crop taken from a large photo is genuinely 400 by 400 sharp pixels, not an upscaled guess. That is why cropping is the right tool when you need a specific shape (a square avatar, a 16:9 banner) or want to remove distracting edges, while resizing is the tool for changing the overall pixel count.
The preset aspect ratios are a shortcut for the common shapes. Choosing one fits the largest rectangle of that proportion centered on your image, which you can then fine-tune with the numeric fields. Most cropping needs online come down to a handful of shapes: square for avatars and profile pictures, 4:5 or 9:16 for social media posts and stories, and 16:9 for video thumbnails and banners. Picking the right ratio before you crop saves you from a platform re-cropping your image awkwardly later, since most sites and apps crop again to fit their own layout if you upload the wrong shape.
The export from this tool is a PNG, a lossless format, so re-cropping a screenshot or graphic will not introduce the blocky artifacts you would get by repeatedly saving a JPEG. That matters most for images with sharp edges and text, like screenshots, diagrams and logos, where JPEG compression visibly smears fine detail. A photo cropped to PNG is larger in file size than the same photo saved as JPEG, so if file size matters more than perfect edges, re-compress the PNG afterward with a photo-focused converter.
Because all of this happens locally with the FileReader and canvas APIs built into every modern browser, nothing is sent over the network. The image is decoded on your device, the crop is drawn to an off-screen canvas, and the result is generated as a downloadable blob, all without a round trip to a server. That keeps private photos private and also means the crop happens instantly, with no upload wait and no file size limit imposed by a server.
When to use it
- Cutting a square profile picture or avatar out of a larger photo.
- Trimming distracting edges, borders or whitespace from a screenshot before sharing it.
- Producing a 16:9 banner or thumbnail from a photo for a video or blog post.
- Cropping a precise pixel region for a UI mockup or documentation, using exact coordinates.
- Preparing a 4:5 or 9:16 crop for a social media feed post or story before uploading.
- Removing private details near the edges of an image without any of it touching a server.
How to use the Image Cropper
- Click Choose an image and pick a photo from your device.
- Either type the X, Y, width and height in pixels, or pick a preset aspect ratio.
- Watch the dashed rectangle in the preview to confirm the area you will keep.
- Click Crop image to render the selection to a canvas.
- Click Download cropped image to save the result as a PNG.
Formula & method
Worked examples
You have a 1200 by 800 photo and want a square (1:1) crop centered on it.
- Start from the full width: w = 1200, then h = w x 1 / 1 = 1200
- That height (1200) is taller than the image (800), so shrink to fit: h = 800
- Recompute width for the ratio: w = h x 1 / 1 = 800
- Center horizontally: x = (1200 - 800) / 2 = 200, and y = (800 - 800) / 2 = 0
Result: An 800 x 800 square crop taken at (200, 0).
You want a 16:9 banner from the same 1200 by 800 photo.
- Start from the full width: w = 1200, then h = w x 9 / 16 = 675
- That height (675) fits inside 800, so no shrinking is needed
- Center vertically: y = (800 - 675) / 2 = 62.5, rounded to 63, and x = 0
Result: A 1200 x 675 crop taken at (0, 63).
You type a crop that runs off the edge: X = 1000, width = 400 on a 1200-wide image.
- Maximum allowed width at x = 1000 is imageWidth - x = 1200 - 1000 = 200
- Your requested 400 is clamped down to 200
- The crop becomes 200 wide starting at x = 1000, ending exactly at the right edge
Result: A safe 200-pixel-wide crop instead of a broken, off-image one.
You need an Instagram feed post crop from a 2000 by 1500 photo, targeting 4:5.
- Start from the full width: w = 2000, then h = w x 5 / 4 = 2500
- That height (2500) is taller than the image (1500), so shrink to fit: h = 1500
- Recompute width for the ratio: w = h x 4 / 5 = 1200
- Center horizontally: x = (2000 - 1200) / 2 = 400, and y = (1500 - 1500) / 2 = 0
Result: A 1200 x 1500 crop (4:5) taken at (400, 0), ready to resize to 1080 x 1350 for upload.
Common crop shapes and where they are used
| Aspect ratio | Shape | Typical use |
|---|---|---|
| 1:1 | Square | Profile pictures, avatars, Instagram posts |
| 4:5 | Portrait | Instagram and Facebook feed posts |
| 4:3 | Landscape | Classic photos, presentation slides |
| 3:2 | Landscape | DSLR photos, prints |
| 16:9 | Wide | Video thumbnails, banners, widescreen |
| 3:4 | Portrait | Vertical photos, posters |
| 9:16 | Tall portrait | Phone wallpapers, Stories, Reels, TikTok |
The four crop coordinates explained
| Field | Meaning | Valid range |
|---|---|---|
| X | Distance from the left edge to the crop start | 0 to imageWidth - 1 |
| Y | Distance from the top edge to the crop start | 0 to imageHeight - 1 |
| Width | How many pixels wide the crop is | 1 to imageWidth - X |
| Height | How many pixels tall the crop is | 1 to imageHeight - Y |
Target crop sizes for common platforms (pixels)
| Platform | Use | Recommended size | Ratio |
|---|---|---|---|
| Profile picture | 320 x 320 | 1:1 | |
| Feed post | 1080 x 1350 | 4:5 | |
| Instagram / TikTok | Story or Reel | 1080 x 1920 | 9:16 |
| Profile picture | 320 x 320 | 1:1 | |
| Cover photo | 851 x 315 | 2.7:1 | |
| YouTube | Video thumbnail | 1280 x 720 | 16:9 |
| Profile picture | 400 x 400 | 1:1 | |
| X (Twitter) | Header image | 1500 x 500 | 3:1 |
Common mistakes to avoid
- Confusing cropping with resizing. Cropping removes pixels outside a rectangle and keeps the rest at full resolution. Resizing changes the total pixel count and can soften the image. If you want a specific shape without stretching, crop; if you want a smaller file at the same composition, resize.
- Setting width or height larger than the space available. If X is 1000 on a 1200-wide image, the widest crop possible is 200 pixels. Asking for more does not add pixels that are not there. This tool clamps the value so the crop stays inside the image instead of breaking.
- Expecting a tiny crop to upscale. A 50 by 50 crop is 50 by 50 pixels. It will look small. Cropping cannot create detail that was not captured, so if you need a larger result, start from a higher-resolution image.
- Forgetting that a chosen ratio overrides your numbers. Picking a preset ratio recomputes the rectangle to that shape. Switch the ratio back to Free if you want to type your own width and height without them snapping to a proportion.
- Uploading the wrong ratio and letting the platform crop it again. Instagram, Facebook and YouTube will auto-crop an image that does not match their expected ratio, often cutting off heads or logos near the edges. Crop to the platform size yourself first, using the reference table above, so you control exactly what gets kept.
- Cropping a screenshot to JPEG and losing sharp edges. Text and UI screenshots have hard edges that JPEG compression blurs. This tool exports PNG, which is lossless, so keep the result as PNG for screenshots and graphics, and only convert to JPEG afterward for full photographs where the smaller file size matters more.
Glossary
- Crop
- Keeping a rectangular region of an image and discarding everything outside it.
- Aspect ratio
- The proportion of width to height, written as width:height, such as 16:9 or 1:1.
- Pixel (px)
- The smallest unit of an image. Crop coordinates and sizes are measured in pixels.
- X / Y offset
- The position of the crop top-left corner, measured in pixels from the image top-left.
- Canvas
- A browser drawing surface used here to render the cropped region and export it as an image file.
- Clamping
- Forcing a value to stay within an allowed range, so the crop never extends past the image edges.
- Resolution
- The width and height of an image in pixels. Cropping keeps original resolution inside the selection; resizing changes it.
- Lossless format
- An image format like PNG that stores pixels exactly, with no quality loss from re-saving, unlike JPEG.
Frequently asked questions
How do I crop an image online for free?
Upload your photo, set the crop area by typing X, Y, width and height in pixels or by picking a preset ratio, then click Crop image and download the result. It is free and runs entirely in your browser, with no sign-up.
Are my photos uploaded to a server?
No. This cropper reads the file locally with the browser FileReader and canvas APIs, so the image stays on your device the whole time. Nothing is sent over the network, which makes it safe for private or sensitive pictures.
What image formats can I crop?
You can crop any format your browser can display, which includes PNG, JPEG, WebP and GIF. The cropped output is saved as a PNG, a lossless format that avoids extra compression artifacts.
Can I crop to an exact pixel size?
Yes. Set the ratio to Free and type the precise width and height you need along with the X and Y position. The values are clamped to the image bounds so the crop is always valid, and the result is exactly that pixel size.
What is the difference between cropping and resizing?
Cropping cuts out a region and keeps those pixels at full resolution, changing the composition. Resizing changes the total number of pixels and can blur detail. Use cropping for a specific shape or to trim edges, and resizing to change the overall dimensions.
Does cropping reduce image quality?
No. Cropping copies the selected pixels exactly as they are, so quality inside the crop is unchanged. Quality only suffers if you then enlarge a small crop, because cropping cannot invent detail that was not in the original image.
What size should I crop a profile picture to?
A square (1:1) crop works for almost every platform. Instagram, Facebook and LinkedIn all display profile pictures as circles cut from a square, so crop to 1:1 around 320 x 320 pixels or larger, then upload, and the platform handles the circular mask.
What crop ratio should I use for a YouTube thumbnail?
Use 16:9, ideally cropped from an image at least 1280 by 720 pixels. That matches the video player shape exactly, so nothing gets cut off or letterboxed when it displays on the video page or in search results.
Can I crop multiple images at once?
This tool crops one image at a time so you can position each crop precisely. For a handful of images that need the same treatment, repeat the steps for each file; the whole process only takes a few seconds per image since nothing uploads.
Does this cropper work on mobile phones?
Yes. It runs in any modern mobile browser using the same FileReader and canvas APIs as desktop, so you can crop a photo taken on your phone without installing an app, though typing exact pixel values is easier on a larger screen.