Image Optimization for Framer E-Commerce and Product Pages

For Framer-built e-commerce and product showcase sites, images aren't just decoration — they're the product. Customers need to see sharp, detailed product photos before purchasing. But those same high-quality images can make your site unbearably slow.

Here's how to balance image quality with performance for maximum conversions.

Why Product Image Speed Matters

E-commerce data consistently shows the connection between speed and revenue:

Every second your product page takes to load costs you real sales. And product pages are inherently image-heavy — often 5-15 product photos plus thumbnails, lifestyle shots, and comparison images.

Product Image Best Practices

Primary Product Photos

These are the hero images customers zoom into. They need to look crisp but load fast:

• Format: WebP lossy — best compression-to-quality ratio for photographs
• Quality: 82-85 — high enough for product detail, low enough for speed
• Max dimensions: 1600px wide — covers all display sizes including zoom
• Target file size: 80-150KB per product image

Thumbnail Images

• Quality: 72-78 — displayed small, so lower quality is invisible
• Max dimensions: 400px wide
• Target file size: 15-30KB per thumbnail

Category Page Optimization

Category pages display dozens of product cards, each with an image. On a page showing 24 products, unoptimized images can total 50MB+.

The strategy:

1. Use smaller thumbnails — category cards don't need full-size images
2. Compress aggressively — quality 75 is fine for card-sized images
3. Rely on lazy loading — Framer lazy-loads below-fold images automatically
4. Optimize above-fold cards first — the first 6-8 products should load instantly

Gallery and Zoom Images

Product galleries often include a zoom feature. This requires higher resolution, but you can still optimize:

• Use a two-tier approach: compressed thumbnail for initial display, larger image loaded on zoom
• The zoom image can be 2000-2400px wide at quality 85 — still much smaller than an uncompressed source
• WebP handles photographic detail beautifully at these settings

CMS Product Collections

If your Framer store uses CMS collections for products, Skwiz's CMS scanner is essential:

1. Scan your product collection with Skwiz
2. Apply WebP format, quality 82, max width 1600px
3. Preview and batch replace all product images
4. Re-scan monthly as new products are added

For a store with 100+ products and 3 images each, this single optimization pass can reduce total bandwidth by 70-85%.

Conversion Impact Data

Real results from Framer-built product sites optimized with Skwiz: