Why product image size affects sales
Shoppers cannot touch a product online. They rely on photos to understand color, material, size, and detail. A blurry or slow-loading product image reduces trust and increases the chance that a visitor leaves before seeing the full product. A fast, high-resolution image gives buyers confidence and makes product pages more usable on mobile devices.
Recommended e-commerce image dimensions
| Image use | Recommended size | Format | File-size target |
|---|---|---|---|
| Main product photo with zoom | 1600-2000 px on the longest side | WebP with JPEG fallback | Under 300 KB |
| Product gallery image | 1200 px | WebP | Under 200 KB |
| Category card | 600 x 600 px or 4:3 | WebP | Under 80 KB |
| Cart thumbnail | 100-200 px | WebP | Under 30 KB |
| Social commerce image | 1080 x 1080 px or 1080 x 1350 px | JPG | Under 150 KB |
Building a product image pipeline
1. Start with a high-quality master
Keep the original photo in a master folder. The master should be sharp, correctly exposed, and large enough to support zoom, print, and future layouts. Do not compress the master; compression is for the web versions.
2. Crop to consistent product framing
Use the image cropper to remove empty background space and keep the product centered. Consistent framing makes category pages look organized and helps shoppers compare products quickly.
3. Resize each output separately
Use the image resizer to create the exact sizes your theme needs: zoom, gallery, card, and thumbnail. Do not rely on CSS to shrink one large file because the browser still downloads the full version.
4. Convert and compress for the web
Convert to WebP with the format converter and run the result through the image compressor at 82-88% quality. Product images need more quality than decorative blog images because shoppers inspect texture and detail.
Product photography best practices
- Use a clean background so the product stands out in thumbnails.
- Show the product from multiple angles, including a close-up of material or hardware.
- Add a size-reference image for apparel, jewelry, and furniture.
- Use consistent lighting so colors look similar across the catalog.
- Test product images on a small phone screen before publishing.
Page speed and Core Web Vitals
Product pages with many large images often struggle with Largest Contentful Paint and Cumulative Layout Shift. Fix these issues by resizing images, declaring width and height attributes, lazy-loading gallery images below the fold, and using responsive srcset values. A faster product page gives shoppers fewer reasons to abandon the store.
Frequently asked questions
Should product images be PNG or WebP?
Use WebP for web delivery. Use PNG only when the product image needs sharp transparency, such as a cut-out logo or a transparent product silhouette.
How many product images should a store use?
Most product pages perform best with 3-6 images: front, back, side, detail, size reference, and lifestyle. Quality matters more than quantity.
Does zoom require a larger image file?
Yes, but you can serve a compressed WebP zoom image instead of the original JPEG. Test the zoom quality at 85% to find the smallest file that stays sharp.