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 is a decision about which pixels remain. The crop rectangle removes everything outside the selected frame, while the exported canvas decides how many pixels the remaining image will have. A crop can therefore be compositionally correct and still fail because the final file is too soft, too large, the wrong shape, or the wrong format for the place it will be used.

Most image-sizing problems mix three separate ideas. Aspect ratio describes the frame shape, such as square, portrait, widescreen, banner, or app icon. Source pixels describe the real detail available inside the original image. Output dimensions describe the width and height of the downloaded file after the selected region is rendered. Changing one of those can change the result without changing the others.

Common crop work includes profile photos, product thumbnails, Open Graph previews, social headers, screenshots, icons, and layout images. Each use case has a different tolerance for empty edges, clipped faces, text sharpness, transparency, and compression artifacts. A product photo may survive moderate JPEG compression, but a screenshot with small text usually needs lossless output or more native pixels.

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

Two mistakes are worth avoiding before any export is made. The first is assuming that resizing can recover missing detail. Upscaling can create a larger file, but it cannot add source pixels that were never inside the crop. The second is choosing format only by file size. Transparency, text edges, color detail, and destination support often matter as much as the number of kilobytes.

Image crop concepts and practical consequences
Crop concept	What it controls	Practical consequence
Crop rectangle	The X and Y position plus width and height inside the source image.	Defines which original pixels survive.
Aspect ratio	The width-to-height relationship of the selected frame.	Prevents accidental stretching, padding, or second crops by a destination.
Output dimensions	The final canvas width and height after the crop is rendered.	Controls upload compatibility and whether scaling is needed.
Format and quality	The output container and compression behavior.	Affects transparency, artifacts, and file size without changing the crop coordinates.

A good crop workflow separates framing from delivery. First decide what belongs in the picture. Then decide whether the output pixels, format, quality, transparency handling, and file budget fit the target destination.

How to Use This Tool:

Work from source image to frame shape, then from output pixels to file checks. The crop and export run in the browser, and the workspace handles one image at a time.

Use Source image to drop, paste, or browse for one image. PNG, JPEG, WebP, GIF, SVG, BMP, and other browser-readable image files can be loaded; extra dropped files are ignored.
Choose Crop preset when a common target such as Instagram square, YouTube thumbnail, X header, LinkedIn banner, Open Graph image, avatar, or app icon fits the job. Leave it on Custom when the ratio and output pixels should stay manual.
Set Aspect ratio and Output format. Use an unlocked rectangle for hand framing, Original for the source shape, a built-in ratio for common crops, or Custom for whole-number pairs such as 4:5 and 1200:630.
Set Output size and Quality. A 0 by 0 output keeps the crop's native pixels; one zero side is derived from the crop ratio; two positive values request an exact canvas. PNG ignores the quality slider because the export is lossless.
Adjust Crop rectangle by dragging the frame or by typing X, Y, W, and H source-pixel values. Use rotate, flip, zoom, reset, nudge, and center controls when the visible frame needs small corrections.
Open Advanced if JPEG or WebP should aim for a target KB size, or if transparent source areas need a specific JPEG/WebP background color.
Target size is a compression search for JPEG and WebP only. Use 0 KB to turn it off, and reduce output dimensions if the file remains over budget.
Check Live previews before exporting, especially the circular avatar preview. If the upscaling warning appears, the requested output exceeds the crop's native pixels and may soften faces, text, logos, or screenshots.
Press Crop and export, then review Cropped Image, Crop Geometry, File Checks, and JSON before downloading or copying the result.
If the image fails to load, use a file your browser can decode. If the exported shape is unexpected, check whether a preset changed the ratio or whether one output dimension was left at 0.

Interpreting Results:

The main check is the relationship between Crop Rectangle and Output Dimensions. The crop rectangle reports the source pixels used. Output dimensions report the exported canvas. When output dimensions are larger than the selected crop, the file can meet a pixel requirement while looking softer than the source detail supports.

Native Pixel Fit is the sharpness warning to read first. Pass means the exported canvas does not exceed the selected source pixels. Review means at least one output side is larger than the crop rectangle. That may be acceptable for soft background photos, but it is risky for faces, logos, UI screenshots, diagrams, and small text.

