On most stores, imagery is simultaneously the largest performance cost and the strongest conversion asset on a product page. That tension is why blanket advice fails in both directions: "compress everything" produces a fast page that makes your product look cheap, and "quality above all" produces a beautiful page nobody waits for. The useful approach is to decide, per image role, which of the two you are optimising.
Upload big, serve small
Upload the highest-quality source you have and let the system generate the sizes it serves. This is the opposite of what many owners do — pre-shrinking images before upload to "help" — and it removes your ability to serve a decent zoom or to regenerate sizes later when a template changes. A source in the region of 2000 to 3000 pixels on the long edge covers zoom and retina displays without being absurd, and everything shipped to a browser should be derived from it, not from a JPEG someone already squeezed twice.
- Source: 2000–3000px long edge, minimal compression
- Served: sized to the actual layout slot, per breakpoint
- Never pre-compress before upload — you cannot undo it
- Regenerate sizes after a template change, not before
Formats, without the religion
Modern formats meaningfully reduce weight at the same visual quality, and support is broad enough that serving them with a fallback is routine. The practical rule, without the coyness: photographs go to AVIF with WebP behind it, flat colour and text stay PNG or SVG because they handle edges cleanly, and nothing important is stored as a screenshot of itself. The bigger win is usually not the format but the dimensions — a correctly sized image in an older format beats an oversized one in a new format, every time.
The gallery is where LCP dies
A product gallery that loads eight full-resolution images before the shopper has touched anything is the single most common cause of a slow product page. The main image is almost always the Largest Contentful Paint element, which means it must load eagerly, at a high priority, at the right size for the viewport. Every other image in the gallery should load lazily, and thumbnails should be actual thumbnails, not the full image scaled down in CSS. Sliders that autoplay through high-resolution shots are worse still: they force the browser to fetch and decode images nobody asked to see.
Layout shift is a settings problem, not a design problem
If your product page jumps while it loads, the cause is almost always images without dimensions. Width and height attributes — or an explicit aspect ratio — let the browser reserve the space before the file arrives. In most templates this is a five-minute fix. It removes a large share of Cumulative Layout Shift. Inconsistent aspect ratios across your catalog cause a related problem: category grids that reflow as each product image lands.
The settings that quietly ruin quality
Two defaults deserve attention. Compression quality set too aggressively by an optimisation plugin produces visible artefacts on fabric, skin and gradients — exactly the product categories where detail sells. And thumbnail cropping set to a fixed square will amputate tall products in your category grid. Look at your own category page on a phone, at your actual products, before trusting any plugin's default. Most plugins ship at quality 82 or lower; textured goods often need 85 to 90, and a product shot that lands under 200 KB at that quality is doing fine. The correct setting is the one that survives inspection on your own products, not the one that wins a file-size contest.
Alt text: accessibility first, search second
Alt text exists so that someone using a screen reader can understand what the image shows. Write it for that purpose and the SEO benefit follows honestly. Describe the product and what is distinctive in the shot — "navy wool overcoat, front view, on model" — and do not stuff keywords into it. Leave alt empty for purely decorative images so screen readers skip them instead of reading noise. If accessibility is on your list for other reasons, ADA compliance for stores covers the wider picture.
Consistency sells better than perfection
One quietly high-return change has nothing to do with file size: photograph products consistently. The same background, the same lighting, the same crop and the same angle across a category makes a grid look professional and makes products genuinely easier to compare. A catalog of mixed supplier photos, phone snaps and stock images reads as unreliable regardless of how fast it loads — which is the same trust mechanism described in outdated store design. One reshoot day covering your twenty best-selling products usually changes more than a month of compression work. It does not help if those products are commodities sold from the same manufacturer photos everywhere — there the differentiation has to come from the copy instead.
A short audit you can run today
Open a product page on a phone with a throttled connection. Note whether the main image appears before you would have given up. Check the transferred size of that one image — anything approaching a megabyte for a single product shot is a problem. Scroll and watch whether anything jumps. Then open a category page and check whether the grid is loading twenty full-size images to display twenty small ones. Those four observations will tell you more than any score.
Compress until it hurts the product, then step back one notch. Speed matters; looking cheap costs more.