Image & Photo

Image Cropper

Drop in a photo and crop it with one of twelve aspect presets — Instagram square, 9:16 story, 16:9 YouTube thumbnail, Facebook cover — or freeform. Drag the rectangle, resize from any corner, then export at full source resolution as JPG, PNG, or WebP.

Drop or click to upload an imageJPG, PNG, WebP, GIF, BMP, AVIF — up to 25 MB

Cropping happens in your browser. The image is decoded, masked, and re-encoded locally — nothing is uploaded.

Drag the crop rectangle to reposition it. Drag any corner to resize. The rule-of-thirds grid helps with composition.

What is an image cropper?

An image cropper trims a photo down to a target rectangle — useful for fitting an image to a specific aspect ratio, removing dead space at the edges, or focusing the composition on a subject. The tricky part for most people isn't choosing what to crop, it's getting the dimensions right: Instagram wants a 1:1 square or a 4:5 portrait, Stories and Reels want 9:16, YouTube thumbnails want 16:9, Twitter cards want 16:9, Facebook cover photos want 820×312, and a freeform crop wants whatever your editorial eye says. This cropper bundles the common aspect-ratio presets so you don't have to remember the numbers, and exports at the full source resolution so the output isn't softer than the input.

How to crop an image

1
Upload your image
Drop a JPG, PNG, WebP, GIF, BMP, or AVIF file onto the upload area, or click to pick from your device. The image renders below with a default crop rectangle covering 80% of the frame, centered.
2
Pick an aspect ratio
Click any preset chip — Free for unconstrained, 1:1 for square, 9:16 for stories, 16:9 for thumbnails, 4:5 for Instagram portrait, or platform-specific presets like IG Post, IG Story, YouTube, Twitter, and FB Cover. The crop rectangle snaps to the new ratio.
3
Drag and resize the crop
Drag the rectangle to move it, or grab any of the four corner handles to resize. When an aspect preset is active, the rectangle stays locked to that ratio while you resize. The rule-of-thirds grid overlay helps with composition.
4
Pick an output format and quality
Choose JPG (smaller, lossy, best for photos), PNG (lossless, best for graphics with sharp edges), or WebP (smaller than JPG at the same quality). For JPG and WebP, drag the quality slider; PNG is always lossless.
5
Download the crop
Click Download crop. The browser draws the cropped region from the original-resolution image to a fresh canvas at exactly the crop's pixel dimensions, encodes it, and triggers a download with the dimensions in the filename.

How browser cropping works

1. Decode the source file with new Image() — the browser handles JPG/PNG/WebP/GIF/BMP/AVIF natively.
2. Render the source via <img> at object-fit: contain inside an aspect-locked container.
3. The crop rectangle is stored in source-resolution pixels (x, y, w, h), not preview pixels.
4. On drag/resize, pointer deltas are scaled by source.width / preview.width to map preview → source.
5. On export, draw to a fresh canvas: ctx.drawImage(img, x, y, w, h, 0, 0, w, h).
6. Encode via canvas.toBlob(format, quality) and trigger a download.

Storing the crop in source-resolution coordinates (rather than preview coordinates) is the key detail — it means the output is exactly as sharp as the original file in the cropped region, with no resampling. The preview can scale freely with the page width, the crop rectangle visually scales with it, but the underlying numbers are always in source space. drawImage's 9-arg form lets us pull a specific source-rect onto a destination canvas of the same dimensions, which produces a 1:1 pixel copy of the cropped region.

Reference: MDN — CanvasRenderingContext2D.drawImage

Common crop jobs

