Ecom Image OptimizerAdobe Commerce & Magento Image Sizes
Image roles, zoom headroom, and the pre-launch resize that saves your server.
Last updated
Adobe Commerce (formerly Magento) assigns images a role rather than a fixed size. The base image is the main product-page shot, the small image drives category listings and cross-sells, the thumbnail appears in the cart and gallery strip, and swatches illustrate a colour or texture option.
The rule for the base image is that it should be two to three times the size of its container if you want zoom to look sharp. Adobe's own documentation gives 470 × 470 px as an example without zoom and 1100 × 1100 px with it.
The operational point matters more than any of these numbers: resize every catalogue image before the store goes into production. Skip it and Adobe Commerce resizes on page load instead, which measurably slows the site and hammers the server for the first days or weeks after launch.
Adobe Commerce image requirements
| Base image (no zoom) | ~470 × 470 px |
|---|---|
| Base image (with zoom) | ~1100 × 1100 px, 2–3× the container |
| Small image | ~470 × 470 px, for listings, up-sells, cross-sells |
| Thumbnail | ~50 × 50 px |
| Swatch | ~50 × 50 px |
| JPEG quality | 80–90 recommended |
Source: Adobe Commerce: Product image configuration, Adobe Commerce: Catalog image resizing best practices
How to do it
- 1Decide whether the product page needs zoom; that sets your base image size.
- 2Resize masters to roughly 2–3× the container. 1100 px square is a common answer.
- 3Export as JPEG at quality 80–90, the range Adobe recommends.
- 4Run the catalogue image resize before go-live so nothing is generated on page load.
Frequently asked questions
What size should Magento product images be?
Size the base image to two or three times its display container so zoom stays sharp, roughly 1100 × 1100 px with zoom enabled, or about 470 × 470 px without. Small images used in listings are typically around 470 px, thumbnails and swatches around 50 px.
What is the difference between base, small and thumbnail images?
They are roles, not sizes. Base is the main product-page image, small drives category listings and cross-sells, and thumbnail appears in the cart and gallery strip. One upload can be assigned to several roles.
Why is my Magento store slow after launch?
Frequently because catalogue images were never resized ahead of time. Adobe Commerce then generates every required size during page load, which slows pages and loads the server heavily in the first days after go-live.
What JPEG quality should I use in Adobe Commerce?
Adobe recommends 80–90. That range cuts file size substantially while staying visually clean on product detail. Below it, compression artefacts start showing on gradients and fabric.
Does Adobe Commerce support WebP?
Recent versions and most CDN layers in front of Adobe Commerce can serve WebP. Confirm on staging first, and keep JPEG in the pipeline as a fallback for anything that does not negotiate the modern format.