Image Compressor topic guide

Crop vs resize: how to fit an image into a target shape

Direct answer

Crop keeps the target pixel dimensions and removes pixels at the edges of the source so the result fills the target edge to edge. Resize keeps all of the source pixels and fits them into the target by scaling, which either changes the aspect ratio (distorting the image) or leaves a band of padding at the sides. A third option - letterbox - keeps all of the source pixels and adds a coloured background so the image is centered in the target at its own aspect ratio. The right pick depends on the destination: a feed-post card usually needs to fill the slot, so crop is right; a marketplace main image usually needs the whole product visible, so letterbox is right.

Try the Image Compressor

What this workflow handles

The three operations do three different things. Crop (also called cover-crop) starts at the target pixel dimensions and removes source pixels from the edges so the image fills the slot - nothing is padded, and the source pixels that fall outside the target's aspect ratio are lost. Resize (also called scale or contain) fits every source pixel into the target by scaling, and either distorts the aspect ratio or leaves padding. Letterbox is resize + padding: the source is scaled to fit inside the target without distortion, and the remaining canvas is filled with a colour (usually white for marketplaces). The Pillow documentation calls resize the operation that changes the size of an image, with no built-in notion of aspect ratio or padding - those are added by the calling code. The MDN <picture> reference and web.dev's responsive images guide discuss the same three operations under different names (cover, contain, aspect-ratio). Each of the platform resizers on this site picks one of the three based on the platform's documented rule: the Amazon, Shopify, Etsy and Multi-purpose resizers letterbox onto a white canvas so the entire product stays visible; the Social Media Image Resizer cover-crops so the feed card fills edge to edge; the Image Preparation workflow exposes all three as a user choice (Cover, Contain, Pad) on its Custom path.

Use the image compressor to re-encode a single image in its original format at the same pixel dimensions, then compare the byte counts in the result panel before keeping the output.

How to use it

  1. Identify the target shape the destination expects - a 1:1 square for Amazon, a 4:3 for Etsy, a 16:9 for YouTube, a 1:1 or 4:5 for Instagram.
  2. Decide whether the destination needs the whole image visible (marketplace main images) or edge-to-edge fill (social feed cards). Pick letterbox for the first, crop for the second.
  3. If the destination is a marketplace, run the source through the matching Product Image Resizer (Amazon, Shopify, Etsy) - all three letterbox onto a white canvas so the product stays visible.
  4. If the destination is a social feed card, run the source through the Social Media Image Resizer - it cover-crops to the target's exact pixel dimensions so the card fills edge to edge.
  5. If the destination is a custom shape, use the Image Preparation workflow with the Custom path and pick Cover, Contain or Pad to match the destination's rule.
  6. After resizing or cropping, run the output through the Image Compressor if the destination has a file-size limit - crop and resize do not change the file's encoding.

Frequently asked questions

What is the difference between crop and resize?

Crop keeps the target pixel dimensions and removes pixels from the source's edges so the image fills the target edge to edge; the pixels that fall outside the target's aspect ratio are lost. Resize keeps all of the source's pixels and scales them to fit the target, which either changes the aspect ratio (distortion) or leaves a band of padding at the sides. The Pillow documentation describes resize as the operation that changes an image's size; aspect-ratio handling and padding are added by the calling code on top.

When should I crop instead of resize?

Crop when the destination needs the image to fill the slot edge to edge and losing some edge content is acceptable. Social feed cards (LinkedIn, X, YouTube) are the typical case - the card is shown at its exact pixel ratio and any padding would look like a mistake. Resize (or letterbox) when the destination needs the whole image visible, such as a marketplace main image where the platform enforces a specific aspect ratio and cropping would remove part of the product.

What is letterboxing an image?

Letterboxing fits the entire source image into a target with a different aspect ratio by scaling and then filling the remaining canvas with a solid colour, usually white or black. It is a resize plus a fill operation: the source is not cropped, the aspect ratio is not distorted, and the target's exact pixel dimensions are produced. Amazon's documented main-image rule is the canonical example - the source photo is letterboxed onto a 2000 by 2000 white square so the whole product stays visible.

Does cropping reduce image quality?

Cropping does not change the per-pixel quality the way lossy compression does, but it does discard source pixels that fall outside the target's aspect ratio, so anything that was at the edges of the source is no longer in the output. Resizing down (scaling to a smaller size) does not change per-pixel quality either, but resizing up (upscaling to a larger size) is the operation that softens detail, because the new pixels are invented rather than measured. The Pillow documentation covers the resize filters that control how each scale is performed.

Should I crop or letterbox for Amazon's main image?

Letterbox. Amazon's documented main-image requirements say the image must show the entire product, fill about 85 percent of the frame, and sit on a pure white background. Letterboxing the source onto a 2000 by 2000 white canvas satisfies all three at once. Cropping the source to a 1:1 ratio would remove part of the product and break the rule. The Amazon Product Image Resizer on this site does the letterbox by default; the Image Preparation workflow exposes Cover (crop) and Contain (letterbox) as a user choice.

Should I crop or letterbox for a social media post?

Crop. Social feed cards (LinkedIn square, X summary large, YouTube thumbnail) are shown at their exact pixel ratio and any padding looks like a rendering bug to viewers. The Social Media Image Resizer on this site cover-crops to the target's exact pixel dimensions so the card fills edge to edge. Letterbox is the wrong default for a feed card - save it for destinations that need the whole image visible.

Can I resize without losing sharpness?

Resizing down (to a smaller pixel count) preserves the per-pixel information of the remaining pixels and does not lose sharpness in the lossy-compression sense. Resizing up (upscaling to a larger pixel count) is the operation that softens detail, because the new pixels are invented rather than measured, and no resize filter fully recovers the lost source detail. The Pillow documentation covers the resize filters (NEAREST, BILINEAR, BICUBIC, LANCZOS) that control the trade-off between sharpness and smoothness on resize.

Sources

Explore the image compressor topic cluster

Each guide answers a different image-decision question. Pick the one that matches your situation, then use the linked tool to produce the output you need.

Related guides

  • Resize vs Compress: which one actually shrinks your image

    Resizing changes the pixel dimensions of an image; compression keeps the dimensions and re-encodes the file at a smaller byte count. Pick resize when the source is larger than the display size, and compression when the dimensions are right but the bytes are still too high. Backed by Chrome for Developers' two Lighthouse audits and the Pillow documentation.

  • Image file size vs dimensions: why pixels do not equal bytes

    A 500 by 500 image can be larger in bytes than a 2000 by 2000 image. File size depends on pixel dimensions, compression format, quality setting, colour depth and image complexity — not dimensions alone. A practical explanation with sources from MDN, web.dev and Pillow.

  • Why is my image still large after compression

    Your image may still be large after compression because the source was already optimized, the format is inefficient for the content type, the dimensions are too large for the destination, or the quality setting is too high. A troubleshooting guide with actionable checks from MDN, web.dev and Chrome for Developers.

  • How to optimize images for the web

    Optimizing an image for the web is a four-step decision chain: pick the format that matches the content, resize to the actual display size, re-encode at a balanced quality, and serve the result with a modern-format fallback. A practical guide backed by web.dev, MDN, Chrome for Developers Lighthouse audits, and the Pillow documentation.

  • JPEG vs PNG vs WebP: how to choose the right image format

    JPEG, PNG and WebP are not interchangeable. The right choice depends on what is in the image, whether it needs transparency, the file-size budget, and where the image will be displayed. A practical decision guide backed by MDN, Google Developers, web.dev, the WHATWG HTML Living Standard and the Pillow documentation.

All image compressor guides