Equal canvas dimensions do not guarantee equal visible product size. Compare how much of each square the item occupies, then check the store’s display frame and fit behavior. Create consistent presentation margins within a sensible product group, while preserving the item’s proportions. Do not enlarge a small accessory until it appears physically comparable to a much larger product when shoppers would interpret that as scale.
Inspect the files outside the theme
Make a contact sheet with equal-sized image boxes. If one product already looks small there, the source composition or padding differs. If the files look balanced but the storefront does not, the receiving frame may crop, fit or pad them differently. Separating those two observations avoids unnecessary regeneration.
Use the visible product boundary and a category-specific margin rule. Shoes and long necklaces may need different composition standards. A universal rule based on the longest edge can produce excessive empty space for thin objects. Review several representative shapes before processing the rest.
Test the display rule
MDN explains image fit behavior: filling and containing an image are different layout choices. Ask the site maintainer to inspect the actual component if needed. An AI image brief cannot change a store theme’s CSS.
- Compare three varied product shapes in identical source boxes.
- Document intended margins and whether shadows count toward the bounds.
- Prepare use-specific copies without distorting the products.
- Test the grid on desktop and phone layouts.
- Inspect the product detail view as well as the thumbnail.
Keep scale evidence elsewhere
Grid consistency is a presentation choice, not a measurement. Include verified dimensions or an appropriate real scale reference on the product page when size matters. Do not use the thumbnail’s apparent size as evidence of the physical item.
Should I use a generative expansion to make every square?
Only if invented surroundings are acceptable for the intended use and the product remains accurate. A neutral canvas or layout margin may solve the framing problem with less risk. Compare the options before spending on a new generation.
What if one image is clipped on mobile?
Check the receiving frame’s crop and fit settings. A file that works in a square desktop card may be placed in a different phone frame. Approve the actual displayed version and preserve the source so the layout can be corrected without rebuilding the asset.
Sources and scope
This is an original Imagild Editorial workflow guide, assisted by AI and reviewed against the linked sources on October 12, 2026. External tool procedures do not imply that Imagild provides those tools or guarantees their results.