DT
DevToolKit
Clearly labeled tools
Tools
Workspaces
Resources
Browse tools
DT
DevToolKit
Practical PDF, image, developer, and everyday tools

Clearly labeled processing for everyday tasks.

Core processing runs in the browser for most tools. Server-backed and external-provider workflows are labeled separately. Basic tools are available without signup; individual limits vary by tool.

46 unique tools4 workspacesNo signup for basic tools
Browse toolsTrust Center
Tools
All toolsPDF workspaceImage studioDeveloper workbenchGeneral tools
Product
BlogSupportContact
Company
AboutTrust CenterPrivacy PolicyTerms of Use

© 2026 DevToolKit. Practical PDF, image, developer, and everyday tools with clearly labeled processing.

In-browserServer-backedExternal preview
amanhirut32@gmail.com

Image Crop

HomeToolsImageImage Crop

Drag and resize the crop box, pick a ratio or exact pixels, choose Original/JPG/PNG/WebP, then export the framed area.

  • No signup
  • Local-first
  • Visual crop

Preparing the editor...

The guide and instructions on this page are available while the tool loads.

Continue your workflow

  • Image ResizerMatch exact output dimensions.
  • Image CompressorReduce file size after cropping.
  • Image ConverterExport in WebP, JPG, or PNG.

Image Crop selects a rectangular region from one supported JPG, PNG, or WebP and exports that area as a newly encoded image. Pixels outside the crop are omitted from the download. It is a framing tool—not a resizer, rotator, background remover, or subject-detection editor.

Upload one image up to 20 MB. Move and resize the crop box (minimum about 20×20 px), use Free or the 1:1, 4:3, 16:9, and 9:16 presets, scroll the mouse wheel to zoom (wheel ratio 0.08), and optionally enter width, height, X, and Y in source pixels. Reset crop area re-fits the current ratio and base zoom. There is no in-tool rotation control and no batch queue.

