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:

Use PNG for transparent assets; use JPEG or WebP when file size 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: {{ format === '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 }}

Export to PDF Fullscreen

Embed:

Customize

Include current inputs

Size

Advanced

Width

Height

Aspect ratio

Max height

Collapsible embed

Allow fullscreen

Referrer policy

Sandbox tokens

Image cropping is the choice of which pixels stay visible and which pixels are removed. The same photo can work as a square avatar, a wide video thumbnail, a tall social post, or a link preview only when the crop frame matches the space where the image will appear.

Source image crop rectangle turning into a target output file

Good crops solve two problems at once. They keep the subject, logo, or screenshot detail inside the visible frame, and they produce a file whose shape and pixel dimensions match the destination. A photo that looks balanced at 3:2 can feel cramped at 1:1, while a banner crop may need extra space on both sides so text or faces do not sit against an edge.

Pixel dimensions matter after the composition is right. Exporting a 512 × 512 avatar from a large portrait is usually harmless because the source contains more pixels than the final square. Exporting a 1500 × 500 header from a small crop can soften detail because the export must invent pixels beyond the selected source area.

File format is the final practical choice. PNG is the safer choice for transparency, screenshots, icons, and hard edges. JPEG and WebP are better fits for photographic crops where smaller files matter, but quality settings can introduce blur, ringing, or blocky texture around text and sharp lines.

Technical Details:

A crop is a source-pixel rectangle. Its top-left corner is measured as X and Y from the source image, and its width and height define the pixels copied into the exported canvas. The crop rectangle can be moved, resized, rotated, flipped, or zoomed before export, but the exported image still comes from the visible rectangle at the moment the crop is rendered.

Aspect ratio is the relationship between crop width and crop height. A 1:1 crop is square, 16:9 is wide, 4:5 is tall, and 120:63 matches a common 1200 × 630 share-card shape. Locking the ratio prevents accidental stretching because the crop box changes size while keeping the same width-to-height relationship.

When only one output dimension is requested, the missing side is derived from the crop ratio. When both output dimensions are requested, the crop is resampled into that exact canvas. This is useful for platform slots that reject the wrong size, but it can reduce sharpness if the requested canvas is larger than the selected source pixels.

Sizing Core

The proportional sizing rule keeps the crop shape intact when only one side is supplied.

output height = requested width \times \frac{crop height}{crop width}

The same relationship works in the other direction when height is supplied and width is left unset. A 1200 × 630 crop has a 120:63 ratio, so entering a width of 600 gives a derived height of 315. Entering both 600 and 300 instead forces the crop onto a 2:1 canvas.

Output dimension rules for image cropping
Output size entry	Export behavior	Best use
`0` width and `0` height	Exports the selected crop at its native crop pixels	Reframing without resizing
Width set, height `0`	Derives height from the crop ratio	Targets that specify width only
Height set, width `0`	Derives width from the crop ratio	Targets that specify height only
Width and height both set	Renders the crop into that exact canvas size	Avatars, thumbnails, banners, icons, and share cards

Format choice changes how the output is encoded. PNG uses the lossless path and preserves transparency. JPEG and WebP use the selected quality value, and transparent or uncovered areas are filled with the chosen JPEG/WebP background color before export. The target-size option for JPEG and WebP runs a bounded quality search, accepts a result within about five percent above the requested kilobyte goal, and falls back to the selected quality when no close candidate is found.

Image crop format behavior
Format	Compression behavior	Transparency behavior	Good fit
PNG	Lossless export; quality and target-size controls do not apply	Transparent areas stay transparent	Icons, screenshots, diagrams, UI crops, and sharp-edged artwork
JPEG	Lossy export using the selected quality or target-size search	Transparent areas receive the selected background color	Photographs that need broad compatibility and smaller files
WebP	Lossy export using the selected quality or target-size search	Transparent areas receive the selected background color in this crop workflow	Web images where file size is more important than legacy compatibility

The exported result is a single raster image. Browser-readable SVG input is rasterized during export, and animated sources should be treated as still-image crops because the output canvas produces one finished image file. Cropping is therefore best for preparing visual assets, not for preserving animation, vector editability, or original image metadata.

Export check fields and meanings
Export check	Meaning	Action when it needs review
`Native Pixel Fit`	Compares requested output size with the selected crop pixels	Use a larger crop, lower the requested size, or accept possible softness
`Target Shape`	Shows whether both requested dimensions were exact or derived	Enter both width and height when a destination requires exact pixels
`File Budget`	Compares exported kilobytes with the optional target size	Lower JPEG/WebP quality, reduce dimensions, or switch format
`Format Choice`	Confirms lossless PNG or compressed JPEG/WebP behavior	Use PNG when transparency or crisp text matters most
`Local Processing`	Confirms the crop and encoding ran in the browser	Keep sensitive source images out of shared devices and clear the tab when done

Everyday Use & Decision Guide:

Begin with the destination, not the source file. Pick a crop preset when the image is headed to a known slot such as Instagram square, Instagram portrait, Instagram landscape, YouTube thumbnail, X header, LinkedIn banner, Open Graph image, Avatar, or App icon. Those presets set both the shape and the requested output pixels, which reduces the chance of making a good-looking crop that still fails the destination size.

Use the Aspect ratio control when the preset list is not the right fit. Original keeps the source shape, fixed ratios such as 1:1 and 16:9 handle common visual frames, and Custom accepts whole-number pairs such as 4:5 or 1200:630. The Crop rectangle fields are useful when a designer or content system gives exact X, Y, width, and height numbers.

Use PNG for transparent assets, UI screenshots, app icons, and crops with small text.
Use JPEG or WebP for photos when a smaller download matters more than exact pixel fidelity.
Set one Output size value when the crop should resize proportionally.
Set both Output size values when the final file must be exact, such as 1280 × 720 or 1200 × 630.
Use Position nudge after dragging when the frame is only a few pixels off.
Check the circular preview before exporting square avatars that will be masked by another site.

The upscaling warning deserves attention. It means the requested output dimensions are larger than the selected crop pixels. A larger export may still be required, but fine hair, small text, product edges, and logo marks can look softer after the browser scales the crop.

After export, read the result tabs before downloading the final asset. Cropped Image shows the finished file, Crop Geometry records the selected source rectangle and output dimensions, Export Checks flags size and format issues, and JSON gives a structured record for handoff or repeat work.

Step-by-Step Guide:

Follow this path when you need a clean crop and an export record you can verify.

Load a source through Source image by browsing, dragging into the drop zone, or pasting an image. The summary changes to show the source dimensions, and the crop workspace appears when the image is ready.
Choose Crop preset when a known destination exists, or use Aspect ratio with Custom ratio values when you need a shape that is not listed.
Set Output format, Output size, and Quality. Quality is active for JPEG and WebP, while PNG shows the lossless path.
Move the crop box visually, then refine it with Crop rectangle X, Y, width, and height fields if exact source pixels matter. Press Enter or leave a field to apply the typed values.
Use Frame controls for rotate, flip, zoom, and reset adjustments. Use Position nudge or Center when the frame needs small alignment changes.
Open Advanced only when you need a JPEG/WebP Target size or a JPEG/WebP background color for transparent source areas.
Click Crop and export. If an alert says the selected file cannot be loaded, choose a browser-supported image such as PNG, JPEG, WebP, GIF, SVG, or BMP and try again.
Review Cropped Image, Crop Geometry, and Export Checks. Download the image when Output Dimensions, Native Pixel Fit, Format Choice, and any File Budget result match the intended use.

Interpreting Results:

Start with Output Dimensions. Those numbers are the finished canvas size, so they are the best check for platform requirements. Crop Rectangle tells you which source pixels were used and where the crop began, which is useful when the same crop must be repeated later.

Next, inspect the image itself. Geometry cannot prove that a face has enough headroom, that a logo keeps its margin, or that screenshot text still reads well. Use the preview and then open the downloaded file once, especially for JPEG and WebP exports.

Native Pixel Fit set to Review means the export is larger than the selected crop and may look softer.
Target Shape set to Derived means one or both output dimensions came from the crop ratio instead of exact requested pixels.
File Budget set to Over means the approximate target-size search did not keep the finished file within the requested kilobytes.
Output Size is the actual finished blob size, not an estimate from the source file.
Copy URL copies a temporary browser object URL for the current session, not a hosted asset link.

A smaller file is not automatically a better crop. If a PNG screenshot becomes a much smaller JPEG but the text turns fuzzy, the size improvement is not worth the visual loss.

Worked Examples:

Square avatar from a portrait photo

A 3024 × 4032 portrait needs a profile image. Choose Avatar, which sets a 1:1 crop and a 512 × 512 output target. After centering the face and checking the circular preview, Crop Geometry should show Output Dimensions as 512 × 512 and Target Shape as Exact. Native Pixel Fit should pass if the selected square contains at least 512 pixels on each side.

Share card from a landscape image

A 2400 × 1600 product photo is being prepared for a link preview. Choose Open Graph image to set a 1200 × 630 target, move the crop so the product sits away from the edges, and export as WebP at about 88% quality. Crop Rectangle records the selected source area, while Output Size and File Budget show whether the finished file is small enough for the publishing workflow.

Screenshot crop that should stay sharp

A 1920 × 1080 screenshot includes small interface labels. Crop only the relevant panel, leave Output size at 0 × 0 to keep native crop pixels, and export as PNG. The Format row should report a lossless export with transparency support if the screenshot contains transparent areas, and Format Choice should show the lossless path.

Troubleshooting a soft banner

A 900 × 300 crop is exported as an X header at 1500 × 500. Native Pixel Fit changes to Review because the target is larger than the source crop. Reframe a larger source area, lower the requested output dimensions, or accept that the banner may look softer after export.

Privacy & File Handling:

Selected images are read and cropped in the browser. The result check named Local Processing confirms that cropping and encoding ran without uploading the source image. The downloaded image, copied JSON, copied CSV, and exported tables are created from the current browser session.

Temporary object URLs are only useful while the current page keeps the generated file in memory. Download the image for anything that must persist, and close the tab or clear the source image before leaving a shared computer.

FAQ:

Why is there already an image in the crop area?

A local demo image is generated when the browser supports it, so the crop workspace can be tested before you choose your own source. Loading or pasting an image replaces the demo.

Which image files can I load?

The source picker accepts browser-readable images, including PNG, JPEG, WebP, GIF, SVG, and BMP. If the browser cannot decode the file, the page shows an error and waits for another image.

Does the crop upload my image?

No tool-specific upload path is used for the crop. The image is read in the browser, cropped in the browser, and exported from the browser session.

Why are Quality and Target size disabled for PNG?

PNG uses the lossless export path here, so JPEG/WebP quality tuning and target-size search do not apply. Switch to JPEG or WebP when approximate file-size control matters more than transparency or lossless output.

What does the upscaling warning mean?

It means the requested output is larger than the selected crop rectangle. The export can still complete, but fine details may soften because the crop has fewer source pixels than the final canvas.

Why does a copied image URL stop working later?

The copied value is a temporary browser object URL tied to the current page session. Download the image when you need a file that works after the tab is closed.

Glossary:

Aspect ratio: The relationship between crop width and crop height, such as 1:1, 16:9, or 4:5.
Crop rectangle: The source-pixel area selected by X, Y, width, and height.
Output canvas: The finished pixel surface that becomes the exported PNG, JPEG, or WebP file.
Native pixels: The original pixels inside the selected crop before any resizing.
Target size: An optional JPEG/WebP kilobyte goal used for approximate quality tuning.
Object URL: A temporary browser address that points to generated file data in the current session.

References:

CanvasRenderingContext2D: drawImage() method, MDN Web Docs, Sep 25, 2025.
HTMLCanvasElement: toBlob() method, MDN Web Docs, Feb 12, 2026.
Image file type and format guide, MDN Web Docs, Apr 7, 2026.