Image Optimization for E-commerce: Shopify & WooCommerce Guide

Why E-commerce Images Need Special Attention

Product images make or break online sales. Shoppers can't touch your products — they rely entirely on photos to make purchase decisions. But those same high-quality images can cripple your store's performance:

• Amazon found that every 100ms of latency costs 1% in sales
• Google reports 53% of mobile visitors leave if a page takes over 3 seconds
• Shopify data shows stores with faster load times have 25% higher conversion rates

The solution isn't fewer images. It's smarter images.

Recommended Image Sizes

Shopify

Image Type	Recommended Size	Format
Product images	2048 x 2048px	WebP
Collection images	1024 x 1024px	WebP
Hero/Banner	1920 x 1080px	WebP
Logo	250 x 250px	SVG or WebP
Favicon	32 x 32px	PNG

Shopify serves images at various sizes automatically, but uploading optimized WebP files means the source is already compressed.

WooCommerce

Image Type	Recommended Size	Format
Product images	1200 x 1200px	WebP
Gallery thumbnails	600 x 600px	WebP
Category images	800 x 800px	WebP
Hero/Banner	1920 x 600px	WebP
Logo	300 x 100px	SVG or WebP

WooCommerce generates multiple thumbnail sizes from your upload. Starting with an optimized source prevents bloated derivatives.

The 5-Step Optimization Workflow

Step 1: Shoot at the Right Resolution

Don't shoot 6000px photos for products that display at 800px. Set your camera to output at 2x your largest display size. For most stores, 2048px on the longest side is plenty.

Step 2: Batch Convert to WebP

Convert your product photos from JPEG/PNG to WebP:

1. Go to PixelPress bulk converter
2. Drag and drop up to 50 product images
3. Set quality to 80-85% for product photos
4. Download the ZIP file
5. Upload to your store

At quality 80%, your customers won't see any difference, but file sizes drop by 60-80%.

Step 3: Optimize Product Image Names

Search engines read file names. Use descriptive, keyword-rich names:

• Bad: IMG_4523.webp
• Good: blue-cotton-crew-neck-tshirt-front.webp

Include the product name, color, material, and view angle. This helps with Google Image Search traffic.

Step 4: Write Descriptive Alt Text

Alt text helps search engines understand your images and is essential for accessibility:

• Bad: "product image"
• Good: "Blue cotton crew neck t-shirt, front view, men's size L"

Every product image should have unique, descriptive alt text.

Step 5: Enable Lazy Loading

Both Shopify and WooCommerce support lazy loading:

Shopify — Most modern themes handle this automatically. Check your theme's documentation.

WooCommerce — WordPress adds loading="lazy" by default since version 5.5. For gallery images, verify your theme applies it.

Compression Settings by Image Type

Not all product photos need the same quality:

Image Type	Quality	Why
Primary product photo	85%	Shoppers zoom in — keep it sharp
Alternate angles	80%	Good enough for decision-making
Lifestyle/context photos	75%	Typically viewed smaller
Size charts, spec graphics	100% (lossless)	Text must stay crisp
Category banners	75%	Large display area, lower detail needed

Impact on Store Performance

Here's what optimization looks like for a real store with 200 products (4 images each = 800 images):

Metric	Before	After WebP	Improvement
Total image size	1.2GB	320MB	73% smaller
Average page images	15MB	4MB	73% smaller
Product page load	4.8s	1.9s	60% faster
PageSpeed score	42	78	+36 points
Bounce rate	58%	39%	-19 points

Common Mistakes

Using PNG for product photos — PNG files are 3-5x larger than WebP for photographs. Only use PNG for graphics with text or transparency that needs editing.

Uploading camera originals — A 12MP camera produces ~4000x3000px images. Your store likely displays them at 800-1200px. Always resize first.

Same quality for everything — Size charts need 100% quality. Lifestyle photos look fine at 75%. Don't waste bytes on images that don't need them.

Ignoring mobile — Over 60% of e-commerce traffic is mobile. Responsive images that serve smaller files to phones are essential.

Start Optimizing Today

The fastest way to optimize your store's images:

1. Export all your product images
2. Batch convert them to WebP with PixelPress
3. Re-upload the optimized versions
4. Update alt text while you're at it

For a 200-product store, this process takes about an hour and can dramatically improve your page speed, SEO rankings, and conversion rates.

Try PixelPress — free, no account needed, and your images never leave your browser.