Image Optimization
Image optimization is the process of reducing image file size without significantly reducing visual quality, while ensuring images are the correct format (WebP), dimensions, and compression for their use case. It's the single highest-impact performance optimization for most Shopify stores.
Why It Matters for Shopify Stores
Unoptimized images are the #1 performance issue we find across all Shopify store niches. Product photos uploaded directly from a DSLR camera or phone often exceed 5–10MB per image. Even with Shopify's CDN, serving large unoptimized images on mobile connections causes 3–8 second delays that shoppers don't wait for. A complete image optimization pass — compressing existing images, enabling WebP, implementing responsive sizing, and adding lazy loading — can reduce total page weight by 60–80%.
How to Check Your Store
Google PageSpeed Insights shows 'Properly size images' and 'Serve images in next-gen formats' diagnostics. Chrome DevTools Network tab shows image sizes. Any image over 200KB that's visible above the fold is worth optimizing.
Use the free shopify speed test toolHow to Fix It
Before uploading: compress images to under 200KB using tools like Squoosh or TinyPNG. In Shopify: ensure your theme uses Shopify's image_url filter for automatic WebP conversion. Add width/height attributes to prevent CLS. Enable lazy loading for below-fold images.
Related Terms
WebP Image Format
PerformanceWebP is a modern image format developed by Google that provides superior compression compared to JPEG and PNG — typically 25–35% smaller at equivalent visual quality.
Lazy Loading
PerformanceLazy loading is a technique where images and other resources are only loaded when they're about to enter the user's viewport — rather than all at once when the page first loads.
LCP (Largest Contentful Paint)
Core Web VitalsLargest Contentful Paint measures how long it takes for the largest visible content element on a page — usually a hero image or headline — to finish loading.
Shopify CDN
ShopifyShopify's CDN (Content Delivery Network) automatically serves your store's images, JavaScript, and CSS from servers geographically close to your visitors.
Alt Text (Image Alternative Text)
SEOAlt text is the description attribute added to image HTML tags (<img alt='.
Check your store's Image Optimization with our free tools
Get a full audit across all 6 performance categories — including performance — in under 60 seconds.
Run a Free Store Audit