Comparisons
Best Image Format for eCommerce
The best image format for ecommerce depends on whether the file is a product photo, a transparent asset, a marketplace upload, or a fast-loading storefront image.
The short answer
WebP is often the strongest storefront format for product photos, while JPG remains valuable for marketplaces and broader compatibility.
Storefront images vs marketplace images
For storefront delivery, WebP is often the best default for product photos because it keeps pages lighter. For marketplace compatibility, JPG may still be the safer upload. PNG remains useful for transparent badges, overlays, and certain graphic assets. The best ecommerce workflow therefore separates source files, marketplace uploads, and live storefront delivery instead of forcing one format everywhere.
This matters because ecommerce image workflows are rarely single-channel. A product photo may need one version for the CMS, another for the storefront, and another for a third-party marketplace.
- WebP for modern storefront delivery where page speed matters.
- JPG for broad marketplace and platform compatibility.
- PNG for transparent overlays, badges, or text-heavy graphics.
Real examples
A category grid with many product thumbnails benefits from lighter storefront delivery. A transparent sale badge should stay in PNG or compatible transparent WebP rather than turning into JPG. A marketplace listing may still ask for JPG even if the main site uses WebP.
How it affects SEO and page speed
Ecommerce pages are often image-heavy, so format choice influences speed, trust, and conversion-focused UX more than on many other page types.
Developer and workflow notes
Teams should define different output rules for source assets, storefront delivery, and marketplace exports.
Common mistakes to avoid
- Uploading the same full-size source file everywhere.
- Ignoring transparency needs for badges and overlays.
- Using PNG for every product photo on live storefront pages.
- Failing to resize thumbnails to the real card dimensions.
Exact upload specs for the major marketplaces
Each marketplace enforces its own minimum resolution, file ceiling, and background rule, and an upload that ignores them either gets rejected or loses the zoom feature that drives conversions. Export a square master at 2000x2000 px, then down-rez per platform from that single source so you never upscale.
Amazon will not enable hover zoom below 1000 px on the longest side, and rejects any file over 10 MB; the main image must sit on pure white, RGB 255,255,255, with the product filling 85 percent of the frame. Etsy and eBay are more forgiving on background but reward larger files for mobile zoom. Match these to the listing before you upload, not after.
- Amazon: minimum 1000 px longest side to trigger zoom, 2000x2000 px recommended, under 10 MB, JPEG or PNG, main image on RGB 255,255,255 white.
- Shopify: 2048x2048 px displays sharpest, hard limits of 5000x5000 px and 20 MB, but keep delivered files well under 300 KB for speed.
- Etsy: at least 2000 px on the shortest side, 2000x2000 px (1:1) or 2700x2025 px (4:3), maximum 10 MB per image.
- eBay: 500 px minimum, 1600x1600 px recommended for zoom, up to 12 MB, no borders or seller watermarks on the gallery image.
Storefront encode targets that hit Core Web Vitals
On your own storefront you control the encoder, so set hard byte budgets per slot instead of shipping the marketplace master. A product card thumbnail rendered at 300x300 to 400x400 CSS pixels should weigh 15 to 35 KB as WebP at quality 75 to 80; a main gallery image at 800x800 to 1200x1200 should land at 60 to 120 KB; a full-bleed hero or lifestyle banner stays under 200 KB. Generate a 2x variant for retina and let srcset pick, rather than serving one oversized file to every device.
AVIF at quality 50 to 60 typically beats WebP by another 20 to 30 percent at the same visual quality, so serve AVIF first with a WebP fallback through the picture element for browsers that lag. Resize to the real rendered dimensions with Resize Image before you encode, since a 4000 px source scaled down in the browser still downloads every byte and inflates Largest Contentful Paint. Add width and height attributes so the layout reserves space and Cumulative Layout Shift stays near zero. Use Compress Image to pull each export down to its byte budget once the dimensions are correct.
A sized export checklist from master to live page
Run every product photo through the same pipeline so weights stay predictable across thousands of SKUs. The steps below carry the exact values to use; treat the master export as the only place you keep full resolution.
- Export one master per product at 2000x2000 px, sRGB color, 72 PPI (print DPI is irrelevant for screen), saved as quality 90 JPEG or lossless PNG if the asset needs transparency.
- For transparent assets such as cutout packshots or sale badges, keep PNG-24 as the source, then run PNG to WebP for storefront delivery to drop a 400 KB badge to roughly 40 to 80 KB while preserving the alpha channel.
- Generate storefront sizes at 400 px, 800 px, and 1200 px wide, each at 1x and 2x, encoded as AVIF q55 with a WebP q78 fallback.
- Compress each variant to its budget: under 35 KB for thumbnails, under 120 KB for gallery images, under 200 KB for heroes.
- Down-rez the 2000 px master per marketplace, confirm the white background reads RGB 255,255,255 for Amazon, and verify the file sits under each platform ceiling (10 MB Amazon and Etsy, 12 MB eBay, 20 MB Shopify) before upload.
Tools that help
Once you have picked a format, finish the job in your browser: convert the file, resize it to the layout you actually need, and compress it to a realistic weight with the tools below.
