Krunkit
E-Commerce
Optimization
Performance

Image Optimization for E-Commerce: How Product Photos Impact Conversions and Revenue

A practical guide to optimizing product images for e-commerce — format selection, compression strategies, lazy loading, responsive images, and the measurable impact on page speed, conversions, and sales.

Krunkit Team··13 min read

Product images are the most important content on any e-commerce page. They're also, typically, the heaviest. A single product page can easily serve 3-8 MB of images between the hero shot, alternate angles, zoom views, and related product thumbnails.

This creates a direct tension: shoppers want large, detailed images to evaluate products, but heavy images slow down the page. And slow pages cost real money.

This guide covers the practical steps to optimize e-commerce images — from choosing the right format and compression settings to implementing lazy loading and responsive images — with data on how each change impacts your bottom line.

The Business Case: Page Speed and Revenue

The relationship between page speed and e-commerce revenue is well-documented and consistent across studies:

  • Deloitte (2020): A 0.1-second improvement in mobile site speed increased conversion rates by 8.4% for retail sites and 10.1% for travel sites.
  • Google/SOASTA: Pages loading in 2.4 seconds had a 1.9% conversion rate. At 3.3 seconds, it dropped to 1.5%. At 4.2 seconds, it fell below 1%.
  • Akamai: A 100-millisecond delay in load time can decrease conversion rates by 7%.
  • Amazon (internal): Every 100ms of latency costs 1% in sales — a figure that, at Amazon's scale, translates to billions per year.
  • Walmart: For every 1-second improvement in page load time, conversions increased by 2%.

Images typically account for 50-75% of total page weight on e-commerce sites. This means image optimization is the single highest-impact performance improvement you can make.

A Concrete Example

Consider a mid-size e-commerce site with:

  • 500,000 monthly sessions
  • 2.1% conversion rate
  • $85 average order value
  • Current page weight: 4.8 MB (3.4 MB from images)

Optimizing images to reduce page weight by 60% (from 3.4 MB to 1.36 MB) could improve load time by 1-2 seconds on typical connections. Based on the research above, a conservative estimate of conversion rate improvement is 0.2-0.4 percentage points.

At a 2.3% conversion rate (up from 2.1%):

  • Monthly orders: 11,500 (up from 10,500)
  • Monthly revenue increase: $85,000
  • Annual revenue increase: $1,020,000

These numbers vary by industry and audience, but the directional impact is consistent. Image optimization is not a cosmetic improvement — it's a revenue lever.

Format Strategy for Product Images

Different product image types have different optimal formats. Here's a practical breakdown:

Product Photos on White Backgrounds

This is the bread and butter of e-commerce — product shots on clean white or light backgrounds.

Recommended format: WebP (lossy, quality 78-82)

  • JPEG artifacts are most visible in the clean background areas around the product. WebP handles these transitions better.
  • At quality 80, WebP typically produces files 25-35% smaller than equivalent JPEG.
  • Wide browser support means you can serve WebP as the primary format with JPEG fallback.

File size example (1200x1200 product photo):

| Format | Quality | File Size | |--------|---------|-----------| | JPEG (standard) | 80 | 285 KB | | JPEG (MozJPEG) | 80 | 248 KB | | WebP | 80 | 192 KB | | AVIF | 70 | 138 KB |

Lifestyle and Context Photos

Lifestyle shots showing products in use — models wearing clothing, furniture in a room setting, food being prepared.

Recommended format: AVIF with WebP fallback

  • These images have complex backgrounds and color gradients where AVIF's advanced compression excels.
  • AVIF's ability to preserve subtle color transitions and skin tones at lower file sizes is particularly valuable here.
  • Encoding time is less critical since these images are typically processed once in a pipeline.

Product Images with Transparency

Cut-out products on transparent backgrounds for use in banners, email templates, and customizable layouts.

Recommended format: WebP (lossless or near-lossless with alpha)

  • PNG with transparency often produces very large files. WebP lossless with alpha typically reduces these by 40-50%.
  • For images where slight quality loss is acceptable, WebP lossy with alpha offers even better compression.
  • Avoid JPEG entirely — it doesn't support transparency.

File size example (800x800 product cutout with alpha):

| Format | Mode | File Size | |--------|------|-----------| | PNG-24 + alpha | Lossless | 1.2 MB | | PNG (optimized) | Lossless | 890 KB | | WebP | Lossless + alpha | 520 KB | | WebP | Lossy (q85) + alpha | 185 KB |

Zoom/Detail Views

High-resolution images that users can zoom into to examine product details — fabric texture, stitching, jewelry details.

Recommended format: Progressive JPEG or WebP, served at 2x resolution

  • These images are loaded on demand (when the user clicks "zoom"), so initial page load isn't affected.
  • Progressive JPEG is useful here because it renders a low-quality preview quickly while the full image loads.
  • Consider serving a lower-resolution WebP initially and loading the full-resolution version only when zoom is activated.

Thumbnail Grids

Small product images in category pages, search results, and "related products" sections. These are often the most numerous images on a page.

