How Center Crops Work

Inspect actual square, landscape and portrait files from one image, with the retained dimensions and removed edges explained.

Seller Operations Lab · Worked crop example

Last checked October 20, 2026

What a center crop removes

These are actual cropped files from the same 800 × 800 reference export. They illustrate geometry and do not reproduce Etsy's interface.

Square 1:1 crop of the cup sample — 1:1: No crop.

Landscape 4:3 crop of the cup sample — 4:3: 100 px from top and bottom.

Portrait 3:4 crop of the cup sample — 3:4: 100 px from left and right.

The square already has side padding. A portrait crop can remove padding while a landscape crop removes source content vertically. This is why you must inspect the subject instead of treating every removed pixel as damage.

Image sources and reproduction

Photographs: Coffee Cup, The Metropolitan Museum of Art; Coffee cup and coffee bean, mcfoodie. Both are CC0. They are third-party test material, not photographs taken by this project. Pattern, text, transparency and noise fixtures are generated tests.

Measured 2026-10-20 with sharp 0.35.4, libvips 8.18.6, Node 24.13.1. Download all dimensions, byte counts and SHA-256 hashes. Reproduction script.

Method and limitations

Question: Which edges disappear when a square image is center-cropped?
Method: Start from the published 800 × 800 square export. Extract an 800 × 600 landscape frame and a 600 × 800 portrait frame with equal removal on opposite edges. Save both resulting image files.
Result: The 4:3 export removes 100 pixels from both top and bottom; the 3:4 export removes 100 from both left and right. The downloadable images show what those pixels contained.
Limitation: This is a controlled crop demonstration, not an Etsy screenshot or evidence that every storefront uses the same focal point.
Environment: Published reference files generated with sharp. The dimensions are encoded in the files, and their hashes are in the manifest.

Reproduce it

Download the square source from the examples below.
In a crop-capable editor, select a centered 4:3 frame without scaling the source.
Export and check that the output is 800 × 600.
Repeat with a centered 3:4 frame and compare the removed image content.

Calculate the retained frame

For a square of side S, a centered 4:3 crop retains a height of 3S/4 and removes S/8 from each vertical edge. A 3:4 crop retains a width of 3S/4 and removes S/8 from each horizontal edge. With S = 800, that is 100 pixels at each affected edge.

The same fractions apply to a larger square: a 2000 × 2000 source loses 250 pixels at each affected edge. A non-square source requires its own calculation. Do not carry the square example over to every source ratio.

Judge the content removed

The padded cup example has spare space at its sides, so removing side pixels need not remove the cup. The same crop could clip a handle in a tighter composition. Compare the actual product boundary, not merely the retained percentage.

Use the separate thumbnail checklist to assess meaning, readability and the final marketplace preview. Its job is a publishing decision; this page provides the file geometry behind that decision.

Sources checked

MDN: drawImage source and destination rectangles · MDN Web Docs

What a center crop removes

Calculate the retained frame

Judge the content removed

Sources checked

Continue with a related check