Skip to main content

Image Cropper

Crop images with preset aspect ratios like 1:1, 16:9, and 4:3 using a visual editor.

Reviewed by · Last reviewed

✂️

Drop an image here or click to upload

Supports JPG, PNG, WebP

How to Use the Image Cropper

  1. Load a photo by dragging it onto the canvas or clicking the file picker. The image is decoded with createImageBitmap so it renders immediately, even for large sources.
  2. Pick an aspect ratio from the preset row: Free, 1:1, 16:9, 4:3, 3:2, or 9:16. "Free" lets you draw any rectangle; the fixed presets constrain both axes of the drag.
  3. Click and drag on the image to paint the crop rectangle. A rule-of-thirds grid overlay snaps into place so you can align a subject at an intersection point, the classic composition guide from photography.
  4. Resize or move the selection by dragging the corner handles or the middle of the rectangle. The pixel width and height update live in the toolbar.
  5. Press "Crop". The tool copies only the selected region into a new canvas via drawImage(source, sx, sy, sw, sh, 0, 0, sw, sh) and offers the exported PNG for download.

What Cropping Actually Does to Your Pixels

Cropping is the friendliest of all image edits from a quality standpoint: it is a lossless operation. The source pixels inside the selection rectangle are copied byte-for-byte into the output, with no resampling, interpolation, or re-encoding of the remaining area. If you crop a 6000x4000 photo to a 3000x3000 square, the resulting three megapixels are the exact same color values they were in the original, just with everything else thrown away.

Under the hood the browser uses the nine-argument form of drawImage, which tells the Canvas 2D context to "take this rectangle from the source and paint it at this rectangle in the destination". Because the source and destination rectangles are the same size, no resampling filter runs. The final PNG is encoded through the browser's DEFLATE pipeline per the W3C PNG specification, preserving alpha if the source had any. The only lossy step in the whole workflow is if you started from a JPEG - those DCT-quantization artifacts are baked into the source and come along for the ride.

When a Crop Is the Right Move

  • Reframing a landscape shot into a 1:1 square for an Instagram feed post without squishing the subject.
  • Cutting a 9:16 vertical slice out of a horizontal photo for Stories, Reels, or TikTok.
  • Removing distracting elements at the edge of a photo (a stray arm, a photo-bomber, a rogue traffic cone).
  • Extracting a 16:9 hero image for a blog post or YouTube thumbnail from a taller source.
  • Tightening a portrait so the subject fills more of the frame - the classic "zoom with your feet, except afterwards".
  • Producing a 3:2 crop to match the native sensor ratio of a DSLR for prints at standard photo-lab sizes.

Composition and Cropping Pitfalls

  • Cropping too tight for reuse. If you aggressively crop a social-media export, you cannot go back and recover the cut-off pixels later. Keep an uncropped master in your library.
  • The rule-of-thirds trap. The grid is a starting point, not a law. Centered compositions and symmetrical subjects often look better without forcing a subject onto a third line.
  • Platform safe zones. Instagram covers part of a vertical video with the caption and profile overlay; YouTube places the timestamp bug on thumbnails. Crop with those overlays in mind or your subject gets hidden.
  • Aspect ratio vs. resolution. A 1:1 preset gives you a square, but a 200x200 crop and a 2000x2000 crop are both square. Check the pixel dimensions before exporting for a use case that cares about resolution.
  • Rotated camera photos. Phone images often carry an EXIF "Orientation" tag. Because the canvas preview draws the raw pixel grid, a shot captured in portrait mode with orientation=6 can look sideways. Rotate first using the Flip & Rotate tool, then crop.

Why Aspect Ratios Matter

Aspect ratios trace back to physical film: the 35mm still camera standardized 3:2, while cinema used Academy ratio 4:3 and later widescreen 16:9. Modern displays and sensors are built around those legacy ratios, which is why phones fight with laptops over what "full screen" means. For the web, the CSS aspect-ratio property lets you reserve layout space before an image loads, eliminating the cumulative layout shift metric that Core Web Vitals penalizes. Cropping to a fixed ratio on the way in guarantees the browser can lay out a responsive grid without reflow. Social networks publish their own exact pixel and ratio specs: Instagram 1:1 square feed, 4:5 portrait feed, 9:16 Stories; YouTube 16:9 thumbnails; Twitter/X 16:9 inline, 3:1 headers. Matching the target platform ratio at export time avoids the platform doing its own (usually worse) crop server-side.

Browser Cropper vs. Desktop Editors