Recommended format: WebP (lossy, quality 70-75)

  • Thumbnails are small on screen, so aggressive compression is less visible.
  • At 300x300 pixels, a WebP at quality 72 is typically 15-25 KB — well within budget.
  • These images benefit most from proper sizing (don't serve a 1200px image in a 300px slot).

Compression Settings by Product Category

Different product types have different tolerance for compression. Here are tested recommendations:

| Product Category | Format | Quality | Typical Size (1200px) | Notes | |-----------------|--------|---------|----------------------|-------| | Apparel | WebP | 80 | 160-220 KB | Fabric texture matters; don't over-compress | | Electronics | WebP | 78 | 140-190 KB | Sharp edges on devices; WebP handles well | | Jewelry | WebP | 85 | 200-280 KB | Fine detail and reflections need higher quality | | Furniture | WebP | 76 | 150-210 KB | Larger objects, less fine detail to preserve | | Food/Grocery | WebP | 80 | 170-230 KB | Color accuracy matters for freshness perception | | Books/Media | WebP | 72 | 80-130 KB | Cover art compresses well | | Beauty/Cosmetics | WebP | 82 | 180-240 KB | Color accuracy and texture both important |

These are starting points. Always verify with visual inspection on your actual product images, ideally on both desktop and mobile screens.

Responsive Images: Serve the Right Size

Serving a 2400px-wide product image to a mobile phone with a 375px viewport is one of the most common and wasteful mistakes in e-commerce. The browser downloads 4-6x more data than needed and then scales the image down on the client side.

Using srcset and sizes

The srcset attribute lets you provide multiple image sizes and let the browser choose the most appropriate one:

<img
  src="product-800.webp"
  srcset="
    product-400.webp 400w,
    product-800.webp 800w,
    product-1200.webp 1200w,
    product-1600.webp 1600w
  "
  sizes="
    (max-width: 640px) 100vw,
    (max-width: 1024px) 50vw,
    400px
  "
  alt="Blue running shoe, side view"
  width="800"
  height="800"
  loading="lazy"
/>

The sizes attribute tells the browser how wide the image will be displayed at each viewport size:

  • On mobile (under 640px): the image fills the full viewport width
  • On tablets (640-1024px): the image takes up half the viewport
  • On desktop: the image is displayed at 400px wide

With this information, the browser can select the smallest image that covers the display size at the device's pixel density.

Recommended Breakpoints for Product Images

Generate these variants for each product image:

| Variant | Width | Target Use | |---------|-------|------------| | Thumbnail | 300px | Grid views, related products | | Small | 600px | Mobile product page | | Medium | 900px | Tablet product page | | Large | 1200px | Desktop product page | | XL | 1800px | High-DPI desktop, zoom |

Five variants covers most scenarios efficiently. Some teams generate more, but the diminishing returns are real — each additional variant adds build complexity and storage cost.

Format + Size Combined

For maximum optimization, combine responsive sizing with modern formats:

<picture>
  <source
    type="image/avif"
    srcset="
      product-400.avif 400w,
      product-800.avif 800w,
      product-1200.avif 1200w
    "
    sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 400px"
  />
  <source
    type="image/webp"
    srcset="
      product-400.webp 400w,
      product-800.webp 800w,
      product-1200.webp 1200w
    "
    sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 400px"
  />
  <img
    src="product-800.jpg"
    srcset="
      product-400.jpg 400w,
      product-800.jpg 800w,
      product-1200.jpg 1200w
    "
    sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 400px"
    alt="Blue running shoe, side view"
    width="800"
    height="800"
    loading="lazy"
  />
</picture>

This serves AVIF to browsers that support it, WebP to those that don't, and JPEG as the universal fallback — all at the appropriate resolution for the device.

Lazy Loading: Load What's Visible

On a typical category page with 24-48 products, only 4-8 are visible in the initial viewport. Loading all images upfront wastes bandwidth and delays the initial render.

Native Lazy Loading

The simplest approach is the loading="lazy" attribute:

<img src="product.webp" alt="Product name" loading="lazy" width="300" height="300" />

This tells the browser to defer loading images that are outside the viewport until the user scrolls near them. It's supported by all modern browsers and requires zero JavaScript.

Important: Do NOT lazy-load images that are visible in the initial viewport (above the fold). Your hero product image and the first row of a product grid should use loading="eager" (the default) to ensure they render immediately.

Lazy Loading Strategy by Page Section

| Section | Loading | Reason | |---------|---------|--------| | Hero product image | Eager (default) | LCP element, must load immediately | | First 4-6 grid items | Eager | Likely above the fold | | Remaining grid items | Lazy | Below fold, loaded on scroll | | Related products | Lazy | Far below fold | | Footer brand logos | Lazy | Rarely seen |

Placeholder Strategies

Lazy-loaded images should have a placeholder to prevent layout shift (CLS):

  1. Fixed dimensions: Always include width and height attributes. This reserves space before the image loads.
  2. CSS aspect-ratio: Use aspect-ratio: 1/1 (for square product images) as a fallback.
  3. Low-quality placeholder (LQIP): Inline a tiny (20-30 byte) blurred placeholder as a base64 data URI. This gives visual feedback while the full image loads.
  4. Dominant color: Extract the dominant color during image processing and use it as a CSS background color placeholder.

Image Delivery Architecture

CDN Configuration

Serve all product images through a CDN with these settings:

  • Cache headers: Cache-Control: public, max-age=31536000, immutable for versioned/hashed image URLs. Product images rarely change, and when they do, the URL should change too.
  • Content negotiation: Configure the CDN to inspect the Accept header and serve AVIF/WebP/JPEG automatically. Cloudflare, Fastly, and CloudFront all support this.
  • Compression: Ensure Brotli or gzip is enabled for SVG assets. Image formats like WebP and AVIF are already compressed and should not be double-compressed.

Image Processing Pipeline

A typical e-commerce image pipeline:

  1. Upload: Merchant uploads original product photo (usually JPEG from camera, 3000-5000px wide).
  2. Normalize: Auto-orient based on EXIF, strip metadata, convert to sRGB color space.
  3. Resize: Generate all size variants (300, 600, 900, 1200, 1800px wide).
  4. Encode: For each size, generate WebP (q80) and optionally AVIF (q70). Keep JPEG (MozJPEG q80) as fallback.
  5. Store: Upload all variants to object storage (S3, GCS, etc.) with appropriate cache headers.
  6. Serve: CDN serves the best variant based on client capabilities and viewport.

For teams without a custom pipeline, tools like Krunkit can handle the compression step in the browser — useful for quickly testing different quality settings on sample products before committing to pipeline settings.

Common Mistakes to Avoid

Serving Unoptimized Originals

This sounds obvious, but it's remarkably common. Many e-commerce platforms serve the exact file the merchant uploaded — a 5 MB JPEG straight from a DSLR, complete with EXIF data, embedded color profiles, and thumbnail previews.

Always process uploaded images through a compression pipeline. Even just re-encoding with MozJPEG at quality 80 can reduce file sizes by 40-60% with no visible quality loss.

Using One Size for All Contexts

Serving the same 1200px image as both the product page hero and the 150px thumbnail in the cart widget is wasteful. The thumbnail download is 16x larger than it needs to be (the pixel count difference between 1200px and 300px is 16:1).

Over-Compressing Product Images

Aggressive compression saves bandwidth but can hurt sales. A study by Etsy found that image quality directly correlates with purchase likelihood. If compression artifacts make a product look cheap or obscure important details (fabric texture, material finish, color accuracy), you're trading small bandwidth savings for real revenue loss.

Test your compression settings on actual products, on actual devices, with actual customers if possible (A/B testing image quality levels is worthwhile for high-traffic sites).

Ignoring Mobile

Over 70% of e-commerce traffic is mobile. If you're only testing image quality on a large desktop monitor, you're missing where most of your customers are. Compression artifacts are less visible on small screens, which means you can often use more aggressive compression for mobile-specific image variants.

Missing Width and Height Attributes

Omitting width and height on <img> tags causes layout shift as images load. This hurts CLS (Cumulative Layout Shift) scores and creates a visually jarring experience. Always specify dimensions.

Performance Budget for E-Commerce

Set a performance budget for images and enforce it:

| Page Type | Image Budget | Target Images | |-----------|-------------|---------------| | Homepage | 800 KB | Hero banner + 8-12 product thumbnails | | Category Page | 600 KB | 24 product thumbnails (initial load) | | Product Page | 500 KB | Hero image + 2-3 alternate views (above fold) | | Cart | 200 KB | Product thumbnails only | | Search Results | 400 KB | 20 product thumbnails |

These budgets assume lazy loading for below-fold content. The numbers represent the initial load — total page images may be larger once the user scrolls.

Monitoring

Track these metrics continuously:

  • Largest Contentful Paint (LCP): Should be under 2.5 seconds. The LCP element on product pages is almost always the hero product image.
  • Total image weight: Monitor via WebPageTest, Lighthouse, or RUM (Real User Monitoring) data.
  • Image load errors: Track 404s and format-related load failures, especially if you're serving AVIF/WebP with fallbacks.
  • Conversion rate by page speed cohort: Segment your analytics data by page load time to quantify the revenue impact of performance.

Checklist: E-Commerce Image Optimization

Use this as a quick audit for your current setup:

  • [ ] All product images are compressed (not serving camera originals)
  • [ ] Using WebP as primary format with JPEG fallback
  • [ ] Multiple size variants generated (at least thumbnail + full size)
  • [ ] srcset and sizes attributes on product images
  • [ ] loading="lazy" on below-fold images
  • [ ] width and height attributes on all <img> tags
  • [ ] Hero/LCP image is NOT lazy-loaded
  • [ ] Images served through CDN with long cache headers
  • [ ] EXIF metadata stripped from served images
  • [ ] Image performance budget defined and monitored
  • [ ] Mobile image quality tested on actual devices

Implementing even half of these items will measurably improve your page speed, user experience, and conversion rates. Image optimization is one of the few areas where technical improvements directly and predictably increase revenue.