Crop image

Crop image keeps one rectangular region and removes the pixels outside it from the downloaded copy. The workbench uses four numeric controls: X, Y, Width, and Height. X measures the starting point from the left edge, and Y measures it from the top edge. Width and Height define the size of the retained rectangle. All values are expressed in source-image pixels, so the displayed preview can be smaller than the coordinate system used by the controls.

Decide the subject and destination aspect ratio before entering numbers. A square avatar, a 16:9 banner, and a portrait product card require different framing. Cropping does not resize the retained area after selection. A 1200 by 1200 crop produces a 1200 by 1200 output. If the final slot requires 600 by 600, crop first for composition and resize the resulting copy afterward.

Keep space for overlays, safe areas, and responsive cropping. A subject centered in one ratio may be cut off when a platform uses another. If a social or publishing service supplies a template, translate its required ratio into a rectangle that fits within the source. Preview the downloaded crop in the actual component before removing your larger working copy.

The top-left source pixel is the origin for the crop controls. X increases as the rectangle moves right, and Y increases as it moves down. Width extends right from X, while Height extends down from Y. The rectangle must remain inside the original dimensions. X and Y cannot be negative, Width and Height must be greater than zero, and the sums X plus Width and Y plus Height cannot exceed the source bounds.

When an image is 2400 by 1600 and you want the center 1200 by 1200 square, X can be 600, Y can be 200, Width can be 1200, and Height can be 1200. The right edge is 1800 and the bottom edge is 1400, so both remain inside the source. This arithmetic is a reliable way to check a crop before processing.

The workbench initializes X and Y to zero and fills Width and Height with the complete source dimensions. That initial rectangle retains the whole image. Change one value at a time and keep the source dimensions visible in the workbench status. There is no drag handle or visual crop overlay in the current interface, so numeric planning and result inspection are necessary.

After selection, the browser decodes the image and PWRKIT records its natural dimensions. Processing creates a canvas whose width and height equal the requested crop dimensions. The canvas draw operation takes the source rectangle defined by X, Y, Width, and Height and maps it to the full output canvas. Because source and target crop dimensions match, this operation retains the selected pixels without an intentional resize step.

The selected source and output remain local to the page. Temporary object URLs provide previews, and the browser creates the output blob. No image file is sent to a PWRKIT processing server. The workbench rejects files larger than 30 MB before decoding. Large pixel dimensions can still exceed browser canvas memory even when the compressed source passes that limit.

Output format depends on the source MIME type. PNG stays PNG, WebP stays WebP, and other decoded image inputs are exported as JPEG. The resulting filename adds -crop-image and the chosen extension to the source base name. A crop can therefore involve re-encoding as well as removing pixels. Inspect visual quality, transparency, and file format after download.

Suppose the source portrait is 3000 pixels wide and 4000 pixels high. A centered 3000 by 3000 square can start at X 0 and Y 500. That removes 500 pixels from the top and 500 from the bottom. If the face sits higher in the frame, reduce Y so the retained square moves upward, while keeping Y plus 3000 at or below 4000.

Process the crop and inspect headroom, shoulders, and background balance. Download it and test a circular mask because many profile interfaces display a circle even though the uploaded file is square. Important facial details should remain away from the corners that the circle will hide. If the crop is correctly framed but larger than required, resize the downloaded square as a separate step.

Do not use a screenshot of the preview as the final asset. The screenshot can introduce display scaling, interface elements, and an uncertain pixel size. The Download button returns the canvas output at the exact crop width and height. Verify those dimensions in a file inspector before upload.

Product photography often needs consistent framing across a catalog. Choose a target ratio and leave similar space around each object. Numeric coordinates can help reproduce a rule, but sources with different subject positions still require individual judgment. Check shadows and reflections near the boundary. Cutting a natural shadow halfway can look more distracting than leaving a little extra background.

For a scanned page, locate the paper edges and crop away the scanner bed without removing page numbers, notes, or binding detail that matters. A slightly skewed scan cannot be straightened by this crop tool because the rectangle remains aligned with the image axes. Rotate or deskew in suitable software before choosing final boundaries. Cropping a skewed page too tightly can clip opposite corners.

If the source contains multiple panels or receipts, make separate crops from the original rather than repeatedly cropping a prior output. Returning to the original preserves coordinate context and avoids added encoding passes. Label each download immediately so sections are not confused later. The workbench handles one crop result at a time.

After processing, the preview changes to the cropped copy. Inspect the top, right, bottom, and left edges. Look for clipped letters, fingertips, shadows, borders, and one-pixel lines. Open the download at 100 percent because a scaled preview can conceal a narrow accidental cut. Confirm that output dimensions equal the requested Width and Height.

The status line compares output bytes with source bytes. A smaller rectangle often produces a smaller file, but the ratio is not determined by area alone. Re-encoding, source format, and pixel detail affect compression. A crop that retains half the pixels is not guaranteed to use exactly half the bytes. Approve composition and compatibility before treating byte reduction as the success measure.

Test the crop in its final layout. Responsive CSS may apply object-fit rules and crop it again. Marketplaces can add their own square or portrait framing. Document software can scale the image to a box. If another crop occurs downstream, adjust the source framing or delivery ratio rather than assuming the locally visible rectangle is the final presentation.

The workbench shows an error when the crop rectangle leaves the source. Check for negative X or Y, zero Width or Height, and sums beyond the natural dimensions. Empty numeric fields are converted to zero and will fail for dimensions. Decimal values may also be unsuitable for a canvas size or source rectangle; use whole pixels for predictable output.

If the image cannot be selected, confirm that it is no larger than 30 MB and decodes in the browser. Renaming an unsupported format does not change its bytes. Export a standard PNG, JPEG, or WebP from trusted software and try again. If a very large image fails during processing, reduce its dimensions outside the crop tool because decoded canvas memory can exceed browser limits.

If the crop is valid but the wrong area appears, revisit the origin: Y starts at the top, not the bottom, and X starts at the left. Calculate the far edges explicitly. Reset restores the workbench to no selected file and releases temporary URLs. Download a wanted crop before resetting or choosing another source.

Cropping removes area and changes composition. Resizing keeps the whole frame but changes its pixel dimensions, which can stretch or shrink content. A square 2000 by 2000 crop and a resize of a 3000 by 2000 image to 2000 by 2000 both produce square dimensions, but the resize distorts the original ratio while the crop discards side content. Choose based on whether the frame or all source content matters.

Format conversion changes encoding. Compress image changes encoding quality while keeping dimensions. Blur image changes visible pixels across the complete frame. Remove image metadata re-encodes a sharing copy. A common delivery workflow is crop for composition, resize to the intended display size, then select JPG, PNG, or WebP and inspect file size. Preserve the original outside that sequence.

Color picker may be easier to use after cropping a small area of interest, but sampling the reduced or re-encoded result can differ from sampling the original pixel grid. Decide which version represents the color you need. Each tool has a narrow job. Keeping those jobs separate makes unexpected changes easier to trace and gives you a clear source for another attempt.

Write down recurring crop specifications when a team produces a series. Record the ratio, minimum subject margin, allowed focal shift, and delivery dimensions instead of copying coordinates from one unrelated photograph. Coordinates describe a particular source, while composition rules transfer to the next source. Review the series together to catch inconsistent headroom, product scale, or horizon placement that individual previews may not reveal.

The canvas produces one still crop. Animated images and containers with multiple frames or pages are not preserved as sequences by this workflow. If you need to crop an animation, use software that applies the same rectangle to every frame and retains timing. A correct first-frame preview does not prove that the rest of the motion has been processed.