The Complete Guide to Ecommerce Image Optimization (Speed, SEO & Sales)

Product images are the single most important element on any ecommerce store. Customers can't touch, smell, or try your products — they can only look at them. But those same images are usually the biggest performance bottleneck on your site. Unoptimized images account for 50-70% of total page weight on most ecommerce stores.

This guide covers everything you need to know about image optimization for ecommerce: formats, sizing, alt text, lazy loading, and the tools to automate it.

Why Image Optimization Matters

Page Speed

A single unoptimized hero image can be 2-5MB. Multiply that by a product page with 6 images, and you're asking customers to download 12-30MB before they can even see your product. On mobile, that's 5-15 seconds of waiting.

Core Web Vitals

Google's Largest Contentful Paint (LCP) metric directly measures how fast your largest visible element loads — which is almost always a product image. Poor LCP means lower search rankings.

Conversion

Amazon found that every 100ms of additional load time cost them 1% in sales. For a store doing $10,000/month, shaving 500ms off your page load could mean $500/month in recovered revenue.

SEO

Images with proper alt text, descriptive filenames, and structured data appear in Google Image Search — a significant traffic source for ecommerce. Missing alt text means you're invisible in image search.

Image Formats: What to Use When

WebP (Best Default)

WebP offers 25-35% smaller file sizes than JPEG at equivalent quality. Supported by all modern browsers (97%+ global support). This should be your default format for product images.

AVIF (Cutting Edge)

AVIF compresses even better than WebP — up to 50% smaller than JPEG. Browser support is growing but not universal. Use AVIF with WebP fallback for maximum savings.

JPEG (Fallback)

Still the safe choice when you need universal compatibility. Use quality 80-85 for a good balance between file size and visual quality. Never upload images at quality 100.

PNG (Use Sparingly)

Only use PNG when you genuinely need transparency (logos, icons over colored backgrounds). PNGs are 2-5x larger than JPEG/WebP for photographic content. Never use PNG for product photos.

Sizing Rules

• Product thumbnails: 300-400px wide, keep under 30KB
• Product detail images: 800-1200px wide, keep under 150KB
• Hero/banner images: 1600-2000px wide, keep under 250KB
• Never upload images larger than 2500px — no screen needs more than that
• Use responsive images (srcset) to serve different sizes for different devices

Alt Text Best Practices

Alt text serves two purposes: accessibility for screen reader users, and SEO for search engines. Good alt text is:

• Descriptive: "Blue Nike Air Max 90 running shoe, side view" not "shoe" or "IMG_4532"
• Include the product name: "Ceramic Pour-Over Coffee Dripper - Matte Black" not "product photo"
• Skip "image of" or "photo of": Screen readers already announce it as an image
• Under 125 characters: Screen readers may truncate longer text
• Unique per image: Don't use the same alt text for 6 different product angles

Lazy Loading

Lazy loading defers image downloads until they're about to scroll into view. This dramatically improves initial page load time because the browser only downloads the images the user actually sees.

Implementation is simple:

<img src="product.webp" alt="..." loading="lazy" />

Important: Don't lazy-load above-the-fold images (hero images, first product photo). These should load immediately. Only lazy-load images below the fold.

Common Mistakes

1. Uploading camera originals. A 4000x3000px JPEG from your phone is 3-8MB. Resize and compress before uploading.
2. Using PNG for product photos. A product photo saved as PNG can be 2MB. The same image as WebP is 150KB.
3. Missing alt text entirely. Most stores have alt text on 30-50% of images. Search engines can't see images without alt text.
4. Same alt text on every image. "Product image" repeated 200 times tells Google nothing useful.
5. No responsive images. Serving a 2000px image to a mobile device wastes bandwidth and slows loading.
6. Images in CSS backgrounds. Search engines can't index CSS background images. Use HTML img tags for product images.

Platform-Specific Tips

Shopify

Shopify automatically converts images to WebP and generates multiple sizes. But it won't resize your originals — upload at 2048px max width. Use Shopify's image_tag with srcset for responsive images.

WooCommerce

Install an image optimization plugin (ShortPixel, Imagify, or Smush). WooCommerce doesn't auto-optimize. Set your thumbnail sizes in Settings → Media. Use WebP conversion plugins.

BigCommerce

BigCommerce serves images via Akamai CDN and auto-generates multiple sizes. Upload high-quality originals (2048px) and let the platform handle sizing. Add alt text in the product editor.

Automated Monitoring

StoreVitals checks for oversized images, missing alt text, and broken image sources as part of every health scan. We spot-check images across your store and flag the ones that need attention.

Run a free scan to see how your store's images stack up.