✂️ Image Cropper
Drag a region on your image — fully private, nothing uploaded.
Click or drag & drop an image here
PNG, JPG, WEBP, GIF — stays on your device
How to Crop Images Precisely Using a Browser-Based Cropper (No Upload Required)
Cropping an image sounds simple until you actually need it done right. You want to cut out exactly the subject from a photo, remove distracting edges, or prepare a thumbnail at a specific aspect ratio — but you don't want to install Photoshop, pay for a subscription tool, or upload a private photo to some random server. That's exactly the gap this browser-based Image Cropper fills.
Everything runs locally, inside your browser tab. Your image never leaves your device. And unlike most online tools that give you one drag-and-release interaction, this cropper gives you draggable handles, a rule-of-thirds grid, preset aspect ratios, and pixel-level coordinate input — all working together. Here's how to use every feature.
Step 1: Load Your Image
Open the Image Cropper tool. You'll see a dashed drop zone at the top. You have two ways to load an image:
- Click the drop zone — this opens your system file picker. Browse to your image (PNG, JPG, WEBP, or GIF) and select it.
- Drag and drop — drag any image file directly from your desktop or file manager and drop it into the dashed box.
The moment the image loads, it appears on the canvas below. If your image is wider than the tool's display area, it automatically scales down to fit — but the crop always operates on the original full resolution, not the scaled preview. You'll see a status bar telling you the original dimensions, the display size, and the current scale percentage.
Step 2: Choose an Aspect Ratio (Optional)
Just above the canvas you'll find a row of ratio preset buttons: Free, 1:1, 4:3, 3:4, 16:9, 9:16, and 2:1.
- Free (default) — drag any shape you like, no constraints.
- 1:1 — perfect squares, great for Instagram profile images, avatars, or thumbnails.
- 4:3 — classic landscape photo ratio, suits presentations and print.
- 3:4 — portrait orientation, useful for mobile-first content.
- 16:9 — widescreen video thumbnails, YouTube covers, banner images.
- 9:16 — vertical video format, Instagram/TikTok Stories, Reels.
- 2:1 — ultra-wide panoramic crops, Twitter header images.
When you click a ratio button it becomes highlighted in indigo. From that point on, every crop action — whether you drag on the canvas or resize with the handles — will lock to that ratio. Changing the ratio while a selection already exists immediately re-constrains the existing selection.
Step 3: Draw Your Crop Region on the Canvas
Click anywhere on the semi-transparent overlay covering the image and drag to draw your crop rectangle. As you drag, the area inside your selection clears so you can see exactly what will be kept — the rest remains darkened. A live size label (e.g., "640×360 px") floats just above your selection showing the real pixel dimensions of the crop.
A rule-of-thirds grid appears inside your selection, drawn as faint purple lines dividing the box into nine equal cells. This is the classic composition aid used in photography — align your subject along these lines or at their intersections for a more balanced, professional result.
Step 4: Fine-Tune With Drag Handles
Once you have a rough crop drawn, look for the eight small white square handles around the border — one at each corner and one at the midpoint of each side. Each handle controls a specific direction:
- Corner handles — resize in two directions simultaneously (diagonal resize).
- Side handles — resize in one direction only (horizontal or vertical).
Hover over any handle and you'll see the cursor change to indicate which direction it will resize. Drag it to adjust. If a ratio preset is active, the opposite dimension adjusts automatically to keep the ratio locked.
To move the selection without resizing it, click inside the highlighted crop area and drag. The cursor changes to a four-way move cursor when you're hovering over a moveable region. The selection will stop at the image edges — it can't go outside the image bounds.
Step 5: Enter Pixel-Precise Coordinates
For technical workflows — preparing images for a CMS with exact size requirements, or recreating the same crop across multiple images — the four input fields at the top give you exact control:
- X — left edge of the crop, measured from the left side of the original image in pixels.
- Y — top edge of the crop, measured from the top of the original image in pixels.
- Width — horizontal size of the crop area in original pixels.
- Height — vertical size of the crop area in original pixels.
Type your values and click the Apply button. The crop box on the canvas jumps to exactly those coordinates. The fields also update live as you drag on the canvas, so you can always read back the current selection's pixel coordinates.
Step 6: Crop and Download
Once your selection looks right, click the Crop Image button. The browser crops the original full-resolution image at the specified coordinates using an off-screen canvas, then displays a preview of the result directly below the tool.
Before downloading, choose your output format from the dropdown:
- PNG — lossless, supports transparency; use for logos, screenshots, UI elements.
- JPEG — smaller file size at slight quality cost; ideal for photos, blog images.
- WEBP — modern format with excellent compression and quality; best for web performance.
Click Download and the cropped file saves to your downloads folder immediately. No waiting, no email link, no account required.
Step 7: Reset and Try Again
If you want to start over with a different crop, click Reset Selection — this restores the selection to cover the entire image, so you can draw fresh. To crop a completely different image, just drag a new file onto the drop zone and the tool resets automatically.
Privacy and Technical Notes
This tool uses the browser's built-in Canvas API and FileReader API — both are Web standards available in every modern browser without plugins. Your image data is read into memory in your browser tab and never transmitted anywhere. Even if you are offline, this tool works perfectly.
One thing to be aware of: some browsers restrict what you can do with images loaded from certain origins (a security rule called CORS). Since this tool reads from your local disk via a file picker or drag-and-drop, that restriction does not apply — you always have full access to your own files.
The crop output always reflects the original image resolution. If your 4000×3000 photo was scaled down to 780px wide for display, and you drew a crop covering half the displayed width, the actual crop output will be 2000 pixels wide — matching the original. This ensures you always get maximum quality output regardless of how the image appears on screen.