Skip to main content

Free Image Cropper

Crop images with drag-to-select, optional aspect ratio constraints (1:1, 16:9, 4:3, etc.), rule-of-thirds grid, and multi-format export (JPEG, PNG, WebP).

Works offline once loaded

Drop a file here, or click to browse

JPG, PNG, WebP, HEIC, HEIF · processed on your device

or press Ctrl+V to paste from your clipboard

Browse files

Tip: you can paste a screenshot with Ctrl+V

Your files never leave your device. All processing happens locally in your browser.

Common uses

  • Crop Photos for InstagramCrop to Instagram's preferred 1:1 (square), 4:5 (portrait), and 1.91:1 (landscape) aspect ratios.
  • Crop Profile Pictures to SquareMake square profile pictures for LinkedIn, Twitter, GitHub, or any social platform.
  • Crop YouTube and Article ThumbnailsCrop to the 16:9 aspect ratio used by YouTube videos and most blog hero images.
  • Crop Passport / ID PhotosCrop photos to standard 2:3 portrait ratio for passport, visa, and ID applications.
  • Crop E-Commerce Product PhotosStandardize product photo aspect ratios for Amazon, Shopify, Etsy, and other marketplaces.

How It Works

Cropping happens entirely in your browser using the HTML5 Canvas API — no upload, no server. You drag a selection region directly on a canvas element, and when you apply the crop, the browser's built-in 2D rendering engine reads only the selected pixels and re-encodes them to JPEG, PNG, or WebP.

  1. 1
    Image loaded into memory
    Your file is read with URL.createObjectURL(), which hands the browser a local blob URL. An HTMLImageElement decodes the file entirely in the browser tab — the image bytes never leave your device.
  2. 2
    Pointer Events drive the crop selection
    The browser's Pointer Events API (which unifies mouse, touch, and pen input) tracks drags on a canvas overlay. Pressing outside the selection starts a new rectangle; pressing inside moves it; pressing near the bottom-right corner resizes it. Optional aspect-ratio presets (1:1, 16:9, 4:3, etc.) constrain the geometry during dragging.
  3. 3
    Canvas draws the live preview
    On every crop change, the Canvas 2D context redraws the image, applies a dark overlay outside the selection, clears the crop region to show the original image at full fidelity, and overlays a rule-of-thirds grid and a teal resize handle.
  4. 4
    toBlob() encodes and delivers the result
    When you click Crop, a new off-screen canvas is created at the exact crop dimensions. ctx.drawImage() copies only the selected rectangle, and canvas.toBlob() encodes the result using the browser's native JPEG, PNG, or WebP encoder at your chosen quality setting. The output is handed back as a local blob URL for download.

Your image is opened as a local blob URL and processed entirely within your browser tab — nothing is uploaded to any server at any point.

Related Tools

Frequently Asked Questions