Image Cropper
Crop images by clicking and dragging to select a region in your browser. Download the cropped result as PNG. No upload — files stay on your device.
Drop an image here or click to browse
PNG · JPG · WebP · GIF · BMP
Related Tools
Base64 → Image
Convert Base64 strings or data URIs back to images instantly. PNG, JPG, WebP, GIF — auto-detects format. No upload required.
Image → Base64
Convert images to Base64 data URIs instantly. Supports PNG, JPG, GIF, WebP, SVG. Files never leave your browser.
Image Compare
Compare two images with a draggable before/after slider in your browser. No upload required.
Image cropping is the process of selecting a rectangular sub-region of an image and discarding everything outside that selection. It is one of the most fundamental image editing operations, used to improve composition, remove unwanted elements from the frame, meet platform-specific dimension requirements, or extract a specific subject from a larger scene. The operation does not alter pixels — it only changes which pixels are included in the output.
Browser-based cropping works by drawing the uploaded image onto an HTML canvas element, recording the user's selection rectangle as pixel coordinates, then using canvas.drawImage() with source region parameters to render only the selected area onto a new canvas of the crop dimensions. The result is exported as a PNG blob and downloaded. Because all operations happen on the canvas API, no image data is sent to any server.
This tool implements free-form drag-select cropping: after uploading an image, the user draws a selection rectangle by clicking and dragging on the preview. The crop dimensions are displayed in real time. Clicking 'Crop & Download' exports the selected region as a PNG file. The canvas-based approach preserves the original image quality within the selected region — there is no re-compression for PNG output.
Common Use Cases
Preparing images for social media platform requirements
Social media platforms impose strict aspect ratio requirements: Instagram posts require 1:1 (1080×1080), Twitter/X cards use 2:1, LinkedIn banners are 1584×396, and TikTok thumbnails are 9:16. Cropping source photos to match these dimensions before upload prevents the platform's automatic cropping from cutting out important content. The tool lets users precisely select the crop region that best fits the target ratio.
Extracting product shots from scene photographs
E-commerce product photographers often shoot products in styled scenes or environments, then crop tightly to isolate the product for use in catalog listings. The crop operation removes background context and produces a clean product image suitable for white-background e-commerce templates. Precise canvas-based cropping preserves full product detail without quality loss.
Isolating evidence or specific regions from screenshots
Support tickets, bug reports, and documentation often require cropping a specific element or error message from a full-page screenshot. Rather than using a full photo editor, a quick crop isolates the relevant region for inclusion in a Jira ticket, Slack message, or email. The browser tool eliminates the need to open Photoshop or GIMP for a simple extraction task.
How to Use
- Drop or click the upload area to open an image from your device.
- Click and drag on the image preview to draw a selection rectangle.
- Adjust the selection by dragging its edges or corners.
- The cropped dimensions are shown below the preview.
- Click Crop & Download to save the cropped image as a PNG.
Common Aspect Ratios
- 1:1 — Square (Instagram posts, profile pictures)
- 4:3 — Traditional photo/monitor ratio
- 16:9 — Widescreen (YouTube, presentations)
- 3:2 — Standard DSLR photo ratio
- 9:16 — Vertical (Instagram/TikTok Stories)
Why Crop?
- Remove unwanted borders, backgrounds, or distracting elements
- Reframe subjects to improve composition
- Meet platform-specific image dimension requirements