Geometric Center and Optical Center Are Not the Same Place
Put a mug with a handle exactly in the middle of a frame by measurement and it will look pushed to one side, because the handle carries less visual weight than the body and your eye balances mass rather than bounding boxes. The same is true of a bottle with a long neck, a shoe pointing one way, and almost any object that is not symmetrical. Centering by arithmetic is easy and produces a grid that looks subtly wrong; centering by eye takes ten seconds per product and produces one that looks composed.
Use this without the search next time. Prathom Workbench puts Prathom's tools in your toolbar.
Add to Chrome — freeWhat it does
- Interactive crop with the result visible as you drag
- Runs in the browser, nothing uploaded
- Exact output dimensions
- One product at a time, deliberately
How to use Center Product
- 1
Decide the margin rule for the whole range first
A proportion — say the product occupying about eighty percent of the frame height — applies sensibly across products of different shapes, where a fixed pixel margin does not.
- 2
Crop until it looks centerd, not until the numbers match
Drag the crop so the product's visual mass sits in the middle. For an asymmetric object that means the bounding box is slightly off center, which is correct.
- 3
Compare it against the last one you did
Consistency across the set is the actual goal. Keep the previous product's result open and match the proportion rather than trusting your memory of it.
How it works
This page uses the browser-side crop tool, set up for product framing. The image is decoded on your device, you position the crop with the result visible as you drag, and the output is encoded locally at the exact dimensions you set. Nothing is uploaded.
There is no automatic detection of the product, and that is the point of the page rather than a missing feature.
Why the eye disagrees with the measurement
Visual balance works on mass and contrast rather than on extents.
A mug's body is large, solid, and high in contrast against the background. Its handle is a thin loop enclosing background. To the bounding box these contribute equally — the handle extends the rectangle just as much as the body fills it. To a viewer, the body is nearly all of the object and the handle is an attachment.
So a frame centerd on the rectangle puts more real mass on one side, and the product appears to lean. Centering the body and letting the handle overhang looks balanced, even though a ruler says it is off.
The same asymmetry appears anywhere an object has a light, open, or transparent part: a jug with a glass handle, a bag with a strap trailing, a chair whose legs are thin and whose seat is solid, a shoe whose toe is bulky and whose heel is not.
Direction adds a second effect. An object that clearly points somewhere — a shoe, a kettle spout, a camera lens — wants slightly more space in the direction it points, or it reads as being about to walk out of the frame.
Consistency beats correctness
For a single hero image, get it exactly right. For a catalog, get it exactly the same.
A grid of forty products where every product is framed to a slightly different proportion looks disorganized even if each individual crop is well judged. A grid where every product occupies the same share of its frame looks deliberate even if that share is not the one a photographer would have chosen.
Which means the rule matters more than its value. Write down the proportion, the alignment, and the aspect ratio, and apply the same three decisions to everything. Keeping the previous product open while cropping the next one is a crude method and works better than any amount of intention.
What belongs to the other pages
Framing is a chain of operations and they live in different places.
The background comes first — a product still sitting on its studio sweep is harder to frame, because the sweep's edges pull your eye. Isolate onto white with the marketplace or store page before cropping.
The crop is here, per product, by judgment.
The final dimensions are mechanical and belong on the resize page, which handles many files at once and preserves proportions. Crop to the composition you want, then resize the set to the size each channel asks for.
Doing it in that order means the judgment is made once, on the largest available pixels, and everything after it is arithmetic.
What has been tested
The cropper this page uses is already in production, and it was opened with a real file before this page went up.
A 1200×1800 JPEG loaded into the crop surface, which reports the selection in the image's own pixels rather than in the scaled-down preview — that is what makes an export exact, and it is the property this page depends on when it asks you to judge a margin as a proportion of the frame.
Still to check on a later pass: an asymmetric subject cropped to optical center and compared against a bounding-box center, and a set of four products reviewed as a grid for consistent proportion.
Examples
Mug with a handle
The case the page is about. Centering the body and letting the handle sit off to one side looks right; centering the bounding box does not.
Symmetrical bottle
The easy case. Geometric and optical center coincide horizontally, so the only judgment left is vertical placement and margin.
Frequently asked questions
Why not center automatically?
Because an automatic center uses the bounding box, and the bounding box does not know that a handle weighs less than a body or that a spout should read as the front. Automation makes every product slightly wrong in the same confident way, which is harder to spot than an obvious error.
What is optical center vertically?
Slightly above the measured middle. A subject placed exactly halfway down a frame tends to look low, which is why so much composition advice puts the point of interest a little above center. On product grids the effect is mild and consistent, so pick a rule and hold it.
Should every product be the same size in frame?
Usually yes in proportion, not in reality. A grid where the earring and the coat both fill eighty percent of the frame reads as a catalog; one that preserves their true relative sizes makes the earring invisible. If real scale matters, communicate it with a scale reference in an additional image.
Can I do this in bulk?
Not here, on purpose. A bulk crop applies one rectangle to every image and cannot see where each product sits. This page is one at a time because the judgment is per product, and the resize page handles the parts that genuinely are mechanical.