Image Cropper

{{ sourceBadge }} {{ cropFrameBadge }} {{ outputTargetBadge }} {{ formatLabel }} {{ savingBadge }} Quality {{ qualityPct }}%

Source image:

Use PNG, JPEG, WebP, GIF, SVG, BMP, or any browser-readable image.

PNG, JPEG, WebP, GIF, SVG, BMP, or any image your browser can read

Ignored {{ ignoredCount }} extra file(s). This tool processes one image at a time.

Crop preset:

Choose Custom when you want to keep manual ratio and size settings.

Aspect ratio:

Custom ratios accept whole-number pairs such as 4:5 or 1200:630.

Output format:

Auto keeps JPEG, PNG, or WebP source containers; choose an explicit format when size, transparency, or compatibility matters.

Output size:

Use 0 x 0 to keep the crop's native pixels, or set exact dimensions for social and profile assets.

px wide

px high

Quality: {{ resolvedFormat === 'image/png' ? 'Lossless' : `${qualityPct}%` }}

Use 80-92% for most photos; disabled for PNG.

Requested output exceeds the crop's native pixels. This will upscale and may soften details.

Crop rectangle:

Set X/Y from the top-left source pixel and width/height in source pixels; press Enter or leave a field to apply.

X px

Y px

W px

H px

Frame controls:

Use rotate, flip, zoom, or reset; the visible crop box still defines the export.

Position nudge:

Use the arrow controls for small position fixes after dragging the crop rectangle.

Crop export:

Export after the frame, ratio, and output format look correct.

Live previews:

Check compact and circular previews before making avatars or icons.

Avatar circle

Target size:

Use 0 to disable; available only for JPEG and WebP.

JPEG/WebP background:

Pick the matte color for transparent source areas; PNG keeps transparency.

Download image Open image

Field	Value	Note	Copy
{{ r.label }}	{{ r.value }}	{{ r.note }}

Check	Status	Detail	Copy
{{ r.label }}	{{ r.status }}	{{ r.detail }}

Embed:

Customize

Include current inputs

Size

Advanced

Width

Height

Aspect ratio

Max height

Collapsible embed

Allow fullscreen

Referrer policy

Sandbox tokens

Cropping decides which pixels survive, which pixels disappear, and how the remaining image will fit the place where it is used. A good crop is not just a smaller picture. It is a new frame with its own width, height, composition, file format, and quality tradeoffs.

Most image problems that look like "wrong size" are really a mix of two separate choices. The crop rectangle chooses a region inside the source image. The output dimensions decide how many pixels the exported file will contain. A 600 by 600 crop can stay 600 by 600, shrink to 300 by 300, or scale up to 1200 by 1200. The visual subject may look the same in all three, but sharpness, file size, and upload compatibility can change a lot.

Aspect ratio is the shape rule that keeps a crop from drifting. A square avatar, a wide thumbnail, a banner, and a tall portrait can all be made from the same source photo, but each one asks for a different width-to-height relationship. If the ratio is wrong, a destination platform may reject the file, pad it, center-crop it again, or stretch it in a way that makes faces, logos, and text look careless.

A source image crop rectangle rendered into an output canvas and exported as PNG, JPEG, or WebP

Composition still matters after the math is correct. Faces need room inside circular masks, product images need clean edges, and screenshots with text need enough native pixels to stay readable. Upscaling can make an image match a required number of pixels, but it cannot create detail that was not present in the selected crop.

Crop concept	Why it matters
Crop rectangle	Records the exact x and y position plus width and height inside the source image.
Aspect ratio	Keeps the selected frame in the required shape, such as square, widescreen, portrait, or banner.
Output pixels	Set the exported file's pixel dimensions after the crop is rendered.
Format and quality	Control transparency, compression artifacts, and final file size without changing the crop rectangle.

The safest workflow is to separate framing from delivery. First choose the part of the image that should remain. Then check whether the output size, format, transparency, and file budget fit the destination. That separation prevents a common mistake: judging a crop only by how it looks in the preview while missing that the final file is too large, too soft, or the wrong shape for the upload slot.

How to Use This Tool:

Start with the source image, then work from shape to pixels to export checks. The demo image can be used for a cold start, but your own image can be dropped, pasted, or selected with the file picker.

