UtilityKit

500+ fast, free tools. Most run in your browser only; Image & PDF tools upload files to the backend when you run them.

Image Crop Tool

Crop rectangles including square presets before PNG download.

About Image Crop Tool

Cropping sounds simple — drag a box, click save. The challenge is precision: isolating a modal dialog from a full-page screenshot, removing a status bar from a phone capture, extracting one person from a group photo at an exact aspect ratio. This tool provides a focused crop interface: a drag-to-draw box with resize handles on all corners and edges, arrow-key nudging for single-pixel adjustments, and a live pixel readout showing X, Y, Width, and Height as you drag. Lock to square, 16:9, or 4:3, or type exact coordinate values for repeatable crops across a batch of screenshots. PNG output preserves transparency. The crop is lossless — Canvas draws only the selected region without re-compressing source pixels. Everything runs in the browser, so sensitive screenshots containing PII or production URLs never leave your tab.

Why use Image Crop Tool

Drag-Box Rectangle Crop

Click and drag to draw a crop box directly on the image canvas. Resize handles on all four corners and four edges let you refine the selection without redrawing. The box moves with the cursor while dragging inside it, making repositioning quick and intuitive without starting over.

Square, 16:9, 4:3 Aspect Presets

Lock the crop box to a standard aspect ratio and it constrains automatically as you resize. Square locks are essential for platform profile photos that reject off-spec submissions; 16:9 and 4:3 locks are useful for hero banners and presentation slide thumbnails without manually calculating pixel dimensions.

Pixel-Exact Coordinate Display

The live readout shows X, Y, Width, and Height in pixels as you drag. Typing exact values into these fields positions the crop box precisely — useful for cropping the same region across multiple screenshots in a QA batch without eyeballing the position each time.

PNG Output Preserves Transparency

Cropping a PNG with transparent areas preserves the alpha channel in the output file. This is important for UI element captures with rounded corners, icons with transparent backgrounds, and design component screenshots intended for further compositing inside a design tool or presentation deck.

Lossless Crop

The Canvas draws only the selected region from the source pixels — there is no re-compression of the cropped area's existing pixels. For JPEG sources, this means the crop does not introduce additional generation loss. For PNG sources, the crop is pixel-exact with no quality change.

100% Browser-Local

Bug-report screenshots may contain production API URLs, user PII, or internal tooling interfaces. The crop runs entirely on Canvas in your tab — nothing is uploaded to any server. Sensitive screenshots stay private regardless of what is visible in the frame.

How to use Image Crop Tool

Upload the image you want to crop — PNG, JPEG, or WebP files are all accepted.
Click and drag anywhere on the image to draw the initial crop rectangle; it appears as an overlay with resize handles.
Lock to a common aspect ratio if needed — square for profile photos, 16:9 for banners, 4:3 for slide exports.
Fine-tune the crop box using the resize handles, or type exact values into the X, Y, Width, and Height fields for pixel-perfect positioning.
Use arrow keys to nudge the crop box one pixel at a time when mouse precision is insufficient.
Preview the cropped region in the side panel and click Download as PNG or JPEG.

When to use Image Crop Tool

Cropping a full-page browser screenshot to isolate a specific UI component or modal for a bug report.
Removing the status bar, notch, and home indicator from an iPhone screenshot before submitting it to a project tracker.
Extracting a single person's head-and-shoulders region from a group photo for a profile picture.
Cutting a specific chart or data table out of a dashboard screenshot to include in a presentation slide.
Cropping a product image to a specific aspect ratio for an e-commerce listing that enforces exact dimensions.
Isolating a section of a map, diagram, or annotated document image without opening a full image editor.

Examples

Browser screenshot → element crop

Input: Full-page screenshot: 1920×1080 PNG

Output: Cropped: 480×320 PNG of just the modal dialog, transparent corners preserved

Phone screenshot → status bar removed

Input: iPhone screenshot: 1170×2532 PNG

Output: Cropped: 1170×2391 PNG (top 141 px battery/notch sliced off)

Square crop for avatar

Input: Group photo: 4032×3024 JPEG

