Image Cropper guide
Crop a precise rectangular area from a JPG, PNG, or WebP image and download it as a transparent-capable PNG.
What this tool does
The Image Cropper reads the source dimensions and creates a crop using four pixel values: horizontal starting position, vertical starting position, width, and height. The horizontal and vertical positions are measured from the top-left corner of the original image. A starting position of zero means the crop begins at that edge.
After an image is loaded, the tool prepares the largest centered square that fits inside it. This is useful for profile images, catalog thumbnails, and square social assets. You can replace those values with any valid rectangle or switch back to the complete image.
The browser draws only the selected pixels into a new canvas and exports a PNG. PNG is used so transparent pixels in a source image remain transparent. The operation does not stretch the selected area or invent missing detail, and the downloaded dimensions match the requested crop width and height.
How to use it
- Choose a JPG, PNG, or WebP image.
- Note the original width and height reported beneath the widget.
- Keep the centered square or enter custom X, Y, width, and height values.
- Select Crop image.
- Confirm the output dimensions and download the PNG.
Every part of the rectangle must remain inside the source. The X position plus crop width cannot exceed the source width. Likewise, the Y position plus crop height cannot exceed the source height. The tool reports an error instead of silently extending the canvas when values fall outside that boundary.
Benefits
- Uses exact pixel coordinates and output dimensions
- Provides a centered-square shortcut
- Preserves transparency through PNG export
- Validates that the crop remains inside the source
- Processes the file locally without an upload
Planning a crop
Keep the important subject away from the edge when the result will later be displayed with rounded corners or inside a circular avatar. For web cards, match the crop’s aspect ratio to the intended component before resizing it. Cropping first and resizing second avoids spending file size on pixels that will never be shown.
Cropping removes image data outside the selected rectangle. Keep the original source file because the downloaded result cannot restore discarded areas. If the source contains orientation metadata, check the visible result in the target application before publishing.