✂️ Image Cropper
By ToolNimba Editorial Team · Updated 2026-06-19
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. The export 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. Because all of this happens locally with the FileReader and canvas APIs, nothing is sent over the network, which keeps private photos private.
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.
- 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 × 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 × 1 ÷ 1 = 800
- Center horizontally: x = (1200 − 800) ÷ 2 = 200, and y = (800 − 800) ÷ 2 = 0
Result: An 800 × 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 × 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 × 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.
Common crop shapes and where they are used
| Aspect ratio | Shape | Typical use |
|---|---|---|
| 1:1 | Square | Profile pictures, avatars, Instagram 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 |
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 |
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.
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’s top-left corner, measured in pixels from the image’s 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.
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.