Image Optimization for E-Commerce to Boost Speed and Sales
Product images are the most important element on any e-commerce page. They drive purchasing decisions, establish trust, and are almost always the heaviest asset on the page. A single product page with 6 to 10 images can easily weigh 5 to 10 MB if images are not optimized.
That weight directly impacts your bottom line. Research from Google and Deloitte consistently shows that slower pages lose conversions: a 0.1-second improvement in mobile load time increases conversion rates by up to 8%. For an online store, image optimization is not a technical nice-to-have. It is a revenue lever.
Why Image Performance Matters for E-Commerce
Speed affects conversion. Shoppers abandon pages that take more than 3 seconds to load. On mobile, where the majority of e-commerce traffic now comes from, every extra second of loading costs you customers. Images are the primary reason e-commerce pages load slowly.
Speed affects search ranking. Google uses Core Web Vitals as a ranking signal. Largest Contentful Paint (LCP), the metric most affected by images, must be under 2.5 seconds for a "good" rating. Faster pages rank higher, which means more organic traffic.
Speed affects ad spend. If you run paid ads that land on slow product pages, your cost per acquisition goes up because visitors bounce before converting. Optimizing images improves your return on ad spend without changing your ad budget.
Choosing the Right Format for Product Images
| Image type | Recommended format | Why |
|---|---|---|
| Product photos (white background) | WebP or AVIF | Best compression for photographic content |
| Product photos (transparent background) | WebP with alpha | Smaller than PNG with transparency |
| Lifestyle / hero images | AVIF with WebP fallback | Maximum compression for large images |
| Product thumbnails | WebP at Q70 | Aggressive compression acceptable at small sizes |
| Zoom / detail views | WebP at Q85-90 | Higher quality for close inspection |
| Open Graph / social sharing | JPG at 1200x630 | Best compatibility with social crawlers |
Use the <picture> element to serve modern formats with a JPG fallback:
<picture>
<source srcset="product.avif" type="image/avif">
<source srcset="product.webp" type="image/webp">
<img src="product.jpg" alt="Blue running shoes, side view" width="800" height="800" loading="lazy">
</picture>
For the LCP image (usually the main product photo above the fold), add fetchpriority="high" and do not use loading="lazy".
Compression Settings for E-Commerce
E-commerce images need to balance quality and file size carefully. Shoppers zoom in on products, so aggressive compression that might be fine for a blog post is too much for a product detail page.
Recommended quality settings:
| Image role | WebP quality | AVIF quality | Typical file size |
|---|---|---|---|
| Main product image | 82-88 | 70-78 | 80-150 KB |
| Thumbnail grid | 68-75 | 55-65 | 15-40 KB |
| Hero / banner | 78-85 | 65-75 | 100-200 KB |
| Zoom / detail | 88-95 | 78-85 | 150-300 KB |
Always compress from the highest quality source. Start with the original camera output or studio photo, compress once to the target quality, and serve that file. Never compress an already-compressed JPG.
Test with your actual products. Compression artifacts are more visible on some products than others. Clothing textures, jewelry reflections, and matte surfaces show artifacts earlier than smooth plastic or simple packaging. Test a few representative images before applying settings across your catalog.
Responsive Images for Mobile Shoppers
Over 60% of e-commerce traffic comes from mobile devices. Serving a 2000px product image to a phone with a 390px screen wastes bandwidth and slows down the page.
Use srcset to let the browser pick the right size:
<img
srcset="product-400.webp 400w, product-800.webp 800w, product-1200.webp 1200w"
sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 600px"
src="product-800.webp"
alt="Blue running shoes"
width="1200"
height="1200"
loading="lazy"
>
Generate three to four sizes per image: 400px (mobile), 800px (tablet/desktop sidebar), 1200px (full-width desktop), and optionally 2000px (zoom view). This covers the vast majority of display scenarios.
For thumbnails in a product grid, a single 400px WebP at quality 70 is sufficient. These images are displayed at 150 to 250px, so even a 400px source is more than enough.
Image SEO | Alt Text, File Names, and Structured Data
Optimized images drive organic traffic through Google Image Search, which can be a significant traffic source for e-commerce.
Alt text. Write descriptive, specific alt text for every product image. Include the product name, key attributes (color, material, size), and the view angle when relevant.
Good: alt="Blue Nike Air Max 270 running shoes, side view on white background"
Bad: alt="product image" or alt="IMG_4521"
File names. Use descriptive, hyphenated file names that include relevant keywords: blue-nike-air-max-270-side.webp, not product-1.webp.
Structured data. Add Product schema markup with image URLs to help Google understand your product pages:
{
"@context": "https://schema.org",
"@type": "Product",
"name": "Nike Air Max 270",
"image": [
"https://example.com/images/blue-nike-air-max-270-front.webp",
"https://example.com/images/blue-nike-air-max-270-side.webp",
"https://example.com/images/blue-nike-air-max-270-back.webp"
]
}
Lazy loading. Use loading="lazy" on all product images below the fold (secondary angles, related products, recommendations). Do not lazy-load the main product image above the fold.
Measuring the Impact on Conversion Rate
Image optimization is one of the few technical improvements that has a direct, measurable impact on revenue. Here is how to measure it:
Before and after PageSpeed. Run PageSpeed Insights on your key product pages before and after optimization. Track LCP improvement specifically, as it is the Core Web Vital most affected by images.
A/B test page speed. If you have significant traffic, run an A/B test where the control group sees unoptimized images and the test group sees optimized ones. Measure conversion rate, bounce rate, and average pages per session.
Monitor real user metrics. Use your analytics platform to segment by page load time and compare conversion rates. Faster pages almost always convert better.
Expected results. For a typical e-commerce site with unoptimized images, switching to WebP/AVIF with responsive sizing and proper lazy loading typically improves LCP by 40 to 60% and reduces page weight by 50 to 70%. The conversion rate impact varies, but improvements of 5 to 15% on mobile are common.
Optimize Your Product Images
Morphix converts and compresses product images to WebP and AVIF directly in your browser. For catalogs, use the API for batch processing. No registration required for the free plan.