Comparisons
When to Use PNG vs JPG for Product Photos
PNG vs JPG for product photos depends on whether the image is a straightforward photo, a transparent cutout, or part of a storefront that needs lighter loading.
The short answer
For ordinary product photos, JPG is usually the better legacy-friendly choice unless transparency or a special graphic requirement changes the decision.
Product photo needs are not always the same
Most product photos work well as JPG or WebP because they are photographic and benefit from lighter delivery. PNG becomes more relevant when transparency or very specific edge handling matters, such as isolated cutouts or certain design-stage assets.
The ecommerce mistake is to treat every product image the same. A main storefront photo, a marketplace upload, and a transparent brand badge all solve different problems.
- JPG for broad photo compatibility and lighter marketplace workflows.
- PNG for transparency-heavy product cutouts or supporting graphics.
Real examples
A model-worn product photo on a category page usually does not need PNG. A transparent cutout for a composited layout may need PNG or transparent WebP. A marketplace listing may still strongly prefer JPG even if the main storefront uses something lighter.
How it affects SEO and page speed
Product galleries are often image-heavy, so photo format choices affect page speed and mobile usability quickly.
Developer and workflow notes
Product teams benefit from separating design assets, transparent cutouts, and live storefront photos into different output rules.
Common mistakes to avoid
- Using PNG for every product photo just because the design team exported a PNG.
- Flattening transparent assets into JPG when the layout still needs transparency.
- Ignoring image dimensions and focusing only on the extension.
- Using one export preset for storefront, marketplace, and internal archive needs.
Export specs that hold up across storefront surfaces
Set fixed targets per surface instead of one export preset. Square product shots at 2048x2048 px give Shopify and most themes enough resolution to drive zoom on retina screens; deliver them as JPEG at quality 82 to 85, which lands a typical white-background photo around 180 to 350 KB. Keep the longest side at 1600 px or more so marketplace hover-zoom unlocks, and never exceed the platform ceiling.
Strip embedded color profiles you do not need and convert to sRGB before export, because non-sRGB JPEGs render dull or oversaturated in browsers that ignore the profile. DPI is irrelevant for on-screen product images: a 2048x2048 file looks identical at 72 or 300 DPI on the web, since only the pixel count matters. Reserve PNG for the transparent badge or cutout that genuinely needs an alpha channel, then run it through Resize Image so it matches the slot exactly rather than scaling in CSS.
- Storefront hero / zoom: 2048x2048 px, JPEG quality 85, target under 400 KB, sRGB.
- Product card thumbnail: 600x600 px or 800x800 px, JPEG quality 80, target 30 to 80 KB.
- Amazon main image: longest side 1600 px (1000 px is the zoom floor, 10000 px max), pure white RGB 255,255,255 background, JPEG.
- Transparent brand badge or cutout: PNG-24 with alpha, sized to the exact display box, target under 150 KB.
- eBay listing: 1600 px longest side recommended (500 px minimum), JPEG.
Why the same photo balloons as PNG
PNG uses lossless DEFLATE compression with no quality dial, so it stores every pixel of photographic noise and gradient verbatim. A 2000x2000 model-worn shot exported as PNG-24 commonly runs 4 to 8 MB. The identical image saved as JPEG at quality 80 lands near 200 to 500 KB, a 10x to 20x reduction with no visible loss on a product page. That single swap is the largest weight win available on most galleries.
PNG-8 caps at 256 colors, so forcing a photo into it produces visible banding across skin tones and sky. PNG only earns its size on flat-color graphics, sharp text, screenshots, or anything needing transparency. If a design team handed you a photographic PNG, that is an export accident, not a requirement. Run it through PNG to JPG, then Compress Image to confirm the result holds quality before it ships.
Reading JPEG artifacts so quality stays clean
JPEG works on 8x8 pixel blocks and applies 4:2:0 chroma subsampling, which throws away three-quarters of the color resolution while keeping brightness intact. That trade is invisible on photos but destroys crisp red or blue text and thin colored lines, which fringe and smear. This is the real reason graphic-led product overlays belong in PNG.
Stay at or above quality 80 for hero product images and 75 for thumbnails. Below roughly quality 70 the 8x8 blocks become visible as a grid in flat backgrounds and soft gradients, and resaving a JPEG repeatedly compounds the damage because each pass re-quantizes already-degraded blocks. Export once from the master file at the final dimensions rather than recompressing an existing JPEG; if you must shrink an existing one, Compress Image lets you watch the artifacts before committing, so you stop before the background grid appears.
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.
