A product thumbnail, detail panel and zoom view do not necessarily need the same image dimensions. Start with the largest useful display role, preserve an original, and prepare delivery versions that retain important product details. Consistent framing matters as much as a small file: compression cannot fix an uneven crop or an unreadable label.
Write down the roles before choosing dimensions
| Role | What to check |
|---|---|
| Catalogue thumbnail | Card aspect ratio and legibility at small size |
| Product detail image | Largest rendered width and display density |
| Zoom image | Actual close-up detail and platform zoom behavior |
Illustrative sizing calculation: a 600 CSS-pixel panel may use a 1200-pixel source for a two-times-density display. That is not a universal store requirement. A responsive delivery system can serve different sources instead of making every visitor download the largest one. Check the current requirements of your own theme and upload service.
Keep framing consistent without inventing a crop
Choose a common aspect ratio and background during image preparation. Resizing to fit a box preserves the original proportions; it does not crop, pad or reposition the product. For example, a 1600 by 1200 image fitted within an 800 by 800 box becomes 800 by 600, not a square. Use a separate crop or canvas step if a square catalogue image is required.
Check a representative sample before the batch
- →Choose samples with fine labels, dark texture, bright reflections and transparent edges.
- →Resize copies according to each actual display role.
- →Choose a format accepted by the store, then adjust quality while comparing detail.
- →Preview images inside real cards and product pages, including mobile and zoom views.
- →Keep the source files and record the settings before applying the same pattern to the rest of the collection.
Keep the page context useful
Use descriptive filenames and accurate alternative text where appropriate, without stuffing product keywords. Google recommends balancing speed and image quality and providing useful page context. Reducing bytes does not guarantee higher rankings or increased sales; assess page loading and usability after publication.
Finish by comparing the uploaded, served image with your local export. Storefront platforms may resize or recompress an upload, so the file you prepared is not always the exact file a shopper downloads.