Goal	Recommended preset
Square Instagram post from a landscape photo	Pick IG Post (1:1). Drag the rectangle to keep your subject in the safe zone — Instagram's UI overlays parts of the corners. 1:1 looks tight on most landscape photos — consider 4:5 for a more compositionally generous portrait crop.
Vertical Story or Reel from a landscape video still	Pick IG Story (9:16). Resize the crop to focus on the subject — vertical compositions usually need to lose the sides. 9:16 is also Reels, TikTok, YouTube Shorts, and Snapchat.
16:9 YouTube thumbnail at 1280×720	Pick YouTube (16:9). Drag a tight crop around the subject and download as JPG at 90+ quality. If the source is smaller than 1280×720, the crop won't upscale — use a higher-res source for thumbnails.
Twitter post or LinkedIn share image	Pick Twitter (16:9). Compose with text-safe margins; both platforms can crop slightly on different surfaces. 16:9 also works for most desktop blog hero images.
Profile / avatar from a wider shot	Pick 1:1, drag a tight crop centered on the face. Export as PNG if the avatar will overlay a transparent UI. Most platforms further crop avatars into a circle — keep your subject away from the corners.
Facebook page cover photo	Pick FB Cover (820×312 ratio). Mind the page-info overlay on the bottom-left and the profile-pic overlay on the bottom-right. Facebook re-renders cover photos for mobile — keep the focal point centered.
Print 4×6 photo from a larger digital file	Pick 3:2. Compose, then export as PNG or JPG at high quality and send to a print shop. 3:2 is also 35mm camera native — landscape and portrait both work.

When to use a cropper with aspect presets

Resize a single photo to fit Instagram, Story, YouTube, Twitter, or Facebook layouts without leaving the browser.
Reframe a landscape photo as a portrait for a phone wallpaper or vertical hero section.
Trim dead space from a screenshot before pasting it into a doc or issue tracker.
Generate a square avatar from a wider portrait shot — pick 1:1, drag a tight head crop.
Build a banner image at a custom aspect ratio (16:9 for a blog hero, 3:1 for a twitter banner).
Crop a print-ready 3:2 or 4:3 photo from a phone shot before sending to a photo lab.
Cut a thumbnail for a video file at a specific aspect ratio without opening Photoshop.

Related tools

Background Remover

Cut out the subject from any photo with on-device AI — no upload required.

Image Compressor

Shrink JPG, PNG, or WebP files in your browser with an interactive quality slider.

Photo Editor

Adjust, filter, rotate and crop photos in the browser — no uploads, no watermark.

Meme Maker

Compose memes and screenshot collages with real layers — paste, drag, crop, caption, export.

Frequently asked questions

Does the crop downscale my image?

No. The export canvas is sized to exactly the crop rectangle's source-resolution dimensions, and drawImage copies the cropped region 1:1 with no resampling. JPG and WebP encoding apply lossy compression, but the pixel dimensions are unchanged. PNG is fully lossless.

Why does the rectangle snap when I switch aspect ratios?

Each aspect preset locks the rectangle's width-to-height ratio. Switching presets re-fits the existing rectangle to the new ratio while keeping it centered on the same area. Pick Free if you want the previous rectangle preserved exactly.

Can I crop to a specific pixel dimension (e.g. exactly 1080×1080)?

Pick the matching aspect preset (1:1 for 1080×1080) and drag the corner until the size readout shows the target. The X/Y/Width/Height stats update live as you drag, so you can hit exact numbers. The output filename includes the final dimensions for verification.

Why is my Facebook cover preset 820×312 instead of 1640×624?

