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 200KB for product images and under 300KB for hero/banner images.
To compress images for Shopify, run them through Squoosh or TinyPNG before upload, keep product photos at 2048px wide or less, and use an app such as TinyIMG for images already in your store. Shopify’s CDN converts and resizes them but doesn’t fix a heavy source file.
If you upload a 5MB product photo, Shopify will serve a smaller version, but it starts from a heavy source file. 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 over 15 years of dev experience and has diagnosed slow-loading storefronts for hundreds of brands. We build Fudge, the AI operator for Shopify stores, used by 3,100+ Shopify stores and rated 4.9 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.
Wondering whether a third-party image CDN would do better? See our Shopify image CDN comparison for where the built-in CDN is enough and where Cloudinary or Bunny earn their cost.
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. Slower pages also tend to convert worse, and compressed images are often the quickest speed win on a Shopify store.
For the rest of the page-speed work, see Speed Up a Shopify Theme.
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 | 200KB | 2048 × 2048px |
| Hero / banner | WebP or JPEG | 300KB | 2560 × 1440px |
| Background image | WebP or JPEG | 300KB | 1920 × 1080px |
| Icon / logo | PNG or SVG | 100KB | As needed |
Tip: You don’t need product images larger than 2048px wide. Shopify suggests 2048 x 2048px for square product photos, and its CDN resizes every image to the width your theme requests. Full-width banners are the exception - for those and every other image type, see our Shopify image sizes guide.
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. For more on lazy loading, see How to Lazy Load Images in Shopify.
How image compression shows up in Shopify’s speed reports
Shopify’s web performance report uses real-user Core Web Vitals. PageSpeed Insights runs Lighthouse, a lab test, which flags large images under one insight: “Improve image delivery”. It lists images whose download size could be smaller, because they are served larger than displayed, compressed too lightly or in an older format. Older Lighthouse reports split this into “Properly size images” and “Efficiently encode images”.
Most of that is within your control by compressing and resizing before upload. Image optimisation alone often lifts a store’s PageSpeed score noticeably.
Scripts are the other common Lighthouse flag; see Fix Render-Blocking Scripts in Shopify.
What image format should I use for Shopify?
- WebP gives 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.
- JPEG is the safe fallback for product photos and older tools.
- PNG is only worth it when you need a transparent background (logos, icons).
- GIF is for nothing longer than a short animated loop. Use short MP4 video instead for better compression.
For the SEO side of images, see Add Alt Text to Images in Shopify.
FAQ
Should I rely on Shopify's automatic compression alone?
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 stays large, and the served version starts from a heavier source. Compress before upload regardless of CDN behavior.
What's the difference between WebP, JPEG, and PNG for Shopify?
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.
Will compressing too much hurt image quality?
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.
Can I retroactively compress images already uploaded to Shopify?
Yes via apps (TinyIMG, Crush.pics, etc.), which 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 200KB") and it lists the oversized images, page by page.
How much does image compression actually improve Shopify page speed?
Often noticeably. Heavy images are a common cause of slow Shopify stores, and compressing a 3MB hero to 300KB can cut LCP noticeably on slow connections. It is usually one of the first performance fixes worth making.
