Why Image Optimization Matters
Images typically account for 50–80% of total page weight on Shopify stores. A single uncompressed product photo can be 3–8MB when it should be 100–300KB. This directly impacts:
40–70%
of page weight comes from images
LCP
Hero image is usually the LCP element
SEO
Image search drives significant ecommerce traffic
Unoptimized images slow down your page load, hurt your Core Web Vitals (especially LCP), increase bounce rates and hurt conversions, and waste your visitors' mobile data. The good news: image optimization is one of the easiest and most impactful speed improvements you can make. Want to see where your store stands? Test your store's speed to find out how much images are slowing you down.
The Easy Fix: Automatic Image Optimization
Before we dive into the manual techniques below — Thunder Page Speed Optimizer handles image optimization automatically, alongside script deferral, CSS inlining, and font optimization.
What Thunder handles automatically:
Smart Lazy Loading
Lazy loads below-fold images, keeps hero images eager for fast LCP
WebP/Responsive Sizing
Ensures images are served in optimal format and dimensions
Script Deferral
Defers render-blocking scripts so images load sooner
Critical CSS + Font Optimization
Complete page speed optimization — not just images
Average improvement: +27 PageSpeed points
Thunder optimizes images as part of a complete speed solution. 30-second setup, no code changes, works with all themes.
Free plan available · No credit card required · 30-second setup · Works with all themes
Image Formats: WebP, AVIF, JPEG, PNG
The format you use has a massive impact on file size. Here's what you need to know:
WebP — Best Overall Choice
25–35% smaller than JPEG at equivalent quality. Supported by 97%+ of browsers. Shopify's CDN automatically converts to WebP when you use the image_url Liquid filter.
AVIF — Most Efficient (Emerging)
50% smaller than JPEG. Slower encoding and slightly less browser support (~93%). Best for stores that need maximum compression. Shopify doesn't auto-convert to AVIF yet.
JPEG — The Standard
Best for photographs. Upload high-quality JPEGs and let Shopify's CDN handle WebP conversion. Use quality 80–85% for the best size/quality balance.
PNG — Only for Transparency
Use PNG only when you need transparency (logos, icons). PNGs are 3–10× larger than JPEG for photographs. Never use PNG for product photos.
Compression: How to Reduce File Size
⚡ Skip this step: Thunder optimizes image delivery automatically. But compressing before upload is still good practice for the best results.
Shopify does not compress your original uploads. If you upload a 5MB image, that 5MB file is stored as-is. You need to compress before uploading:
- Squoosh — Google's free tool. Drag, drop, adjust quality slider. Best for one-off images.
- TinyPNG — Batch compression. Upload up to 20 images at once (free tier).
- Target: Under 200KB per product image, under 150KB for collection thumbnails, under 300KB for hero images.
Typical compression results:
Original product photo: 3.2 MB (4000×4000 PNG)
After resize to 2048px: 1.8 MB
After JPEG conversion: 420 KB
After quality 82%: 180 KB ← Upload this to Shopify
Shopify serves as WebP: ~130 KB ← What visitors downloadSizing: Upload the Right Dimensions
Uploading oversized images is one of the most common mistakes. A 4000×4000px image that displays at 800×800px wastes 96% of its pixels. This is especially costly for mobile visitors, who are often on slower connections and smaller screens.
| Image Type | Recommended Size | Target File Size |
|---|---|---|
| Product images | 2048×2048px (square) | 100–200KB |
| Collection thumbnails | 800×800px | 50–100KB |
| Hero/banner images | 1600–2000px wide | 150–300KB |
| Blog post images | 1200px wide | 100–200KB |
| Logos/icons | As needed (SVG preferred) | Under 20KB |
Lazy Loading: Load Images on Demand
Lazy loading delays loading images until the user scrolls near them. This dramatically reduces initial page weight — a collection page with 40 products only loads the first 4–8 images upfront. For a deeper dive into implementation strategies, see our dedicated Shopify lazy loading guide.
<!-- ✅ Below-fold images: lazy load -->
<img src="product.jpg" loading="lazy" alt="...">
<!-- ✅ Hero/LCP image: load eagerly -->
<img src="hero.jpg" loading="eager" fetchpriority="high" alt="...">
<!-- ❌ Don't lazy-load your hero image -->
<img src="hero.jpg" loading="lazy" alt="...">Critical rule: Never lazy-load your hero image or above-the-fold product images. This hurts LCP because the browser intentionally delays the most important image. Thunder handles this distinction automatically.
Responsive Images with srcset
Responsive images serve different sizes for different screen sizes. A phone gets a 400px image; a desktop gets 1200px. This saves bandwidth on mobile.
<img
src="{{ image | image_url: width: 800 }}"
srcset="
{{ image | image_url: width: 400 }} 400w,
{{ image | image_url: width: 800 }} 800w,
{{ image | image_url: width: 1200 }} 1200w
"
sizes="(max-width: 768px) 100vw, 50vw"
width="800" height="800"
alt="{{ image.alt }}"
loading="lazy"
>
Most modern Shopify themes include srcset support. Check your theme's image sections to verify.
Alt Text for SEO
Alt text serves two purposes: accessibility (screen readers) and SEO (Google Image Search). Good alt text is descriptive, concise, and natural.
alt="IMG_4523" — meaningless
alt="bag leather bag crossbody bag women's bag" — keyword stuffing
alt="Red leather crossbody bag with gold hardware" — descriptive and natural
In Shopify, set alt text on each product image in the product editor. For theme images, add alt text in the section settings or directly in the Liquid template.
Shopify's Built-In Image CDN
Shopify automatically serves your images through a CDN (via Cloudflare), meaning they're delivered from servers close to your visitors worldwide. The CDN also handles:
- Automatic WebP conversion — when you use the
image_urlLiquid filter - On-the-fly resizing — request specific sizes with
| image_url: width: 800 - Caching — images are cached at edge locations for fast delivery
You don't need a separate image CDN or optimization service. But the CDN doesn't compress your originals or handle lazy loading — that's your responsibility (or Thunder's). For a full walkthrough of every optimization lever available, read our complete Shopify speed optimization guide.
Manual Image Optimization vs. Thunder
Frequently Asked Questions
What is the best image format for Shopify?
WebP is the best overall format for Shopify in 2026 — it's supported by 97%+ of browsers and provides 25–35% smaller files than JPEG at equivalent quality. Shopify's CDN automatically serves WebP when you use the image_url Liquid filter. Thunder also ensures all images are served in optimal formats automatically.
What size should Shopify product images be?
Upload product images at 2048×2048px maximum — this provides sharp quality on retina displays while keeping file sizes manageable. Shopify's CDN serves different sizes based on the viewing device. For collection thumbnails, 800×800px is sufficient. Hero/banner images should be 1600–2000px wide.
Does Shopify automatically optimize images?
Partially. Shopify's CDN automatically serves WebP format and provides responsive sizing through the image_url Liquid filter. However, Shopify does NOT compress your original uploads — if you upload a 5MB image, that 5MB file is stored as-is. You need to compress images before uploading, or use Thunder which handles image optimization automatically.
Should I use an image optimization app on Shopify?
For stores with more than a handful of products, yes. Manually compressing every image is time-consuming and easy to forget. Thunder handles image optimization as part of its complete speed optimization — lazy loading, responsive sizing, and format conversion alongside script deferral and CSS inlining. This comprehensive approach typically yields a +27 PageSpeed point improvement.
How do I write good alt text for Shopify product images?
Good alt text is descriptive, concise, and natural. Describe what's in the image: 'Red leather crossbody bag with gold hardware' is better than 'bag' or 'IMG_4523.' Include your product name naturally. Keep it under 125 characters. Don't stuff keywords — write for a person who can't see the image.
Does image optimization affect Shopify SEO?
Yes, in multiple ways. Optimized images improve page speed (Core Web Vitals), which is a direct Google ranking signal. Descriptive alt text helps rank in Google Image Search. Properly sized images prevent layout shift (CLS), another Core Web Vital. Thunder optimizes all of these aspects automatically.
How do I optimize images on Shopify without an app?
Before uploading: compress images with TinyPNG or Squoosh to under 200KB, save as WebP or JPEG (not PNG for photos), and resize to max 2048px. In Liquid templates, use the image_url filter with width parameters for responsive sizing. Add loading='lazy' to below-fold images and fetchpriority='high' to your hero image. Add descriptive alt text to every image in the Shopify admin.
What is the maximum image file size for Shopify?
Shopify allows images up to 20MB and 4472×4472 pixels. However, you should never upload images that large — aim for under 200KB per image after compression. Large files slow down your store's load time significantly, even with Shopify's CDN. For product images, 100-150KB compressed at 2048×2048px gives the best balance of quality and speed.