Image Cropper

Crop, rotate, and resize images with preset aspect ratios — all locally in your browser with no quality loss.

Last updated: March 25, 2026

Select an Image

Drag and drop or click to upload

Client-Side Processing

Input Data Stays on Device

Instant Local Execution

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is Image Cropper?

Image cropping is one of the most fundamental photo editing operations — selecting a rectangular region of interest and discarding everything outside it. Whether you are creating a profile picture that must be square, a YouTube thumbnail at exactly 16:9, a product image matching a platform's aspect ratio specification, or simply removing an unwanted background element, cropping adjusts both the composition and the dimensions of an image.

Unlike cloud-based photo editors, this tool processes images entirely within your browser using the HTML5 Canvas API — there is no upload, no server, and no processing delay. The tool supports free-form cropping (drag any corner or edge), aspect-ratio locked cropping (1:1 for profile photos, 16:9 for banners, 4:3 for prints), rotation in 90° increments, horizontal and vertical flip, and zoom for precise alignment. The downloaded output file is the full-quality cropped region, not a screenshot.

How to Use Image Cropper

Click "Select Image" or drag and drop a JPG, PNG, WebP, or GIF file into the drop zone

Choose your crop mode: Free (drag freely), or select a preset ratio (1:1, 16:9, 4:3, 3:2)

Drag the handles on the crop selection box to adjust the area of interest

Use rotation buttons to rotate 90° left or right if the image orientation is wrong

Click "Download Crop" — the file is saved directly to your device in the original image format

Common Use Cases

Creating a 1:1 square profile photo for LinkedIn, Twitter/X, GitHub, or Gravatar
Cropping a product photo to a standard e-commerce format (usually 1:1 or 4:3)
Generating a 16:9 YouTube thumbnail from a wider screenshot or photo
Trimming whitespace or unwanted background elements from a screenshot for documentation
Extracting a signature or stamp from a scanned document image (PNG/JPG)
Preparing a banner image for a Shopify store header or Etsy shop cover photo
Cropping a long-form photo to 9:16 for an Instagram Story or TikTok first frame
Removing a private background from a screenshot before sharing for support or documentation

Example Input and Output

Profile photo example — cropping a rectangular photo to a perfect 1:1 square:

Starting image

Original: wide-photo.jpg
Dimensions: 1920 × 1080 px
Aspect ratio: 16:9 (landscape, too wide for profile use)

Crop Mode: 1:1 (Square)
Crop selection: centered on face, 1080×1080 px region

Cropped result

Result: wide-photo-cropped.jpg
Dimensions: 1080 × 1080 px
Aspect ratio: 1:1 ✓
File format: JPEG (same as input)
Quality: Full — no re-encoding artifacts (canvas renders at full quality)

Total Privacy

Your images are processed exclusively using the browser Canvas API. No file data is transmitted across any network. The tool functions fully offline.

Platform Aspect Ratios

Common required aspect ratios by platform: Instagram feed (1:1 or 4:5), Instagram Stories/TikTok (9:16), YouTube thumbnail (16:9), Twitter header (3:1), LinkedIn banner (4:1), Facebook cover (2.37:1), Etsy listing (4:3 or 1:1). Use the preset ratio buttons to lock the crop selection to these exactly.

EXIF and Metadata

The download will preserve most image metadata (EXIF) from the original file. However, the rotation EXIF tag is normalized to 0° (orientation applied visually via canvas rotation, not stored as metadata). This ensures your cropped image displays correctly on all devices and platforms without requiring EXIF-aware rendering.

Frequently Asked Questions

Does cropping reduce the image quality?

Cropping itself does not reduce quality — it simply selects a sub-region of the original pixels. However, the Canvas API re-encodes the image when exporting a JPEG, which applies a second round of JPEG compression. The default quality is very high (95%) to minimize this. PNG and WebP outputs are lossless format — there is no quality degradation at all.

What image formats does this support?

The tool supports all common web image formats: JPEG (.jpg, .jpeg), PNG (.png), WebP (.webp), GIF (.gif — static first frame only), and BMP (.bmp). The output is downloaded in the same format as the input. Note: transparent PNGs preserve transparency through the crop operation.

Can I crop to an exact pixel size?

Yes. After setting your crop selection visually, you can type exact pixel dimensions into the Width and Height fields (e.g., 800 × 600). The crop box updates to match. Combined with a locked aspect ratio, you can target any exact output resolution required by a specific platform or print size.

Why does my image appear rotated after upload?

JPEG images can contain EXIF metadata that records the camera rotation angle (Orientation tag). Many devices record photos in landscape-sensor orientation but store Exif:Orientation=90° to indicate they should be displayed rotated. Browsers inconsistently honor this metadata. If your image appears sideways, use the rotation buttons to correct it before cropping.

Does this work on mobile browsers?

Yes. The Canvas API and drag interaction are both supported on mobile browsers (Safari/iOS, Chrome/Android). Touch events are supported for the crop handle dragging. However, very large images (>20MP) may cause memory issues on older mobile devices with less RAM — for those, reduce the image size first using the Image Resizer tool.

Is my image uploaded anywhere?

No. The FileReader API loads your image file into browser memory directly. All Canvas operations (draw, crop, rotate, export) happen locally. Your photo never leaves your device. This is especially important for sensitive images like ID documents, medical scans, or confidential screenshots.

How This Tool Works

The uploaded image file is read via the FileReader.readAsDataURL() API and drawn to a full-resolution off-screen Canvas element. The crop selection UI overlays an SVG/div drag interface on top of the canvas preview. When the user clicks "Download Crop", the crop region coordinates (x, y, width, height) are used to call ctx.drawImage(sourceCanvas, cropX, cropY, cropW, cropH, 0, 0, outputW, outputH) into a new output Canvas. The output canvas is then converted to a Blob using canvas.toBlob(callback, mimeType, quality) and served as a downloadable link via URL.createObjectURL().

Technical Stack

HTML5 Canvas APIFileReader.readAsDataURL()Canvas.drawImage() cropURL.createObjectURL()Client-side only