How to resize product images for ecommerce

Consistency matters more than the largest possible file

Shoppers compare products in a grid before they inspect detail. Keep the canvas ratio, background, product scale and camera angle consistent across the catalogue. A technically sharp image can still make the store feel unreliable when one item looks tiny and the next touches every edge.

Build one export recipe per sales channel

Your storefront, marketplace feed and social catalogue may use different crops. Keep a high-resolution master, then make channel-specific derivatives from that source. This avoids enlarging an already compressed marketplace download and lets you change the crop without repeating the shoot.

Product image checklist

• Use the same aspect ratio and visual padding across the collection.
• Check white products against the background edge.
• Preserve texture in fabric, jewellery and other detail-heavy goods.
• Name files clearly and write useful alt text in the storefront.

Start from a master, then make channel versions

Keep one colour-corrected, high-resolution master for every product view. Generate storefront, marketplace and social versions from that file. This prevents a common quality trap: downloading an already compressed marketplace image, cropping it again and using that degraded copy everywhere else.

Match the crop to the catalogue grid

Square images are a safe default for many catalogues, but fashion, furniture and editorial shops may benefit from portrait crops. The important choice is consistency. Set a canvas and a target amount of breathing room, then position every product to occupy a similar share of the frame. Customers should compare the products, not compensate for changing camera distance.

Preserve the details that sell the item

Compression is successful only if texture, edge quality and colour remain believable. Inspect fabric weave, jewellery facets, printed labels and the boundary between white products and pale backgrounds. A slightly larger file is justified when those details influence a purchase or reduce returns.

Use additional images for scale, packaging, alternate angles and close-ups instead of forcing every fact into the hero image. The first image should identify the product immediately; later images can answer questions.

File naming and accessibility

Give files short descriptive names such as linen-shirt-navy-front.webp rather than camera numbers. In the store, write alt text that identifies the product and view without stuffing keywords. Good names help the team manage assets; good alt text helps shoppers who cannot see the image and gives search systems clear context.

Quality-control pass

• Canvas ratio and product scale match the rest of the category.
• Colours are checked in sRGB on a normal display.
• Zoom and mobile thumbnails both remain useful.
• The output format is supported by the storefront and marketplace feed.

Keep performance in the product-image brief

Large galleries multiply quickly: eight images on one product page can outweigh the rest of the interface. Export at the maximum size the zoom view genuinely uses, create responsive variants in the storefront, and lazy-load images below the first screen. The first product image deserves priority; the eighth does not.

Test a real category and product page over a normal mobile connection. That catches oversized sources, layout shifts and slow thumbnails that are easy to miss when reviewing a single file on a fast desktop. Keep the high-resolution master outside the delivery folder so later marketplace crops do not start from a compressed derivative.