How to Optimize Images for Shopify (Speed + Sales)
On Shopify, every image is a product. Slow product images mean fewer sales. Here is the complete optimization workflow.
On Shopify, every image is a product image. A slow gallery is a lost sale. Here's the complete workflow for shipping fast, sharp images on Shopify.
Shopify's automatic image pipeline
Shopify auto-converts most uploaded images to WebP and serves responsive variants via the CDN. That's a good baseline but it's NOT a substitute for pre-processing:
- Shopify converts at quality ~80, which is fine, but you'd save 10-20% more by compressing first at quality 85.
- Shopify resizes on-demand, but if you upload a 5 MB source, the original stays in the bucket forever.
- Shopify's WebP variant is sometimes larger than a hand-tuned WebP because they encode for general use, not your specific image.
The pre-upload workflow
For every product photo:
- Resize the source. Shopify product pages display images at maximum 2048×2048. Resize sources to 2048px max side.
- Compress at quality 85. Use Image Compressor. Expect 50% size reduction with no visible quality loss.
- Convert to WebP if you upload via the API. Shopify also accepts JPG / PNG and converts them itself, but uploading WebP saves a conversion step.
- Strip metadata to remove camera info and GPS if you photographed indoors at home. Use EXIF Remover.
Result: a 200-400 KB upload instead of 4-8 MB. Less storage, faster CDN propagation, snappier admin.
Product photo dimensions
| Use | Recommended dimensions |
|---|---|
| Product thumbnail | 1024×1024 |
| Product page main image | 2048×2048 |
| Hero / banner | 2880×1280 |
| Collection page | 1280×1280 |
| Cart thumbnail | 480×480 |
Shopify accepts up to 4472×4472, but anything above 2048 is wasted bytes for normal use.
Image format choice
For Shopify in 2026:
- Product photos: JPG → Shopify auto-WebP. Or upload WebP directly via API.
- Hero banners: AVIF if your traffic is mostly modern browsers; WebP fallback.
- Logos: SVG if vector source available, PNG otherwise.
- Lifestyle/styled photos: JPG/WebP.
PNG of product photos is a bandwidth crime. Convert to WebP via PNG to WebP before uploading.
Theme-level optimizations
Even with pre-processed images, your theme can hurt or help:
1. Use <picture> for hero / banner images
Theme heroes often use a single <img>. Replace with <picture> to serve AVIF/WebP/JPG via format negotiation. Most Shopify 2.0 themes support this in customizer.
2. Lazy-load product gallery
The first image is the LCP candidate: loading="eager". The next images (gallery thumbnails, recommended products): loading="lazy".
3. Use Shopify's responsive image URLs
Shopify generates img_url with size parameters: product.featured_image | image_url: width: 1080. Use the right size for each placement.
4. Explicit width/height
Liquid template:
{{ product.featured_image | image_tag: width: 1080, height: 1080, loading: 'lazy' }}
Renders with explicit dimensions, prevents layout shift.
Hero image best practices
Hero images dominate LCP on Shopify storefronts. Get them right:
- Format: AVIF or WebP (auto via
<picture>). - Size: 2880px max width (covers 1.5x retina up to 1920px display).
- Compression: quality 80-85.
- Loading:
eager+fetchpriority="high". - Preload in
<head>:<link rel="preload" as="image" href="hero.avif" type="image/avif">
A real before/after
Storefront with 8 product images on the home page:
Before:
- Total page weight: 7.2 MB (5.4 MB images)
- LCP: 4.8s on mobile
- Pagespeed score: 47
After pre-processing every image:
- Total page weight: 1.9 MB (940 KB images)
- LCP: 1.8s on mobile
- Pagespeed score: 89
Conversion lift: ~12% (real-world client data, your mileage varies).
Tools
- Image Compressor: primary tool for batch compression
- PNG to WebP: convert PNG product shots
- AVIF Converter: hero images for maximum bandwidth savings
- EXIF Remover: strip identifying metadata
- Social Media Image Resizer: create marketing-specific crops
All client-side via WASM, no uploads, no upload risk.
Related
Try Image Compressor, free in your browser
No uploads, no account. Your images never leave your device.
Open Image Compressor