Cropping is the only image operation that destroys information on purpose: you choose a rectangle, everything outside it is discarded, and the rectangle becomes the new image. The question a cropper answers is not where the subject is but how much of the frame the platform you are publishing to will accept. A square feed, a widescreen hero, a portrait print and an A4 document each have a different appetite for pixels, and the crop is the step that adapts one file to all four. The image cropper does this entirely in your browser: the file is read with a FileReader, drawn onto a canvas, and the selected rectangle is re-encoded right there. Nothing is uploaded, nothing is queued, and the original file never leaves your machine.
That client-side design changes what the tool can promise. Because the crop is a pure pixel cut at native resolution, the output is exactly the pixels you boxed, with no resampling, no interpolation, and no upsampling. You cannot crop into detail that is not in the file, but you also cannot lose detail that is inside the box. The rest of this guide covers how the crop box maps onto the original pixels, what each aspect ratio does to a standard 4000 × 3000 photo, how the PNG, JPEG and WebP export options differ, and where a crop sits in a larger image workflow.
How the Crop Box Works: the Display Is a Scaled Preview
The image you drag on is not the image you export. The tool scales the photo down to fit its container, using the largest scale that fits both the width and the height and never exceeding one, so a large photo is always shown smaller than its true size and a small photo is never blown up. The crop box you move and resize lives in this scaled coordinate system, which is why dragging feels smooth even for a 40 megapixel scan. When you export, the tool converts the box back into the original pixel grid, rounds to whole pixels, and draws that region one-for-one onto a new canvas.
Two consequences matter. First, the size label under the crop box is already the output dimension in original pixels, not the preview size, so what it says is exactly what the download will be. Second, the mapping is lossless in both directions for the purpose of planning: every preview pixel corresponds to a fixed rectangle of original pixels, so a box you size at preview scale exports at the same proportion at full resolution. If you want to know the dimensions of the file you are about to crop before you open it, the image info tool reads width, height, format and file size from the header in one click, which is the cleanest way to predict the numbers below before you commit to a rectangle.
The Standard Case: a 4000 × 3000 Photo in Six Frames
Take a 4000 × 3000 photo, which is 12 megapixels and the classic 4:3 frame of a phone in standard mode or a compact camera. Run the tool with each preset in turn, keeping the box as large as each ratio allows, and the output dimensions are completely determined by arithmetic on the original size. A 1:1 crop returns 3000 × 3000, the largest square that fits inside the 4:3 frame, which is 9 megapixels. A 16:9 crop returns 4000 × 2250, keeping the full width and trimming the height, and that is also exactly 9 megapixels. A 4:3 crop returns 4000 × 3000, the entire image, because the photo is already 4:3 and nothing has to be cut.
A 3:2 crop, the classic film and print ratio, returns 4000 × 2667. A 2:3 portrait crop, the same ratio standing up, returns 2000 × 3000. An A4 crop, whose ratio is 210 to 297, returns 2121 × 3000 for a portrait A4 sheet. Notice the coincidence that 1:1 and 16:9 both land on exactly 9 megapixels from a 12 megapixel source: a square and a widescreen frame remove the same third of the pixels from a 4:3 original, just from different edges. If your target is a specific platform feed rather than a ratio, the social image crop tool holds the preset dimensions of the major networks, which saves you the lookup of what Instagram, LinkedIn or a video thumbnail actually require.
Aspect Ratios and How the Constraint Behaves
The tool ships with seven modes: free, 1:1, 4:3, 16:9, 3:2, 2:3 and A4, covering the square, the widescreen, the camera-native and the print formats. When a ratio is active, dragging a corner anchors the opposite corner in place and the other dimension is derived from the pointer dimension through the ratio, so the box can never leave its shape. If the ratio-driven box would overflow the anchored edge or the image boundary, the tool shrinks both dimensions together along the ratio rather than letting one side break the shape, which is why a constrained box always stays inside the photo. A rule-of-thirds grid, with lines at the 33.33 percent and 66.66 percent marks, is drawn inside the box to help you place a subject on an intersection instead of dead center.
Two practical limits round the behavior out. The minimum box is 20 pixels on a side, so you cannot pinch the crop to a sliver, and every dimension is rounded to a whole pixel on export. Switching ratios while a box is open re-fits the existing box to the new shape, anchoring at the top-left, so you can explore 1:1 and 16:9 side by side without re-drawing from scratch. If the final dimension has to be an exact number, such as 1080 × 1080 for a specific feed slot, the clean workflow is to crop first for composition and then run the result through the image resizer, which scales the cropped file to the exact target dimensions. Cropping chooses the frame; resizing sets the pixel count.
PNG, JPEG, WebP: Format, Quality, and the White Background
The export offers three formats with one quality slider from 10 to 100, defaulting to 92. PNG is lossless and preserves transparency, so it is the safe choice for graphics, screenshots and anything with cut-out edges. JPEG is lossy and has no transparency channel, which the tool handles by painting a white background before encoding, so a cropped region that included transparent areas comes out white instead of black. WebP produces smaller files than JPEG at comparable visual quality, which matters when the crop will live on a page that has to load fast. The quality setting applies to the lossy encoders; at 92 the JPEG and WebP output is visually clean for photographic content, and lowering it is the fastest way to shrink the file when the dimensions are already fixed.
The download is named after the original file with a cropped suffix, so a photo called beach.jpg exports as beach_cropped.jpg, beach_cropped.png or beach_cropped.webp depending on the chosen format. That naming keeps the crop next to its source in your file system, which matters when the same photo serves several layouts. If the cropped file is still heavier than the destination allows, the image compressor re-encodes it against a size budget, which is a different lever from quality because it iterates until the target weight is met. And if the destination needs a format the cropper does not export, the image converter takes the cropped file and transcodes it to whatever the pipeline requires, so the crop stays the composition step and never has to double as a format step.
Does Cropping Hurt Quality or File Size?
Quality is protected by the no-resample design. Because the preview never scales past one hundred percent of the original and the export maps the box onto the original pixel grid directly, the tool never invents pixels and never averages pixels together. The output contains exactly the pixels inside your rectangle, at their native size, which means a crop of a sharp photo is as sharp as the photo itself within that region. The only way cropping degrades a file is if you later enlarge it, and that is a resizing decision, not a cropping one.
File size moves with the pixel count. Cutting a 12 megapixel 4:3 photo down to a 9 megapixel square or widescreen frame removes a quarter of the pixels before any encoding even starts, and at quality 92 the resulting JPEG typically lands well below the size of the original full frame. A lossless PNG of the same region keeps every original bit inside the box, so its size is proportional to the area you kept. In short: the crop decides how many pixels survive, the format decides how efficiently they are stored, and the quality setting decides how much of the fine detail the lossy encoders are allowed to discard.
Where a Crop Fits in a Bigger Image Workflow
The tool accepts PNG, JPEG, WebP, GIF and BMP on the way in, reading the first frame of an animated GIF, and the whole session happens in the browser tab that has the file, with no server round trip at any point. That makes it the natural first pass on any image that needs to become a different shape: pull the file in, pick the ratio the destination wants, check the output dimension on the label, and export.
What follows the crop depends on the destination. If the source is an AI-generated image, the frame you get is whatever the model composed, and the crop is the second step after generation, so the guide to writing AI image prompts covers how to get a usable composition out of the model in the first place while this tool fixes the frame to the format you need. If the result is for print or a document, the A4 preset is the starting point, and if the final image needs a mark, the right order is to crop first and then apply the image watermark, so the mark lands on the final frame instead of being half cut away. The crop is the least visible step in an image pipeline, and also the only one that permanently decides what the rest of the pipeline sees.