Crop Image: what this tool does
Drag a visible crop rectangle or enter exact X, Y, width and height values, with centered presets for common ratios. The source is decoded and processed in the current browser tab; CalculatorGeek does not receive the image bytes.
This page owns the crop image online task. For the adjacent workflow, use Resize Image Converter, or return to the Image Tools Hub to choose another operation.
For the next related calculation, use the Photo Editor. Adjust brightness, contrast, saturation, hue, grayscale, sepia and softness, then choose the edited output format and quality.
How to use Crop Image
- Choose a supported source image or enter the page-specific source content.
- Set the visible controls for this task.
- Inspect the processed preview, dimensions, format and measured byte size.
- Run the final action and download the result. Keep the original until you have checked the output.
To compare this result with another relevant method, open the Remove Image Background by Color. Sample a background from the image corners or preview, make similar colors transparent, and refine the edge with tolerance and softness.
Method and result meaning
The browser copies the requested source rectangle to a new canvas whose dimensions equal the validated crop width and height.
The result panel is the authoritative state for this session: it reports the rendered dimensions, encoded format and actual output bytes. The source file is never overwritten.
Which settings should you choose?
Choose settings from the destination requirement, not from a promise of universal quality.
- Drag on the preview for fast visual composition.
- Use pixel fields when a specification requires exact coordinates or dimensions.
- Choose a ratio preset first, then fine-tune the rectangle without changing the retained source resolution.
Worked example
From a 1200 x 800 image, X 100, Y 50, width 800 and height 600 creates an 800 x 600 output using source pixels from that rectangle.
After completing this task, Rotate Image handles the next distinct image operation without mixing its settings into this page.
Privacy, supported files and limitations
Coordinates start at the top-left corner. Values are clamped to the source bounds rather than padding outside the image.
Processing is local to the browser. Each input is limited to 25 MB and 80 megapixels, each output to 64 megapixels, and batch-capable tools accept up to 20 files. Animated inputs use the decoded still frame.
Inputs, outputs and result meaning
The browser copies the requested source rectangle to a new canvas whose dimensions equal the validated crop width and height.
Inputs
- Source width
- Decoded source width in pixels. Supported units are px.
- Source height
- Decoded source height in pixels. Supported units are px.
Outputs
- Decoded source pixels
- This is the primary result. It is displayed in px. The display rule uses up to 0 decimal places.
The documented method is applied after the inputs are validated and normalized. Keep the result label, unit, selected mode, and stated limitations together when sharing the answer.
Frequently asked questions
What do X and Y mean?
X is the horizontal distance from the left edge and Y is the vertical distance from the top edge, both in source pixels.
Does cropping reduce quality?
The retained pixels are copied at their source dimensions, then encoded into the output format. Encoding can still affect file size and JPG quality.
Sources and method transparency
The implementation and its stated limits were reviewed on October 14, 2026 against the following browser-platform documentation.
- MDN - CanvasRenderingContext2D.drawImage() - Documents the browser drawing, scaling and source-rectangle operation used by the image pipeline.
- MDN - HTMLCanvasElement.toBlob() - Documents browser canvas encoding and format fallback behavior.