On most Shopify stores, images are the single biggest contributor to page weight, and usually the fastest thing to fix. Unlike app bloat or theme code, which often needs a developer to untangle, a meaningful chunk of Shopify image optimisation is genuinely a few settings and habits away from being fixed properly.
The good news is that Shopify already does a lot of the heavy lifting for you through its CDN, if your theme is set up to use it correctly. The bad news is that a lot of stores, including ones on modern Online Store 2.0 themes, are still uploading oversized files, serving the wrong image size to mobile devices, or letting a hero banner sit at 4MB because nobody checked before hitting publish.
This guide covers what Shopify does automatically, what you still need to do yourself, and gives you a step-by-step checklist to work through on your own store.
What Shopify’s CDN Already Does for You
Shopify serves every image you upload through its own content delivery network (cdn.shopify.com), and that CDN is more capable than most merchants realise.
Automatic resizing via image_url filters. In Liquid, images can be requested at a specific size using filters like | image_url: width: 800. This tells Shopify’s CDN to generate and serve a resized version of the original file on the fly, rather than sending the full-resolution upload to every visitor. Most modern themes already do this throughout product, collection, and homepage templates, but custom sections, especially ones added by apps or a previous developer, sometimes skip it and just reference the raw image.
Automatic format negotiation, including WebP. Shopify’s CDN can serve WebP (a more efficiently compressed format) to browsers that support it, without you needing to manually convert and re-upload every image. This happens automatically based on the browser’s request headers when images are served through the CDN properly, again, the catch is that this only works when the theme is requesting images the right way rather than linking straight to a static file URL.
A genuinely large amount of built-in headroom. Because resizing happens at request time from the CDN, you don’t need to manually create five versions of every image for five breakpoints. One reasonably sized master upload, requested at different widths via srcset, covers most responsive needs.
None of this means you can upload whatever you want and trust the CDN to fix it. Resizing down still costs more than starting with an appropriately sized file, and a poorly optimised original will still be a poorly optimised original at a smaller pixel size.
Choosing the Right Format Before You Upload
Format choice still matters even with the CDN doing automatic WebP delivery, because the CDN is converting from whatever master file you gave it.
- JPEG is still a sensible default for photographic product images, it compresses well and is broadly supported as a fallback for any browser or context where WebP negotiation doesn’t apply.
- PNG should generally be reserved for images that need transparency or sharp-edged graphics like logos and icons, since it compresses photographic detail far less efficiently than JPEG and produces noticeably larger files for the same visual content.
- WebP can be uploaded directly if your workflow supports it, but it’s not essential to do this manually, Shopify’s CDN handles the browser-appropriate format negotiation for you when images are requested through
image_url, so your energy is better spent getting the master file’s resolution and starting compression right. - SVG is worth using for simple icons and logos where possible, since vector files scale without weight penalties and often end up smaller than a rasterised equivalent at the same visual size.
Getting this right at the point of upload means you’re not relying on the CDN to do more corrective work than necessary, and it keeps your file library itself lighter, which matters if you ever export, back up, or migrate your catalogue.
Where Stores Actually Lose Speed on Images
Oversized originals
A product photo shot on a modern camera or phone can easily be 6-12MB before any compression. Uploading that directly, even if the theme resizes it for display, means the CDN has to do more processing work and the original master file itself is unnecessarily heavy to store and serve as a fallback. In our experience running Shopify performance audits, hero banner images are the most common offender, a full-bleed homepage image saved straight out of a design tool at print resolution, dropped in without resizing or compressing first.
Missing or incorrect srcset usage
srcset lets the browser choose the most appropriately sized image from a set of options, based on the visitor’s screen size and pixel density. Without it, every visitor, whether on a small phone or a large desktop monitor, can end up being served the same large image, when a mobile visitor only needed a fraction of that resolution. Most contemporary Shopify themes implement this correctly out of the box in core templates, but check custom sections and anything added by a theme customisation project, since these are the most common places srcset gets left out.
Lazy loading gaps
Native lazy loading (loading="lazy" on <img> tags) tells the browser not to download images until they’re about to enter the viewport, which matters a lot on long collection or homepage scrolls. The exception that trips people up: your largest above-the-fold image, usually the hero banner, should generally not be lazy loaded, because lazy loading it can actually delay your Largest Contentful Paint (LCP), one of Google’s Core Web Vitals. That one image should load eagerly and with priority; everything below the fold should lazy load.
Relying entirely on apps to fix compression after the fact
Image compression apps can help, particularly for merchants with large existing catalogues of unoptimised images, but they’re a clean-up tool, not a substitute for uploading sensibly sized files in the first place. Running compression after upload is reasonable; using it as a licence to skip resizing images before upload is how stores end up with hundreds of unnecessarily large master files sitting in their file library regardless of what gets served to visitors.
Decorative and duplicate images with no optimisation at all
Trust badges, payment icons, and small decorative graphics are easy to forget about, but a page with fifteen tiny unoptimised PNGs can add up to real weight, especially if they’re not sprited or combined. These are usually low-effort, high-value fixes because there’s rarely a reason not to compress and correctly size them.
Step-by-Step Shopify Image Optimisation Checklist
- Resize before you upload. Aim for master files no larger than roughly 2000px on the longest edge for hero and full-width images, and proportionally smaller for product and thumbnail images, the CDN will handle further resizing for different breakpoints from there.
- Compress before uploading, using a tool like TinyPNG, Squoosh, or your design software’s built-in export compression, targeting a reasonable file size (often well under 300-500KB for a hero image) without visible quality loss.
- Check that your theme uses
image_urlwith explicit widths, not raw hardcoded image URLs, in any custom sections you’ve had built. - Confirm
srcsetis implemented on key templates, view page source or ask your developer to check that multiple width variants are being offered, not just one fixed size. - Set lazy loading correctly: hero and above-the-fold images load eagerly; everything below the fold lazy loads.
- Add descriptive alt text while you’re in there, it won’t speed up the page, but it’s good practice for accessibility and image SEO, and you’re already reviewing every image at this point.
- Audit your existing file library for old, oversized, or duplicate uploads that are no longer used but still being stored and occasionally referenced.
- Re-test after changes using Google PageSpeed Insights, focusing on the Largest Contentful Paint and total image payload figures.
- Repeat for seasonal or campaign banners, which are often uploaded in a rush and are one of the most common places oversized images slip through.
How Much Difference Does This Actually Make?
It varies a lot by store, which is why we won’t hand you a specific percentage as if it were a universal law. What we can say from pattern, not from a fabricated statistic: stores with genuinely unoptimised hero and product images tend to see their homepage or product-page LCP improve noticeably once images are properly sized, compressed, and served via srcset, often enough to move a page from a “needs improvement” to a “good” Core Web Vitals result, though the exact shift depends on everything else happening on that page too. Image optimisation is rarely the only fix a slow store needs, but it’s consistently one of the highest-value, lowest-risk ones.
When to Bring In a Specialist
Resizing and compressing images yourself is entirely doable for most merchants, and the checklist above will get you most of the way there. Where it’s worth bringing in help is when the issue lives inside the theme code itself, custom sections that were never built to use image_url and srcset properly, a hero section that’s structurally forcing a large image to load before anything else, or a broader pattern of Core Web Vitals issues where images are one symptom among several.
That kind of theme-level diagnosis and fix is core to our Shopify performance optimisation service, we look at how your theme requests and serves images alongside everything else contributing to load time, rather than treating image compression as an isolated task.
Frequently Asked Questions
Does Shopify automatically compress images I upload?
Shopify’s CDN resizes and can serve images in more efficient formats like WebP when your theme requests them correctly, but it doesn’t aggressively compress the master file you upload. Starting with a reasonably sized, pre-compressed original still matters.
What image size should I use for a Shopify hero banner?
There’s no single universal number, but a common practical approach is to keep the master file to around 1800-2500px on the longest edge and compress it to a reasonable file size before upload, letting the CDN handle further resizing for smaller screens via srcset.
Should I lazy load every image on my Shopify store?
No. Lazy load everything below the fold, but your largest above-the-fold image, typically the hero banner, should load eagerly so it doesn’t delay your Largest Contentful Paint score.
Do I need an image compression app if I already resize images before uploading?
Not necessarily for new uploads, but compression apps are genuinely useful for cleaning up an existing library of images that were uploaded before you had a proper process in place.
Will optimising images alone fix my Shopify site speed?
Often it helps significantly, especially on image-heavy homepages and product pages, but it’s rarely the only factor. Apps, theme code, and third-party scripts also contribute to load time, so image optimisation is best treated as one part of a broader performance review.
If you’re not sure whether images or something else in your theme are behind your load times, a Shopify audit will give you a clear breakdown of what’s actually slowing your store down and where to focus first.