Export uses Cropper.js getCroppedCanvas, then canvas.toBlob. Output can stay Original or switch to JPG, PNG, or WebP. JPG and WebP quality runs from 60 to 100 (default 90); PNG ignores quality. JPG fills transparent areas with white (#ffffff). Output pixel size follows the rounded crop rectangle in natural image coordinates—not a separate upscale control. Cropper checkOrientation may apply source orientation on load; EXIF, GPS, ICC, DPI, and animation are not deliberately copied. Animated WebP becomes a still crop.

All crop math and encoding stay in the browser. Image bytes are not posted to a crop API. Ordinary website assets may still load. Identified analytics may include sizes, output format, quality, cropped dimensions, and error codes—not filenames, raw pixels, or typed X/Y values.

AVIF, GIF, BMP, HEIC/HEIF, SVG, and TIFF are rejected. Sources above 12,000 px on an edge show a performance warning but can continue. Zooming into a small region can look soft when displayed larger; it does not add true resolution. The interactive Cropper preview can differ slightly from the encoded result—inspect the after-export comparison. Download is {base}-cropped.{ext} with automatic and manual download. Reset clears the workspace and is not a dedicated mid-export cancel control.

Common uses for Image Crop

Typical tasks this tool is built for.

  • Create a square profile picture with the 1:1 preset.
  • Prepare a landscape thumbnail using 16:9 framing.
  • Crop a product image tightly around the subject.
  • Remove unwanted edges from a scan or document photo.
  • Reframe a photo for a presentation slide or header.
  • Prepare a focused image before resizing or compression in a later step.

How to use Image Crop

  1. Step 1. Upload one JPG, PNG, or WebP image up to 20 MB.
  2. Step 2. Drag and resize the crop box, scroll to zoom, and pick Free or a 1:1, 4:3, 16:9, or 9:16 ratio.
  3. Step 3. Optionally enter exact width, height, X, and Y values, or use Reset crop area to re-fit the current ratio.
  4. Step 4. Choose Original, JPG, PNG, or WebP, set quality when exporting JPG or WebP, then Crop image.
  5. Step 5. Review the before/after comparison and use the automatic download or download {base}-cropped again.

Why use this tool?

  • Move and resize a Cropper.js crop box with guides to choose the rectangle you keep.
  • Switch Free, 1:1, 4:3, 16:9, or 9:16 framing, or type width, height, X, and Y in source pixels.
  • Zoom with the mouse wheel to refine framing before export.
  • Export as Original, JPG, PNG, or WebP with JPG/WebP quality from 60 to 100 (default 90).
  • Decode, crop, and encode locally without uploading the image for this workflow.

Privacy and formats

Decoding, crop selection, and canvas export run locally with Cropper.js. The image file is not uploaded for cropping. DevToolKit may receive usage or diagnostic metadata such as input/output bytes, output format, quality, cropped width and height, page context, and result codes. Identified analytics do not include the filename, crop X/Y coordinates, or raw image bytes.

Input: JPGInput: PNGInput: WEBPOutput: JPGOutput: PNGOutput: WEBP

Best results with Image Crop

Practical tips before you download or share the output.

One JPG/PNG/WebP up to 20 MB. Cropper.js: movable/resizable box, Free/1:1/4:3/16:9/9:16, wheel zoom, W/H/X/Y pixels, Reset crop area. Output Original/JPG/PNG/WebP; quality 60–100 (default 90) for JPG/WebP. JPG white fill. Filename {base}-cropped.{ext}. No rotation, batch, ZIP, or subject detection. >12,000 px warns. Analytics may include bytes, format, quality, cropped size, codes—not filename, X/Y, or raw bytes.

Related guides

Longer reads that pair well with this tool.

Image guide

How to Prepare Images for Websites and Documents

A practical image-preparation workflow: choose the required format, set dimensions, review processing labels, and inspect the exported file before sharing.

Image guide

How to Remove an Image Background Online

Use DevToolKit's server-backed, AI-assisted Background Remover with supported files, subject presets, browser-side export controls, and clear review steps.

Related tools

Common next steps after using this tool.

Image Compressor

Compress a JPG, PNG, WebP, or AVIF image with format, quality, and optional resize controls.

Image to PDF Converter

Build one ordered PDF from mixed supported image formats, with one ready image on each page.

Background Remover

Remove an image background, review the cutout, refine its edge softness, and export it with transparency or a new background.

JPG to PDF Converter

Turn one or more JPG and JPEG photos into a single ordered PDF with one image per page.

Image Rotate & Flip

Rotate one JPG, PNG, or WebP in 90° steps or mirror it horizontally and vertically, then export a new copy in the source format.

Image Resizer

Resize a JPG, PNG, or WebP image by exact dimensions, percentage, or common web and social presets.

Common problems this tool helps with

Situations where this workflow saves time.

The file format is unsupported — only JPG, JPEG, PNG, and WebP are accepted.
The image exceeds 20 MB — reduce the source file before uploading.
The browser cannot decode the image — the file may be corrupt, incomplete, or unsupported.
The crop box feels stuck at a ratio — switch to Free to resize without a locked aspect, or adjust width/height carefully under a preset.
A new ratio removes more of the image than expected — reposition or resize the box after the preset re-fits the frame.
A tightly zoomed crop looks soft when enlarged — zooming selects fewer source pixels and does not add true resolution.
Transparent areas become white in JPG — JPEG cannot store alpha; this export fills white (#ffffff). Use PNG or WebP for transparency.
Colors or metadata differ after export — canvas re-encoding does not deliberately copy EXIF, GPS, ICC, or DPI data.
An animated WebP becomes a still crop — only the decoded frame region is exported.
Automatic download does not start — use the manual download on the result screen for {base}-cropped.{ext}.

Frequently asked questions

What does Image Crop do?

It frames a rectangular region of one JPG, PNG, or WebP with Cropper.js and exports that area as a newly encoded image.

Which input formats are supported?

JPG, JPEG, PNG, and WebP. AVIF, GIF, BMP, HEIC/HEIF, SVG, and TIFF are rejected.

Which output formats are available?

Original (matching the source MIME), JPG, PNG, or WebP.

How many images can I crop at once?

One image per run. There is no batch queue and no ZIP packaging.

What is the maximum file size?

20 MB. Sources wider or taller than 12,000 pixels show a performance warning but can still be cropped.

Can I move and resize the crop box?

Yes. The crop box is movable and resizable, with a practical minimum near 20×20 pixels. viewMode keeps the box within the image canvas.

Which aspect-ratio presets exist?

Free, 1:1, 4:3, 16:9, and 9:16. Default is Free. There is no separate Original-ratio or custom-ratio field beyond Free and pixel inputs.

Does Free allow any crop shape?

Free unlocks the aspect lock so you can drag the box to arbitrary width and height within the image.

How does zoom work?

Mouse-wheel zoom is enabled (wheelZoomRatio 0.08). There is no zoom slider. Initial fit uses a computed base zoom. Zoom selects framing; it does not invent higher resolution.

Can I rotate inside Image Crop?

No rotation control is provided here. Use Image Rotate & Flip first if you need quarter-turns or flips, then crop.

Can I set exact crop dimensions?

Yes. Width, height, X, and Y inputs update the crop rectangle in rounded source pixels via Cropper setData.

Are output pixels the same as the crop size?

Export uses getCroppedCanvas without a forced upscale size, so canvas width/height follow the selected crop region in natural image coordinates.

Is this the same as resizing?

No. Cropping omits pixels outside the rectangle. It does not provide a separate target canvas size like Image Resizer.

Does the crop stretch the image?

The export path draws the selected region without a forced stretch-to-size step. Locked ratios change shape by changing which pixels are kept.

Is transparency preserved?

PNG and WebP can keep decoded alpha when you export those formats. JPG fills transparent areas with white.

What quality settings are available?

For JPG and WebP, quality is 60–100 with default 90. PNG ignores the quality argument.

Does Cropper fix EXIF orientation?

checkOrientation is enabled, so Cropper may apply orientation when loading. The tool does not rewrite orientation tags into the export and is not an EXIF-repair utility.

Are metadata and ICC profiles kept?

They are not deliberately copied. Canvas export typically leaves EXIF, GPS, ICC, DPI, and related data behind.

Is animation preserved?

No. Animated WebP is cropped as a still image from the decoded frame.

Where does cropping run?

Locally in the browser. Image bytes are not uploaded for cropping.

What is the output filename?

Downloads use {base}-cropped.jpg, .png, or .webp according to the chosen output format.

What analytics does Image Crop send?

Identified events may include engine, input/output bytes, outputFormat, quality, croppedWidth, croppedHeight, and error codes. They do not include the filename, crop X/Y, or raw image bytes.

Explore more in Image

Browse related tools or open the full workspace.

Image workspaceAll tools