Crop Images to Fixed Aspect Ratios Before Publishing

Introduction

Cropping is different from resizing. Resizing changes pixel dimensions. Cropping chooses what stays in the frame. That distinction matters when you prepare screenshots, thumbnails, Open Graph images, marketplace photos, or social cards.

The Image Crop Tool helps set a crop area and export the selected region. Processing is handled in the browser for this tool based on the current public implementation. Avoid entering sensitive images unless you have reviewed the implementation and your own data handling requirements.

The practical goal is simple: keep the important subject visible while matching the ratio required by the destination.

Real-world scenario

You have a wide product screenshot and need three outputs:

• A square thumbnail for a tool card
• A 1200 x 630 social preview
• A narrow documentation crop that focuses on one settings panel

If you only resize the original image, one destination may stretch it or crop it automatically. A manual crop lets you choose the visible area before the platform makes that decision for you.

For a square thumbnail, center the most recognizable part of the UI. For a social preview, leave room around text and logos. For documentation, crop tightly enough that the reader can see the relevant setting without scanning the whole screen.

Aspect ratio before pixels

Start with ratio, then choose final size. A square crop, a 16:9 crop, and a 1.91:1 Open Graph crop all communicate differently. If the source does not match the target, cropping is usually better than stretching.

Use Aspect Ratio Calculator if you need to compare the source and target. After cropping, use Image Resizer if the output needs exact pixel dimensions.

Input and output example

Source image:

• Screenshot size: 2880 x 1800
• Subject: settings panel on the right side
• Destination: documentation image at 960 px wide

Workflow:

• Crop around the panel first
• Preserve enough surrounding context to orient the reader
• Resize the cropped output to the documentation width
• Compress only after the crop and resize are correct

Common mistakes

Cropping too tightly. If the viewer cannot tell what screen or object they are seeing, the crop may be technically clean but context-poor.

Letting a platform crop automatically. Social platforms and CMS previews often crop from the center. If the subject is off-center, manual cropping is safer.

Stretching instead of cropping. Changing width and height independently can distort logos, UI, people, or product photos.

Compressing before framing. Crop and resize first. Compression should be the final polish, not the first step.

Limits to keep in mind

Browser-based cropping depends on image decoding and canvas memory. Very large photos may be slow on mobile devices. Canvas export can also change metadata or color profile details. Keep the original file when the image is important.

Next steps

Open the Image Crop Tool, then use the Image Crop Tool docs for supported input, output behavior, limits, and common errors.

For a full publishing flow, compare proportions with Aspect Ratio Calculator, resize the output with Image Resizer, and reduce file size with Image Compressor.