Output: Cropped: 1500×1500 JPEG (one person's head and shoulders, locked square aspect)

Tips

Use arrow keys after drawing the crop box to nudge it one pixel at a time — much more precise than mouse drag, especially when the crop edge needs to align exactly with a UI element boundary.
For repeatable crops across multiple screenshots (e.g. cropping the same modal region from QA screenshots), type exact X/Y/W/H values so every crop is identical without eyeballing.
PNG is lossless and preserves alpha; JPEG is lossy and does not — if you crop a JPEG and download as PNG, you get a lossless copy of a lossy region. Choose output format to match your downstream use.
iPhone screenshots always have a status bar at the top and a home indicator at the bottom — crop both off for cleaner presentations and bug reports before sharing.
Lock aspect ratio when cropping for social media avatars and Open Graph images — being even 1 pixel off-spec can cause platforms to re-crop in unexpected ways.

Frequently Asked Questions

How do I crop an image to an exact pixel size?▾

Draw a crop box on the canvas, then type the exact Width and Height values into the dimension fields. The crop box will resize to match. You can also type the X and Y origin coordinates to position it precisely on the image. This is faster than trying to drag the handles to an exact size.

Will cropping reduce image quality?▾

No. The crop operation reads only the selected pixel region from the source and writes it to a new Canvas without re-compressing the pixel values. For JPEG sources, this means no additional generation loss from the crop itself — the output quality matches the source JPEG quality for the cropped region.

Can I lock the aspect ratio while cropping?▾

Yes. Select a preset (square, 16:9, 4:3) from the aspect ratio dropdown before or after drawing the crop box. Once locked, resizing any edge or corner maintains the selected ratio automatically. You can also type a custom ratio like 3:2 or 2:1 for less common dimensions.

Does PNG transparency survive the crop?▾

Yes. When the source is a transparent PNG, the cropped output preserves alpha for every pixel in the selected region. Transparent corners, semi-transparent shadows, and fully transparent areas all come through the crop unchanged.

Can I crop in batches?▾

The current tool is designed for single-image precision crops rather than batch operations. For batch cropping of many images to the same region, note the pixel coordinates (X, Y, Width, Height) from the first crop and apply the same values to subsequent images manually — the coordinate fields accept typed input for repeatability.

How do I crop to a specific aspect like 16:9?▾

Select 16:9 from the aspect ratio preset dropdown. Any resize operation will then maintain the 16:9 ratio automatically. Alternatively, you can calculate the target dimensions yourself (e.g., 1920×1080) and type them directly into the Width and Height fields.

Are my images uploaded?▾

No. The crop uses HTML Canvas entirely within your browser tab. The source image is loaded into a Canvas element locally, the selected region is drawn to a new Canvas, and the result is exported — no file transfer to any server occurs at any point.

What's the maximum image size I can crop?▾

Browser Canvas has memory limits that vary by device and browser — typically images up to 4096×4096 or 8192×8192 work without issues on modern desktops. Very large phone photos (e.g. 12 MP+) may cause slow response on older hardware. If a large image loads slowly, try scaling it down with the Resize tool before cropping.

Explore the category

Glossary

Crop region: The rectangular area selected by the crop box that will be preserved in the output image. Everything outside the crop region is discarded. The crop region is defined by its top-left corner coordinates (X, Y) and its dimensions (Width, Height) in pixels.
Aspect ratio lock: A constraint that forces the crop box to maintain a fixed width-to-height ratio as it is resized. With a 16:9 lock, making the box wider automatically increases the height proportionally, ensuring the output always matches the target aspect ratio exactly.
Bounding box: The minimum rectangle that completely contains a selected object or region. In cropping tools, the bounding box defines the crop region. In image analysis, the bounding box of a detected object defines where cropping should occur to isolate that object from the background.
Lossless crop: A crop operation that reads the selected pixel region from the source without applying any additional compression or quality reduction. The output pixels are identical to the corresponding source pixels — no generation loss is introduced by the crop itself.
Alpha channel: An additional data layer in a PNG image that stores per-pixel transparency values. When cropping a transparent PNG, the alpha channel is preserved in the output so transparent areas remain transparent rather than being filled with white or black.
Pixel-exact: Describing a crop or operation where the output dimensions and pixel values match the specified target to the individual pixel — no rounding, no interpolation, and no partial-pixel approximation. Pixel-exact crops are important when the output must align perfectly with a specific layout grid.