Key takeaways
- Shopify automatically converts images to WebP — but large source files still slow your store down.
- Unoptimised images are one of the most common causes of poor Core Web Vitals scores on Shopify.
- Compress images before uploading using free tools like Squoosh or TinyPNG.
- Target under 500KB for product images and under 1MB for hero/banner images.
Shopify does a lot of image handling for you — format conversion, CDN delivery, responsive sizing. But it can only work with what you give it.
If you upload a 5MB product photo, Shopify will serve a smaller version — but the source file is still large, and that creates overhead. Compressing images before upload is a simple habit that pays off in faster load times, better SEO, and lower bounce rates.
Why you can trust us
Jacques has 15+ years of Shopify development experience and has diagnosed slow-loading storefronts for hundreds of brands. We built Fudge — an AI storefront editor used by hundreds of Shopify stores, with a 5.0 rating on the Shopify App Store.
Does Shopify compress images automatically?
Partially.
Shopify automatically:
- Converts images to WebP format (smaller file size, same quality)
- Serves images via its global CDN
- Generates multiple sizes for different screen widths
Shopify does NOT:
- Compress your source files before storing them
- Strip unnecessary metadata from uploads
- Lazy-load all images on your page by default (depends on your theme)
So yes, Shopify helps — but starting with an already-compressed image gives the CDN less to work with and speeds things up further.
Why image compression matters for your Shopify store
Page speed directly affects two things: SEO rankings and conversion rate.
Google uses Core Web Vitals as a ranking signal. The main metric affected by large images is Largest Contentful Paint (LCP) — how long it takes for the biggest element on the page (usually a hero image or product photo) to load.
Slow LCP = lower rankings. And for every 100ms of extra load time, conversion rate drops. Compressed images are the single fastest win for most Shopify stores.
Related: Add Alt Text to Images in Shopify.
How to compress images before uploading to Shopify
Free tools
Squoosh — Google’s browser-based compressor. Supports WebP, AVIF, and JPEG. Shows before/after file size comparison. Best for one-off images.
TinyPNG / TinyJPG — Simple drag-and-drop compression. Reduces PNG and JPEG files by 60–80% with minimal visible quality loss. Free up to 500 images/month.
ImageOptim — Mac app for batch compression. Good for processing a folder of images before a product launch.
Recommended settings
| Image type | Format | Max file size | Max dimensions |
|---|---|---|---|
| Product image | WebP or JPEG | 500KB | 2048 × 2048px |
| Hero / banner | WebP or JPEG | 1MB | 2560 × 1440px |
| Background image | WebP or JPEG | 800KB | 1920 × 1080px |
| Icon / logo | PNG or SVG | 100KB | As needed |
Tip: You don’t need images larger than 2048px wide. Shopify’s max display width is 2048px — anything larger just adds file size without improving quality.
How to compress existing Shopify images in bulk
If your store already has hundreds of unoptimised images, going through them manually isn’t practical. A Shopify app can handle bulk compression of your existing media library.
TinyIMG and Crush.pics are two well-regarded options on the Shopify App Store. Both scan your existing product images, compress them, and replace the originals — usually without any visible quality difference.
Look for an app that shows before/after file sizes and lets you roll back if needed.
How to lazy load images in Shopify
Lazy loading means images only load when a user scrolls close to them — rather than all at once when the page first loads. This dramatically improves initial page load time.
Most modern Shopify themes (Dawn, Horizon, etc.) lazy load images by default using the loading="lazy" attribute on <img> tags. To check yours: right-click any image on your store → Inspect → look for loading="lazy" in the HTML.
If your theme doesn’t include it, a developer (or Fudge) can add it to your image templates.
How image compression affects your Shopify speed score
Shopify’s speed score is based on Google Lighthouse, which measures real-world performance. Large images show up as:
- “Properly size images” — images served much larger than displayed
- “Efficiently encode images” — images that could be compressed more
- “Defer offscreen images” — images loaded before the user can see them
Fixing the first two is entirely within your control by compressing before upload. Most stores can gain 10–30 speed score points just from image optimisation.
What image format should I use for Shopify?
Use WebP for the best combination of quality and file size — it’s typically 25-35% smaller than JPEG at the same visual quality and is supported by all modern browsers. Shopify automatically converts uploaded images to WebP when serving them to compatible browsers. For product images, JPEG is the safe fallback for older tools. Use PNG only when you need a transparent background (logos, icons). Avoid GIF for anything other than short animated loops — use short MP4 video instead for better compression. See also: how to lazy load images in Shopify for the next step in image performance optimisation.
FAQ
No. Shopify's CDN optimization helps but only does so much — it can't fix a bloated source file. A 5MB upload becomes a smaller served file but the underlying file is still huge, which slows backups, theme exports, and Shopify Admin browsing. Compress before upload regardless of CDN behavior.
WebP: smallest size at equivalent quality, supports both photos and graphics with transparency, ideal for most product images. JPEG: widely compatible, slightly larger than WebP, good for photos. PNG: largest file size, supports transparency, only use for logos/icons or graphics with sharp edges. Shopify auto-converts uploaded images to WebP for supporting browsers.
Yes, past a threshold. JPEG quality at 80% is usually visually identical to 100% but 30–50% smaller; below 60% you start seeing artifacts (blocky areas, gradient banding). For WebP, 80% quality is also a good default. Always view the compressed version at 100% zoom on a real screen before uploading.
Yes via apps (TinyIMG, Crush.pics, etc.) — they replace existing images with compressed versions. Shopify itself doesn't have a built-in bulk recompression. For one-off products, manual download → recompress → re-upload works but is slow. Or describe what you want to Fudge ("audit our store for product images over 500KB and propose compressed replacements") and it produces a list with before/after sizes for review.
Significantly. Image weight is the #1 cause of slow Shopify stores — compressing a 3MB hero to 300KB can drop LCP by 1–2 seconds on slow connections. Most Shopify stores can gain 10–30 PageSpeed score points just from image optimization without other changes. The single highest-leverage performance fix.
Related: Speed Up a Shopify Theme.
Related: Fix Render-Blocking Scripts in Shopify.