Product-page target summary
Suggested starting point: 180-320 KB for primary product photos, with tighter targets for thumbnails and alternate gallery images
How to size images for a product page
- 1
Separate main product images from thumbnails, recommendation cards, and alternate gallery shots.
- 2
Resize each asset type to the size your storefront actually renders or zooms.
- 3
Compress the images while preserving edges, texture, and color detail that matter for purchase decisions.
- 4
Test the full product page so gallery loading feels smooth across mobile and desktop.
Product-page image recommendations
- Primary product images often need more room than blog images because shoppers may inspect texture, finish, or packaging details.
- Keep gallery thumbnails much lighter than the main product image so the page does not pay the same cost multiple times.
- WebP or JPEG usually works best for product photography, while PNG is more useful when transparency or crisp cutout edges are essential.
- Resize before compressing if the source export is larger than the PDP gallery or zoom behavior actually requires.
Product pages differ from general website pages because image quality directly affects buyer confidence. The goal is not the smallest possible file, but the lightest file that still sells the product clearly.
Dimensions
- Main product images often work well around 1400-2000 px on the long edge depending on the zoom experience.
- Category-card and collection thumbnails can usually be exported much smaller than the PDP gallery image.
- Consistent aspect ratios help product grids look cleaner and avoid CLS-like layout jumps during load.
- Use enough resolution for crop and hover-zoom behavior, but do not keep extra pixels that the storefront never renders.
Key rules
- Compress when the image looks product-ready but still costs more KB than the gallery role justifies.
- Resize when the stored source exceeds your storefront display and zoom needs by a wide margin.
- Protect edge clarity, color accuracy, and texture detail on hero product photos.
- Judge the whole gallery, because eight acceptable images can still create a heavy ecommerce page.
Common mistakes
- Using the same large export for gallery hero, alternate angles, thumbnails, and recommendation cards.
- Overcompressing fabric, skincare, or packaging shots until important detail disappears.
- Ignoring transparent-background requirements and forcing every product asset into one format.
- Keeping giant studio originals when the storefront only needs a moderate zoom level.
Frequently asked questions
What file size is good for a product page image?
Many main product images land somewhere around 180 KB to 320 KB, while thumbnails and alternate gallery images should usually be lighter. The right target depends on zoom behavior and how much detail shoppers need to see.
Should product photos be resized before compression?
Yes, especially if the source export is much larger than the product-page gallery or zoom feature needs. Oversized dimensions make every gallery image heavier before compression even begins.
What format is best for ecommerce product images?
JPEG or WebP is usually best for product photography. PNG is more useful for transparent-background assets or graphics where clean edges matter more than photographic compression efficiency.
How is product-page image sizing different from blog or landing-page sizing?
Product pages keep more detail for product evaluation and often include galleries or zoom behavior. Blog pages care more about reading flow, while landing pages focus more on above-the-fold impact and campaign storytelling.