To crop image files well, decide what must remain before moving the frame. Cropping changes composition and output dimensions by removing pixels outside a selected area. This page gives you a freeform frame, common aspect ratios, exact source-pixel coordinates and rectangle or circle output, then reports the generated file so you can check the result before downloading it.
The tool is intended for a single photo, screenshot, product image, profile picture or graphic that needs tighter framing. It is useful when the source contains extra space, the subject is off-center, or a destination requires a particular shape. It does not identify the subject automatically, invent missing content or certify that a photo meets passport rules.
Decide what the crop must do
Start with the destination. A request for a square profile image describes shape. A request for 1200 × 630 pixels describes exact dimensions. “Keep the person and remove the empty wall” describes composition. These tasks can overlap, but they are not the same.
| Destination requirement | Setting or result to check |
|---|---|
| Square profile image | 1:1 ratio or Circle shape |
| Landscape banner | 16:9, 3:2 or a stated ratio |
| Exact crop dimensions | Width and height in source pixels |
| Specific subject position | Drag the frame, then refine X and Y |
| Transparent circular edge | Circle with PNG or WebP output |
Cropping cannot create detail that lies outside the original image. It also cannot guarantee a smaller file: removing pixels often reduces the amount of image data, but changing format or choosing high encoding quality can still produce a larger file than expected.
How to crop an image on this page
- Choose one image. Add a JPG, PNG or WebP file up to 40 MB. The workbench displays the source dimensions, format and file size.
- Place the frame. Drag inside the selection to move it. Drag a handle to resize it. The rule-of-thirds lines help you judge balance, and the label inside the frame shows the selected source-pixel dimensions.
- Choose shape and ratio. Keep Free for an unconstrained rectangle, select a fixed ratio such as 1:1 or 16:9, or choose Circle for a square circular mask.
- Refine exact values when needed. Edit X, Y, width and height. X and Y locate the top-left corner in the original image; width and height define the selected area.
- Choose the output. Select JPG, PNG or WebP. JPG and WebP expose a 40–100% quality control. PNG is exported losslessly by this browser workflow.
- Crop and inspect. The result shows the actual preview, file size, dimensions, crop origin, retained-pixel percentage, transparency behavior and metadata status. Download only after those values match the destination.
The interactive frame is touch enabled and keyboard accessible. When the crop selection has focus, arrow-key movement is useful for small adjustments that are harder to make with a pointer.
Choose free, square or an aspect ratio
An aspect ratio describes shape rather than pixel count. Both 600 × 600 and 1200 × 1200 are 1:1. A 1600 × 900 crop is 16:9. Keeping a ratio fixed lets you move and resize the frame without changing that shape.
Use Free when the composition matters more than a standard container. Use 1:1 for square avatars, thumbnails and grid tiles. Landscape ratios such as 4:3, 3:2 and 16:9 suit progressively wider frames. Portrait versions such as 3:4, 2:3 and 9:16 are useful for upright photos and vertical screens.
Do not choose a preset only because it is familiar. Check the actual specification supplied by the website, template or client. Identical aspect ratios can still use very different pixel dimensions.
Use exact source-pixel controls
The four numeric fields describe a crop against the original image, not against the smaller preview on screen:
- X: horizontal distance from the original left edge to the crop.
- Y: vertical distance from the original top edge to the crop.
- Width: number of source pixels kept horizontally.
- Height: number of source pixels kept vertically.
This distinction is one of the most useful parts of the page. A large photo may be displayed at 600 pixels wide in the workbench while its source is 4000 pixels wide. The fields still report and edit positions against the 4000-pixel source, so an 1200-pixel-wide selection creates an 1200-pixel-wide output rather than a screen-resolution approximation.
When a fixed ratio is active, changing width recalculates height and changing height recalculates width. The values are clamped to the source boundary. Recenter creates a large centered crop in the current ratio when manual edits have moved the frame somewhere unhelpful.
Rectangle or circle output
A normal crop is rectangular because raster image files use a rectangular pixel grid. A “circle image” is therefore still a square file with pixels outside a circular mask treated differently.
On this page, Circle forces a 1:1 selection and applies a real circular mask during export:
- PNG: transparent pixels remain around the circle and the output is lossless.
- WebP: transparent corners are retained and the quality slider affects the encoded image.
- JPG: the circle is placed on white because JPG output from this workflow does not retain transparency.
Choose PNG when transparent corners are essential. Choose JPG only when a white square background is acceptable. The result panel states the behavior so the downloaded file is not a surprise.
Read the result before downloading
The preview answers the composition question: is the correct content inside the frame? The metrics answer the technical questions:
- Dimensions: the actual output width and height. Cropping does not resize the selected area after extraction.
- Pixels kept: the selected rectangle’s pixel count as a percentage of the original pixel grid. For a circle, this metric still describes its square bounding box.
- Crop origin: X and Y identify where the selected area began in the source.
- Output size: the actual Blob size created by the browser, not an estimate.
- Transparency: confirms whether transparent pixels were kept or flattened on white.
- Metadata: a newly exported Canvas image does not preserve the original file metadata in this implementation.
The browser creates the result by drawing the selected source rectangle into a new Canvas with drawImage(), then requesting the selected output format with toBlob(). These APIs explain why crop geometry, output encoding and metadata are separate concerns.
Illustrative crop example
Assume a 4000 × 3000 JPG contains a product surrounded by empty space. You choose the 4:3 preset and set X to 800, Y to 600, width to 2400 and height to 1800. The selected area remains 4:3 and keeps 36% of the source pixel grid.
| Value | Illustrative result |
|---|---|
| Crop origin | X 800, Y 600 |
| Output dimensions | 2400 × 1800 px |
| Aspect ratio | 4:3 |
| Source pixels kept | 36% |
Illustrative example. File size depends on the actual image content, selected output format and quality. Use the generated result panel for the real byte count.
If the destination instead needs exactly 1200 × 900 pixels, this crop alone is still too large even though it has the correct ratio. Download the crop, then use the Image Resizer to scale it to the required dimensions. Crop first when composition must change; resize afterward when the selected composition also needs a different pixel count.
Scope and alternatives
base97 keeps the workflow focused: one local image, a directly manipulable frame, common ratios, exact source-pixel controls, true circle masking, three output formats and a detailed result report. It does not add a sign-in step or move the image into a full design document.
Other tools fit broader or different workflows:
- Adobe Express combines cropping with templates, filters, text, resizing and a wider design editor. It is a better fit when the crop is the beginning of a composed social or marketing asset.
- Canva places cropping inside its editor and supports additional photo adjustments. Use it when the image belongs inside a larger Canva design.
- iLoveIMG provides a direct crop page with X, Y, width and height fields and cloud-file imports. It is useful when Google Drive or Dropbox import is central to the workflow.
- Img2Go exposes many named aspect-ratio presets and a broader online image editor. It suits users who need more edit operations in the same service.
The practical base97 difference is the combination of a freeform accessible frame and source-pixel fields, plus a result report that explains crop origin, pixels retained, transparency and metadata. Those details help you judge the output rather than treating download readiness as proof that the crop is correct.
This version does not support batch cropping, rotation, perspective correction, background removal, AI uncropping, arbitrary vector shapes, face detection, cloud imports, passport-rule validation or exact target file sizes. Use the general Image Compressor when file weight is the main requirement.
Troubleshoot a crop that looks wrong
The subject is cut off
Move the frame before changing its size. If a fixed ratio makes the frame too narrow or too short, switch to Free, protect the important content, and confirm whether the destination truly requires that ratio.
The output is the right shape but the wrong dimensions
Ratio and dimensions are different. Enter an exact crop width and height only when the source contains enough pixels in that area. If the composition is correct but the output is still too large, resize the cropped file afterward.
The circular image has a white square around it
The output is JPG. Choose PNG or WebP to retain transparent corners. Some destination apps may still display transparency on white, so inspect the downloaded file in the actual destination when background appearance matters.
The file is larger than expected
Cropping removed pixels, but the output format or quality changed. Compare the result format with the original. Lower JPG or WebP quality gradually, or use the Image Compressor when a strict file-size goal matters more than framing.
The browser cannot create the result
Very large crop areas can exceed browser memory. This page blocks outputs above 40 million pixels, but device limits can be lower. Choose a smaller area, close memory-heavy tabs or use a desktop editor for unusually large source files.
Crop image FAQ
Does cropping reduce image dimensions?
Yes. The output dimensions equal the selected crop width and height in source pixels. Cropping removes pixels outside that frame; it does not scale the selected area to a different size.
Can I crop an image to a circle with a transparent background?
Yes. Choose Circle and export PNG or WebP. The file remains square in pixel dimensions, while pixels outside the circular mask are transparent. JPG uses a white square background because this workflow does not retain transparency in JPG.
Can this tool crop to an exact width and height?
Yes. Enter the crop width and height in source pixels. You can also enter X and Y to position the top-left corner. A fixed aspect-ratio preset keeps width and height linked.
Is the selected image uploaded to base97?
No. This tool reads the selected file, draws the crop and creates the download with browser APIs on the current device. It does not send the image to a base97 server.