The preset is a ratio, not a fixed pixel size — it accepts any rectangle with that aspect. Drag the corner until your width hits the dimension you want; 1640×624 (Facebook's recommended retina size) and 820×312 (the legacy size) share the same ratio, so both fit the preset.

Are my images uploaded?

No. Decoding, cropping, and re-encoding all happen in your browser. The image bytes never leave the page. You can verify in the network tab — no requests fire when you upload, drag, or download.

Why doesn't my crop upscale to a larger size?

Cropping by definition shrinks an image — there's no resampling step that would upscale it. If you need a larger output than the crop rectangle can produce, start with a higher-resolution source. Browsers can technically upscale via drawImage's destination size, but that produces a blurry result; this tool stays at source resolution.

What's the difference between crop and resize?

Cropping cuts pixels off the edges of the image — what remains is unchanged in resolution. Resizing keeps the whole image but changes its pixel dimensions (typically downscaling). For Instagram-ready output you usually want both: crop first to the right aspect, then if needed compress to a smaller file size with the Image Compressor.

Last updated: 2026-04-29

What is an image cropper?

How to crop an image

Upload your image

Drop a JPG, PNG, WebP, GIF, BMP, or AVIF file onto the upload area, or click to pick from your device. The image renders below with a default crop rectangle covering 80% of the frame, centered.

Pick an aspect ratio

Click any preset chip — Free for unconstrained, 1:1 for square, 9:16 for stories, 16:9 for thumbnails, 4:5 for Instagram portrait, or platform-specific presets like IG Post, IG Story, YouTube, Twitter, and FB Cover. The crop rectangle snaps to the new ratio.

Drag and resize the crop

Drag the rectangle to move it, or grab any of the four corner handles to resize. When an aspect preset is active, the rectangle stays locked to that ratio while you resize. The rule-of-thirds grid overlay helps with composition.

Pick an output format and quality

Choose JPG (smaller, lossy, best for photos), PNG (lossless, best for graphics with sharp edges), or WebP (smaller than JPG at the same quality). For JPG and WebP, drag the quality slider; PNG is always lossless.

Download the crop

Click Download crop. The browser draws the cropped region from the original-resolution image to a fresh canvas at exactly the crop's pixel dimensions, encodes it, and triggers a download with the dimensions in the filename.

How browser cropping works

1. Decode the source file with new Image() — the browser handles JPG/PNG/WebP/GIF/BMP/AVIF natively.
2. Render the source via <img> at object-fit: contain inside an aspect-locked container.
3. The crop rectangle is stored in source-resolution pixels (x, y, w, h), not preview pixels.
4. On drag/resize, pointer deltas are scaled by source.width / preview.width to map preview → source.
5. On export, draw to a fresh canvas: ctx.drawImage(img, x, y, w, h, 0, 0, w, h).
6. Encode via canvas.toBlob(format, quality) and trigger a download.

Common crop jobs

Goal	Recommended preset
Square Instagram post from a landscape photo	Pick IG Post (1:1). Drag the rectangle to keep your subject in the safe zone — Instagram's UI overlays parts of the corners. 1:1 looks tight on most landscape photos — consider 4:5 for a more compositionally generous portrait crop.
Vertical Story or Reel from a landscape video still	Pick IG Story (9:16). Resize the crop to focus on the subject — vertical compositions usually need to lose the sides. 9:16 is also Reels, TikTok, YouTube Shorts, and Snapchat.
16:9 YouTube thumbnail at 1280×720	Pick YouTube (16:9). Drag a tight crop around the subject and download as JPG at 90+ quality. If the source is smaller than 1280×720, the crop won't upscale — use a higher-res source for thumbnails.
Twitter post or LinkedIn share image	Pick Twitter (16:9). Compose with text-safe margins; both platforms can crop slightly on different surfaces. 16:9 also works for most desktop blog hero images.
Profile / avatar from a wider shot	Pick 1:1, drag a tight crop centered on the face. Export as PNG if the avatar will overlay a transparent UI. Most platforms further crop avatars into a circle — keep your subject away from the corners.
Facebook page cover photo	Pick FB Cover (820×312 ratio). Mind the page-info overlay on the bottom-left and the profile-pic overlay on the bottom-right. Facebook re-renders cover photos for mobile — keep the focal point centered.
Print 4×6 photo from a larger digital file	Pick 3:2. Compose, then export as PNG or JPG at high quality and send to a print shop. 3:2 is also 35mm camera native — landscape and portrait both work.

When to use a cropper with aspect presets

Resize a single photo to fit Instagram, Story, YouTube, Twitter, or Facebook layouts without leaving the browser.

Reframe a landscape photo as a portrait for a phone wallpaper or vertical hero section.

Trim dead space from a screenshot before pasting it into a doc or issue tracker.

Generate a square avatar from a wider portrait shot — pick 1:1, drag a tight head crop.

Build a banner image at a custom aspect ratio (16:9 for a blog hero, 3:1 for a twitter banner).

Crop a print-ready 3:2 or 4:3 photo from a phone shot before sending to a photo lab.

Cut a thumbnail for a video file at a specific aspect ratio without opening Photoshop.