Image crop result cues and what they mean
Result cue	Use it for	Do not overread it as
Crop Geometry	Repeating the same source-pixel crop in another workflow.	A promise that every destination will accept the file.
Output Dimensions	Checking the exact canvas size after native or scaled rendering.	A composition check; use previews for face, logo, and edge clearance.
File Budget	Seeing whether JPEG or WebP compression came near the requested KB target.	A guarantee that quality adjustment can meet a strict upload limit.
Format Choice	Confirming transparency and compression behavior for PNG, JPEG, or WebP.	A visual quality score; inspect the exported image for artifacts.
Local Processing	Confirming crop and encoding happened in the browser.	A reason to skip normal care with downloaded or shared sensitive images.

For upload work, compare output dimensions, output size, and format against the destination's requirements. For design handoff, keep the original source image unchanged so the recorded crop rectangle still points 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 matches the selected region, no scaling is needed. If the destination is smaller or larger, the browser resamples the pixels.

The coordinate origin is the top-left source pixel. X increases to the right, Y increases downward, and crop width and height are measured in source pixels. Typed geometry is rounded to whole source pixels and kept inside the decoded image bounds before export.

Formula Core:

The audit quantities are aspect ratio, derived output size, source-area share, and scale factor. They explain why a visually similar crop can export as a crisp downsample, a native-size file, or a softened upscale.

Aspect ratio

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

Derived side

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 a 1200 by 630 crop, the aspect ratio is about 1.9048. If the output width is 600 and the 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 source pixels.

Transformation Core:

Image crop transformation stages
Stage	Rule	Practical effect
Source decode	The browser decodes the selected image and exposes natural width and height.	Unsupported or damaged files stop before a crop rectangle 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	Preset, original, and custom ratios constrain the crop shape; an unlocked crop lets the rectangle move independently.	The final shape can match a destination without stretching after export.
Canvas sizing	Two positive output dimensions are used exactly; one zero side is derived from the crop ratio; two zero values keep native crop pixels.	Leaving one side at zero is useful when the ratio matters more than an exact pixel pair.
Encoding	PNG exports lossless canvas pixels. JPEG and WebP use quality-based lossy compression, with a background matte for transparent source areas.	Format changes file size, transparency behavior, and artifacts without changing the crop coordinates.
Target-size search	JPEG and WebP quality can be adjusted toward a requested KB budget through repeated encoding attempts.	Detailed images or large dimensions may still exceed the requested size.

Format and Metadata Notes:

PNG is the safest output for transparency, screenshots, interface captures, and sharp-edged graphics. JPEG is widely accepted for photographs but can create visible artifacts around text and hard edges. WebP often compresses photos and mixed graphics efficiently, but the destination must accept WebP. Animated and vector inputs are rendered as a still raster crop for export, so animation frames and editable vector structure should not be expected in the downloaded file.

Privacy and Accuracy Notes:

Cropping, previewing, and encoding run in the current browser session. The selected image does not need to be uploaded to produce the crop, geometry rows, file checks, JSON, or downloaded file. Normal page assets may still load over the network, and the exported image becomes sensitive once it is saved, synced, emailed, or shared.

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

Worked Examples:

Use the result cues to separate composition, pixel fit, and file compatibility.

Profile avatar from a portrait

A 2400 by 1600 portrait can use the Avatar preset to request a 512 by 512 output. If the crop rectangle covers 1120 by 1120 source pixels, Native Pixel Fit passes because the output is smaller than the selected source region. The circular preview is the main check for hair, shoulders, and logo marks near the edge.

Open Graph image with exact dimensions

A 3000 by 2000 product image cropped to 1200 by 630 should show Target Shape as Exact when both output dimensions are set. If the WebP output is still too large, lowering the output dimensions often preserves more visual quality than forcing the quality value very low.

Small banner that looks soft

A 900 by 300 crop exported as 1500 by 500 triggers Native Pixel Fit Review because both output sides are larger than the selected source pixels. The file may upload successfully, but text and logo edges should be checked or recropped from a larger source image.

Transparent source sent to JPEG

A transparent PNG logo exported as JPEG or WebP uses the selected JPEG/WebP background color for transparent areas. If transparency must survive, choose PNG and confirm Format Choice shows lossless transparency behavior.

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; Review 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 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 output dimensions if File Budget remains Over.

What happens to GIF or SVG input?

The browser-readable source 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 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.
Background matte: The color used to fill transparent areas when exporting to JPEG or WebP.

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.