A full editor like Photoshop, Affinity Photo, GIMP, or Photopea gives you non-destructive crops - you can adjust later, or even uncrop - plus content-aware fill, perspective crops, and integration with layer masks. For a one-shot "cut it down and post it", the overhead of opening those apps is out of proportion to the task. The browser cropper is 200 ms from drag-in to download and never touches a server. On the command line, magick input.jpg -crop 1080x1080+500+300 output.jpg is unbeatable for batching identical crops across a folder, and ffmpeg -vf crop=1080:1080:500:300 handles video frames. Use the browser for quick visual crops, a full editor when the crop is part of a larger retouch, and the CLI when you are cropping fifty files the same way.

Frequently Asked Questions

Is cropping truly lossless, or does the tool re-encode the image?

The pixel data inside the crop rectangle is copied byte-for-byte - no resampling runs, because the source and destination rectangles are the same size in the Canvas <code>drawImage</code> call. However, the output is encoded as PNG, so if your input was JPEG, you end up with a PNG that contains the original JPEG artifacts but no new compression loss. The file will typically be larger than the source because PNG does not do the lossy DCT compression JPEG does.

Why did my cropped file end up larger than the original JPEG?

Because PNG is a lossless format and JPEG is lossy. A 4 MB JPEG contains heavily compressed photo data, and when you extract a portion and re-save it as PNG, the lossless encoder cannot shrink photographic noise nearly as efficiently. For photos, run the result through the Image Compressor or Image Format Converter to get back to a reasonable size.

What does the rule-of-thirds grid actually do?

It is purely a visual guide - the grid is drawn on the preview canvas but is not saved into the exported image. The composition principle goes back to 18th-century painting theory: placing the subject at the intersection of the gridlines (rather than dead center) creates more visual tension and guides the eye. Portrait photographers often align eyes along the upper third line.

Can I get an exact pixel-precise crop rectangle?

The drag interaction reports width and height in whole pixels, so in practice yes. If you need millimeter-level control for a print job, crop roughly here and then pass the result through a dedicated tool with numeric-entry fields, or use the ImageMagick command-line crop with <code>-crop WxH+X+Y</code> for exact coordinates.

Does the 1:1 preset give me the same pixels as Instagram?

It gives you a perfect square at whatever resolution you select, but Instagram re-encodes every upload at around 1080 px wide and applies its own compression. If your crop is 2000 x 2000, Instagram will downsample it; if your crop is 500 x 500, Instagram may upscale it and soften the result. Exporting at exactly 1080 x 1080 is the sweet spot for the feed.

Is the image sent to a server while I draw the crop rectangle?

No. The image is decoded locally into an ImageBitmap and painted onto a canvas element in your tab. None of the crop coordinates, pixel data, or metadata is transmitted over the network. You can watch the DevTools network panel stay empty during the entire interaction, including the export click.

What happens to EXIF GPS data and camera info after I crop?

All EXIF metadata is stripped. The canvas pipeline re-encodes the output from raw RGBA pixels, which contain no provenance information, so camera model, exposure, GPS coordinates, and the original shot timestamp are lost. From a privacy standpoint this is a feature - screenshots of phone photos no longer leak your home address through GPS.

Can I crop animated GIFs and keep the animation?

No. The canvas only sees the first frame, so the output is a still image. To crop an animated GIF while keeping the animation, use ezgif.com, an ffmpeg command like <code>ffmpeg -i in.gif -vf crop=W:H:X:Y out.gif</code>, or gifsicle on the command line.

How do I crop with a non-standard ratio like 21:9 for an ultrawide banner?

Select the "Free" preset and draw your rectangle, then check the pixel dimensions in the toolbar to confirm the ratio. If you need the ratio enforced, do the math once (21/9 is about 2.333) and type your target width, multiply to get height, then use the Image Resizer to lock that ratio on the exported file.

Why does cropping feel snappier than in Photoshop?

There is no non-destructive edit history to maintain, no color profile conversion, and no layered document format to serialize. The tool just copies a rectangle of pixels into a new canvas and hands you a PNG. That simplicity is also the tradeoff: you cannot un-crop later or adjust the boundary without starting over from the original file.

More Image Tools

Base64 to Image Converter

Decode a Base64 string or data URL back into a viewable image and download it as PNG, JPG, WebP or GIF. Runs in your browser.

Open tool

Favicon Generator

Generate favicons in all standard sizes (16x16 to 512x512) for websites and PWAs.

Open tool

Image Blur & Pixelate

Apply blur or pixelation effects to images with adjustable intensity.

Open tool

Image Color Picker

Upload an image and pick colors in HEX, RGB, and HSL with a visual color history.

Open tool

Image Compressor

Compress images by adjusting quality to reduce file size without losing visual clarity.

Open tool

Image Flip & Rotate

Flip images horizontally or vertically and rotate by 90, 180, or 270 degrees.

Open tool