Image optimization for e-commerce

For e-commerce stores, images aren't a side issue. They're central to the customer experience. Customers can't touch your product, so images do all the work that physical inspection would do in a store.

Poorly optimized images cost you on three fronts: slower pages (lost conversions), worse SEO (lost traffic), and higher infrastructure bills. This guide gives you the playbook to fix all three.

The three-way trade-off

E-commerce images have to balance three things:

1. Quality high enough to sell. Customers need to see details.
2. File size small enough to load fast. Slow pages kill conversion.
3. Multiple sizes for different contexts. Thumbnail, listing, detail, zoom.

The art is satisfying all three without compromising any. This is solvable.

The format choice

For product images: use WebP as the primary format with JPG fallback. Optional: add AVIF for the smallest files in supporting browsers.

<picture>
  <source srcset="product.avif" type="image/avif">
  <source srcset="product.webp" type="image/webp">
  <img src="product.jpg" alt="Product name" width="800" height="800">
</picture>

For product photography specifically, WebP at quality 85 is the sweet spot. Smaller than JPG, visually identical, and supported everywhere your customers will be.

The sizes you need

For each product photo, generate multiple sizes:

• Thumbnail: 300×300 — for category pages, search results, cart
• Listing: 600×600 — for product list views
• Detail: 1200×1200 — for the main product page
• Zoom: 2400×2400 — for hover/click zoom features

Use srcset to serve the right size to each viewport. Don't load the 2400px version on a mobile thumbnail.

Compression settings by use case

• Thumbnails (small, dense grids): Quality 75-80. Aggressive compression is fine — they're small.
• Product listings: Quality 80-85. Sweet spot.
• Product detail: Quality 85-90. Customers are evaluating purchase here.
• Zoom views: Quality 90+. Show off the product.

The SEO opportunity

Product image SEO is criminally underused. Most stores have generic file names (IMG_4523.jpg) and minimal alt text. Fix this and you can capture significant Image Search traffic.

For each product image:

• File name: red-running-shoes-men-size-10-side-view.jpg (descriptive, hyphenated, lowercase)
• Alt text: "Red Nike Pegasus 39 men's running shoes, size 10, side view" (descriptive, includes brand and key attributes)
• Structured data: Include the image in your Product schema markup
• Image sitemap: List all product images in your sitemap.xml

Background and consistency

Product images convert best on consistent, clean backgrounds — usually pure white (#FFFFFF) or a neutral light gray. Amazon, Apple, and most major e-commerce sites use white backgrounds for this reason.

Inconsistent backgrounds across products look unprofessional. If your photos have varied backgrounds, use background removal to standardize them. (Soon to be available in pictoolkit's browser-based background remover.)

The mobile question

50-70% of e-commerce traffic is mobile. Optimize aggressively for mobile:

• Smaller default images. Mobile users don't need 2000-pixel-wide product photos.
• Lazy load below-the-fold images. Most product pages have multiple images; lazy load all but the first.
• Avoid carousels that auto-advance. They hurt performance and don't help conversion.
• Use modern formats. Mobile data costs money in many countries.

Platform-specific notes

Shopify

Shopify automatically generates multiple image sizes and serves WebP to supporting browsers. The main thing you control is the source quality. Upload high-resolution PNGs or JPGs and let Shopify handle the optimization.

You can hand-optimize using our tools before upload if you want WebP or AVIF in the source as well.

WooCommerce

WooCommerce on WordPress doesn't optimize as aggressively. Use a plugin like ShortPixel or Imagify, or manually convert images to WebP before upload. Set the WordPress image size thresholds appropriately.

BigCommerce

Similar to Shopify — automatic resizing and modern format serving. Focus on source quality and proper alt text.

Custom or headless commerce

You have full control. Set up an image CDN that does on-the-fly conversion and resizing (Imgix, Cloudinary, Bunny, etc.) or generate optimized versions at upload time.

The pre-upload optimization workflow

1. Take photos at highest possible quality (full sensor resolution, RAW if possible)
2. Edit and crop to a standard size (2400×2400 or similar) on a consistent background
3. Save the master as PNG or high-quality JPG
4. Use our batch resize tool to generate variants (thumbnail, listing, detail, zoom)
5. Use our compression tool to optimize each variant
6. Upload to your platform

Common e-commerce image mistakes

• Uploading 8000-pixel photos straight from a camera. Wastes bandwidth, slows pages.
• Using PNG for product photos. 5-10× larger than equivalent WebP/JPG.
• Generic file names. Missed SEO opportunity.
• No alt text or "image" as alt. Accessibility issue plus missed SEO.
• Inconsistent backgrounds. Looks unprofessional, hurts conversion.
• Same image size for all contexts. Wastes bandwidth on thumbnails.
• No structured data. Missed opportunity to appear in shopping carousels.

Bottom line

Fixing image optimization is one of the highest-ROI things you can do for an e-commerce store. Better speed = more conversions. Better SEO = more traffic. Smaller files = lower infrastructure costs. The work pays for itself.

---

Optimize your product images with pictoolkit's browser-based tools. No upload, no signup, batch process hundreds at once.