Use Source image to drop, paste, or browse for one image. The page accepts common browser-readable image files such as PNG, JPEG, WebP, GIF, SVG, and BMP; extra dropped files are ignored because the crop workspace handles one image at a time.
Choose Crop preset when you need a common social, thumbnail, avatar, banner, or icon size. Leave it on Custom when you want to control the ratio and output pixels yourself.
Set Aspect ratio. Use Free for an unconstrained rectangle, Original to follow the source image, one of the built-in ratios, or Custom with your own width-to-height pair.
Set Output format, Output size, and Quality. PNG keeps the quality slider disabled because the export is lossless, while JPEG and WebP use the quality value for compression.
Open Advanced only when you need a JPEG or WebP file-size goal or a background color for transparent source areas. Use 0 KB to turn the target-size search off.
Adjust the Crop rectangle by dragging the frame or by typing X, Y, W, and H source-pixel values. The rotate, flip, zoom, nudge, center, and reset controls help align the visible frame without guessing the final rectangle.
Watch the Live previews, especially the circular preview for avatars and icons. If an upscaling warning appears, the requested output is larger than the selected source pixels and may look softer.
Press Crop and export, then review Cropped Image, Crop Geometry, Export Checks, and JSON before downloading or copying anything.

If the image fails to load, choose a file your browser can decode. If the exported shape is not what you expected, check whether only one output dimension was set, whether a preset changed the aspect ratio, or whether the typed crop rectangle was clamped to fit inside the source image.

Interpreting Results:

The most important result is the relationship between Crop Rectangle and Output Dimensions. The crop rectangle tells you which source pixels were used. Output dimensions tell you the size of the final canvas. When output dimensions are larger than the crop rectangle, the image can meet a required pixel count while losing sharpness.

Use Native Pixel Fit as the main sharpness check. A Pass means the export does not exceed the selected source pixels. A Review status means the crop is being enlarged. That is sometimes acceptable for soft background photos, but it is risky for faces, logos, screenshots, and text.

Result cue	Trust it for	Do not overread it as
Crop Geometry	Repeating the same source-pixel crop in another workflow.	A promise that the exported image will be accepted by every destination.
Target Shape	Checking whether the export used exact requested dimensions or derived one side.	A composition check; use the preview for face, logo, and edge clearance.
File Budget	Seeing whether JPEG or WebP compression came near the requested KB target.	A guarantee that compression can solve a strict upload limit.
Format Choice	Confirming transparency and compression behavior for PNG, JPEG, or WebP.	A quality score; inspect the exported image for visible artifacts.
Local Processing	Confirming the crop and export were performed in the browser.	A replacement for normal care with downloaded or shared sensitive files.

For upload work, compare Output Dimensions, Output Size, and Format against the destination's requirements. For design handoff, copy the Crop Rectangle row and keep the source file unchanged so the same coordinates still point to the same pixels.

Technical Details:

Raster cropping is a rectangle-to-canvas transformation. The source image has a natural pixel grid. The crop rectangle selects a bounded region on that grid, then the export canvas draws that region into a destination width and height. If the destination size equals the crop rectangle, no scale change is needed. If the destination is smaller or larger, the browser resamples the pixels.

The rectangle uses an origin at the top-left of the source image. X increases to the right, Y increases downward, and width and height are measured in source pixels. Values outside the image bounds are clamped before export, so a typed rectangle cannot extend beyond the available source pixels.

Formula Core:

The crop shape, derived dimensions, source-area coverage, and scale factors are the core quantities to audit when an exported image looks wrong.

Aspect ratio

r = \frac{crop width}{crop height}

Derived height

output height = \frac{output width}{r}

Crop area share

crop percent = \frac{crop width \times crop height}{source width \times source height} \times 100

Scale factors

s_{x} = \frac{output width}{crop width}, s_{y} = \frac{output height}{crop height}

For example, a crop rectangle of 1200 by 630 has an aspect ratio of 1.9048. If the requested output width is 600 and the output height is left unset, the derived height is about 315 pixels. Both scale factors are 0.50, so the export is a downsampled version of the selected region.

Transformation Core:

Stage	Rule	Practical effect
Source decode	The browser decodes the selected image and exposes its natural width and height.	Unsupported or damaged files stop before a crop can be framed.
Crop rectangle	X, Y, width, and height are rounded to whole source pixels and kept inside the source bounds.	Typed geometry remains repeatable and cannot select pixels outside the image.
Aspect lock	Free crops have no fixed ratio; preset, original, and custom ratios constrain the rectangle shape.	The exported shape stays aligned with the intended destination.
Canvas sizing	Two requested dimensions are used exactly; one missing side is derived from the crop ratio; two zero values keep native crop pixels.	Leaving a side at zero is useful when the ratio matters more than an exact pixel count.
Encoding	PNG is lossless for normal canvas export; JPEG and WebP use lossy quality when compression is requested.	Format changes file size, transparency behavior, and compression artifacts, not the chosen source rectangle.
Target-size search	JPEG and WebP quality can be adjusted toward a requested KB budget.	Highly detailed images or oversized dimensions may still exceed the budget.

Format Notes:

PNG is the safest choice for transparent images, screenshots, line art, and graphics with sharp edges. JPEG is widely accepted for photographic images but can introduce visible artifacts around text and hard edges. WebP often compresses photographs and mixed graphics more efficiently, but the destination must accept WebP files. Animated and vector source files are exported as a still raster crop, so animation and editable vector structure should not be expected in the downloaded result.

Privacy and Accuracy Notes:

Cropping and encoding run in the current browser session. The selected image does not need to be uploaded to a server for the crop, preview, geometry table, or export file to be produced. Normal page assets may still load over the network, and the downloaded result can become sensitive once it is saved, synced, emailed, or shared.

Local processing does not remove private content from the exported crop; inspect the visible edges before sharing.
Canvas export can omit or rewrite metadata, so do not rely on the crop to preserve camera, geolocation, color-profile, or editing metadata.
Upscaled output can satisfy a pixel requirement while reducing visible sharpness.
JPEG and WebP file sizes depend on image detail, dimensions, and browser encoding behavior, so target-size results are approximate.

Worked Examples:

Profile avatar

A 2400 by 1600 portrait is framed with the Avatar preset. The Crop Rectangle lands at 1120 by 1120 source pixels, and Output Dimensions show 512 by 512. Native Pixel Fit passes because the export is smaller than the selected source region, and the circular preview catches whether hair, shoulders, or a logo mark will be clipped.

Open Graph preview

A 3000 by 2000 product image is cropped to 1200 by 630. Target Shape reports Exact when both output dimensions are set, while Format Choice shows Compressed for an 88% WebP export. If Output Size is still too high, lowering dimensions usually helps more than pushing quality too low.

Soft banner warning

A small 900 by 300 header crop is exported as 1500 by 500. Native Pixel Fit changes to Review because both output sides are larger than the source crop. The file may upload correctly, but text and logo edges should be rechecked or recropped from a larger source image.

FAQ:

Why did only one output dimension change?

When only width or only height is set, the missing side is derived from the crop ratio. Set both output dimensions when a destination requires an exact canvas size.

Why does the export look softer than the preview?

Softness usually comes from upscaling. Check Native Pixel Fit; a Review status means the exported canvas is larger than the selected crop pixels.

Which format should I choose?

Use PNG for transparency, screenshots, icons, and crisp graphics. Use JPEG or WebP for photos when file size matters, then inspect the exported image for compression artifacts.

Why can a small target size still fail?

The target-size option adjusts JPEG or WebP quality, but it cannot always overcome large dimensions or detailed image content. Reduce the output dimensions or simplify the crop if File Budget remains Over.

What happens to GIF or SVG input?

The browser-readable image is rendered for cropping, then exported as PNG, JPEG, or WebP. Animated GIFs become a still crop, and SVG files become raster pixels in the downloaded output.

Is my image uploaded?

The crop and export are produced in the browser. Treat the downloaded file carefully afterward, especially if it is saved to a synced folder or sent to someone else.

Glossary:

Aspect ratio: The width-to-height relationship that defines the crop shape.
Crop rectangle: The selected source-image region described by X, Y, width, and height.
Native pixels: The original source pixels inside the crop rectangle before any output scaling.
Output dimensions: The final pixel width and height of the exported image file.
Upscaling: Exporting the crop at larger pixel dimensions than the selected source region.
Lossy compression: File-size reduction that can introduce visible artifacts, used by JPEG and many WebP exports.

References:

CanvasRenderingContext2D: drawImage() method, MDN Web Docs, September 25, 2025.
HTMLCanvasElement: toBlob() method, MDN Web Docs, February 12, 2026.
Image file type and format guide, MDN Web Docs, April 7, 2026.
Using files from web applications, MDN Web Docs, September 18, 2025.