Image Cropper

Why people crop images in practice

An ordinary image rarely fits the required size first time round. A photo from a phone arrives in portrait orientation while an avatar has to be square. A screenshot contains half a screen nobody needs. A site banner is designed for a particular aspect ratio and the photo came out horizontal. In cases like these people open an editor capable of far more than the job requires, and spend several minutes on a single rectangle.

The second scenario, no less common, is preparing an image for a specific slot. An avatar for a profile, a cover for a blog post, a preview for a product card, a photo for a CV, a picture for a classified ad. Every platform has its own size requirements, and when files need to be brought into line in batches, it helps to have one tool that behaves the same way every time. The usual sizes people aim for are listed further down.

A third scenario has to do with privacy and file weight. Crop away the excess and save as PNG and you get an image with no quality loss, plus everything that should not go public is gone: an address on a sign, someone else's face in the frame, a phone number on a screen. One limit is worth stating here: cropping changes the frame but does not rewrite the original file, so keep the source separately. For working with the weight and format of a file, the image resizer is the right tool.

• An avatar in a square format that a service or social platform insists on.
• Trimming stray edges off a photograph before publishing it.
• Pulling the useful part out of a screenshot or a scanned document.
• Fitting a banner or cover to a required aspect ratio.
• Cropping a photo to a square for a print collage or a grid layout.
• Cutting out a region with nothing private in it before sending it to a client.
• Preparing a version of an image with the frame trimmed and the metadata gone.
• Swapping part of a mockup while working on a page layout.

Mistakes that leave you with the wrong frame

The first mistake is about proportions. If you drag out a rectangle and then change the preset to 16:9, the width of the selection is kept while the height is recalculated, so the frame can slide past the edge of the image or swallow more than you intended. Always check the X, Y, width and height fields after switching presets. They show exact pixels of the source image rather than what you see on screen.

The second mistake comes from the picture being displayed smaller than it is. Dragging the frame over the preview costs you accuracy, because one screen pixel can correspond to several pixels of the original. For precise work, work from the numeric fields, which count in natural image pixels, and correct the frame there. Nothing is applied until you press Crop, and the result appears only after that.

The third mistake is worth anticipating: metadata and orientation. Modern browsers apply the EXIF rotation when displaying a photo, so the crop runs on the already-rotated image. If the result comes out sideways, the file carried a non-standard orientation flag that the browser ignored. Separately, remember that the PNG export carries no service data at all, including geolocation, which for publishing is usually a plus. The weight and format of the output can then be adjusted with the image resizer.

• Changing the aspect preset after the frame is already drawn. Check the numeric fields.
• Eyeballing the selection on a scaled-down preview instead of using the pixel fields.
• Expecting the crop to reduce file size. Cropping does not compress anything.
• Trying to select a region larger than the image. The frame is clamped to the edges.
• Assuming camera metadata and geolocation survive in the PNG. They do not.
• Mixing natural pixels with the size shown on screen.
• Cropping before the file has fully loaded, which puts the frame in the wrong place.
• Expecting a compressed JPEG at the end. The result is saved as lossless PNG.

How cropping works and what to know

The sequence is simple and happens entirely in the browser. The file is read as an object, a temporary URL is created from it, the browser decodes the image and reports its natural size. Then the display scale is computed, the ratio between the on-screen width and the real width. All frame coordinates are stored in natural pixels and converted to screen coordinates only for drawing, so the result does not depend on the window size.

When you press Crop, a canvas is created exactly the size of the selected region and the matching rectangle of the source is drawn onto it. The result is saved as PNG, and the file name gains the dimensions, something like `photo-cropped-800x600.png`. There is no interpolation step in this operation, so the pixels of the selected area are carried across one for one and no quality is lost. Converting that PNG back to JPEG, if you ever need to, is a separate job.

A few limits are worth knowing. Animated GIF and APNG files are shown by the browser as a single frame, and that frame is what ends up in the result. Very large images run into browser limits on canvas dimensions, and cutting a region out of a panorama tens of thousands of pixels across may fail to load. Ordinary screen captures, camera photographs and images from social platforms are handled without trouble.

Treat every size here as a starting point. Platform requirements change, so check their documentation before uploading.

Cropping, resizing and the other ways to handle a picture

Cropping and resizing solve different problems, even though they get confused constantly. A crop cuts part of the frame away, reducing the content while keeping its resolution. Resizing shrinks the entire image, and it is the only thing that actually reduces file weight. If the goal is to fit a size limit and keep the file light, resize first and crop afterwards. Otherwise you end up recalculating proportions twice.

There is a separate tool for weight and format that converts between JPEG, PNG and WebP and shows the savings in percent. The choice usually follows one simple rule: photographs go out as WebP or JPEG, while anything with transparency, screen captures and diagrams stay in PNG. If all you need is to bring a picture into line with a dimension and you are not cropping, the image resizer is the faster route.

Some jobs need neither cropping nor compression. You may simply want to see how a picture will look on a page, compare two versions, or find out what format a file is in. For that there is the image viewer and the text comparison tool for matching metadata, and when the task is to turn a picture into a text string, the Base64 image encoder does it.

Before uploading to a project it helps to estimate the final weight: the word and character counter handles text files, and the image resizer gives an honest figure for pictures.

A few everyday habits

Precise cropping comes faster when the order of operations is right. Set the proportions first, select the region second, and only then fine-tune it with the numbers. That way there is less to redo.

• Pick the ratio preset before drawing the frame, otherwise you will have to recompute it.
• Read the X, Y, width and height fields. They show natural pixels rather than screen pixels.
• Grow the region up to the edges of the picture instead of dragging it past them. The tool clamps it anyway.
• Remember nothing is applied until you press Crop, and the result only appears afterwards.
• Keep the original: cropping does not shrink the file, and a cropped JPEG comes out as PNG.
• The tool is not built for animation or multi-page files. Only the first frame survives.
• Check that nothing private slipped into the frame before you upload the result.