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.
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.
