Landscape 3:2
1200 x 800 starting point
CMS Max product media guide
Product Image Sizes and Aspect Ratios
Build a consistent catalog with clear source images, stable frames, and responsive delivery.
CMS Max supports five product-card aspect ratios and two image-fit modes. Choose the system before preparing the catalog so photography, uploads, cards, product pages, feeds, and ads stay aligned.
- Five aspect ratios
- Cover or contain
- Responsive source sets
- Known dimensions
Supported storefront ratios
Choose one frame before the catalog grows.
The dimensions below are practical export starting points at a 1200-pixel primary dimension. The ratio is the governing rule; source requirements can vary by photography, zoom, feed, marketplace, ad, and template.
Landscape 4:3
1200 x 900 starting point
Square 1:1
1200 x 1200 starting point
Portrait 2:3
1200 x 1800 starting point
Portrait 3:4
1200 x 1600 starting point
Image fit
Decide whether the frame or the full product wins.
The active image mode changes what customers see when a source image does not match the selected frame.
Fill the frame
Creates consistent edge-to-edge cards, but can crop the top, bottom, or sides. Keep the product and critical labels inside a safe center area.
Show the whole image
Preserves the complete source image, but may add space around products with different proportions. Use a consistent source background.
Responsive delivery
Upload a strong source and let the browser choose an appropriate delivery size.
CMS Max managed-image processing can create CDN URLs and responsive source sets, preserve known dimensions, and output WebP at the configured quality. The browser can then select a candidate based on layout and device conditions.
- Source
- Sharp, well-lit, correctly cropped, color-consistent, and free of unintended text or watermarks.
- Markup
- Useful alternative text, intrinsic width and height, responsive
srcset, and an appropriatesizesvalue. - Template
- Stable aspect ratio, object fit, loading behavior, zoom expectations, and no layout shift.
- Channels
- Verify storefront, product feed, search, social, ad, marketplace, email, and print requirements separately.
Catalog media workflow
Make product imagery an operating standard.
Document photography ownership, naming, background, angle, crop, ratio, quality review, accessibility, rights, replacement, feed, and archive rules before a large import.
- 01
Select the ratio
Choose the catalog frame and object-fit behavior from real representative products.
- 02
Prepare sources
Use a consistent background, crop, color treatment, safe area, file name, and product identity.
- 03
Verify channels
Test list cards, product detail, variation selection, zoom, search, feeds, ads, social, and mobile.
- 04
Govern changes
Record ownership, rights, replacements, broken sources, duplicate files, and stale channel caches.
Product image FAQ
Use the ratio as a system, not a one-time crop.
Test real products with different shapes before applying one media rule across the entire catalog.
Which aspect ratios does CMS Max support for product listings?
The current eCommerce image settings expose Landscape 4:3, Landscape 3:2, Square 1:1, Portrait 3:4, and Portrait 2:3. Square 1:1 is the default when no supported value is selected.
What product image size should I upload?
A 1200-pixel primary dimension is a practical editorial starting point for the five documented ratios, but it is not a universal upload requirement. Start from a clean, sharp source large enough for the intended storefront and feed channels.
Should every product use the same ratio?
Use one primary ratio consistently within a catalog or category unless the design explicitly supports a mixed system. Consistency keeps product cards, comparison, and scanning stable.
What is the difference between cover and contain?
Cover fills the frame and may crop edges. Contain keeps the whole image visible and may leave unused space. CMS Max currently supports both object-fit modes.
Does CMS Max create responsive image variants?
CMS Max can rewrite managed image HTML to a CDN URL with WebP output, quality settings, `srcset`, `sizes`, and known width and height values. Product media also exposes responsive source sets where the active template uses them.
Building Relationships with Web Developers and Marketing Agencies that want better results
The world's fastest and most SEO friendly website code.