What we keep seeing is this: Shopify teams often think image optimization means “compress the files and move on”. That helps, but it misses the bigger issue. On most stores, image performance is really a template strategy problem.
web.dev’s current Core Web Vitals data is clear: 73% of mobile pages have an image as the LCP element, and only 15% of pages that could benefit are using fetchpriority for those images (web.dev). Shopify’s own Liquid documentation also gives developers a lot of the right primitives already. The image_tag filter automatically adds width and height attributes based on the image dimensions and aspect ratio, defaults lower-page sections to lazy loading when appropriate, and supports preload for true above-the-fold images (Shopify.dev).
So the real opportunity on Shopify is not just smaller files. It is better decisions about:
- which image is actually the LCP image
- when an image should or should not be lazy-loaded
- how product and collection templates describe image sizes
- how much media is shipped before the customer has shown intent
If you get those decisions right, product and collection pages usually become faster without looking “optimized” in a cheap way.
Why Shopify image optimization is mostly a template problem
Compression is the obvious part, so most teams start there.
But on Shopify, the bigger problems are usually:
- loading the wrong image first
- lazy loading the hero or first product image
- sending oversized product-gallery assets on the initial render
- failing to reserve space for media
- using generic section logic that does not reflect actual viewport needs
This is why some stores still feel slow even after converting their images to modern formats. The storefront is not only moving bytes. It is making poor decisions about image priority.
What to optimize on collection pages versus product pages
These templates fail differently.
Collection pages
Collection templates often become heavy because they combine:
- a large hero or collection banner
- filter UI
- product cards with multiple images
- quick-add or hover-state media
- badges and merchandising overlays
The image problem here is usually over-delivery. Too many images, too large, too early, and sometimes with hover or quick-view logic increasing payload before the user shows intent.
Product pages
Product pages usually fail because the primary media experience is too ambitious too early:
- huge hero asset
- extra thumbnails loaded eagerly
- video or 3D media competing with the main image
- variant galleries swapped without clear priority logic
That is why Shopify image work should always be template-specific. The right answer on a collection grid is not always the right answer on the PDP.
The image rules that matter most on Shopify
1. Use Shopify’s image pipeline intentionally
Shopify already gives you a CDN and transformation controls. The image_url filter lets you request an image at a chosen width so you are not always shipping the original asset size (Shopify.dev).
That means the first question is not “did the merchant upload a large source image?” The first question is “what size is this template actually requesting and rendering?”
If the theme keeps requesting much larger assets than the layout needs, the file format alone will not save the page.
2. Render storefront images with image_url and image_tag
Shopify’s modern Liquid image flow exists for a reason.
Using image_url and image_tag together helps with:
- predictable sizing
- generated
srcset - width and height attributes
- lazy loading rules
- preload support for genuinely critical images
If a theme bypasses that pattern without a strong reason, image handling often becomes less stable and less portable across templates.
3. Do not lazy load the image that owns LCP
This is still one of the easiest performance mistakes to spot.
Shopify’s documentation explicitly says you should not lazy load above-the-fold images. So if the hero banner, first product image, or leading collection image is controlling LCP, do not send it down a lazy-loading path.
It sounds simple, but themes still get this wrong when:
- every image is assigned the same lazy-loading rule
- section logic does not distinguish first viewport from lower sections
- apps inject additional media late and confuse visual priority
4. Use preload carefully for the one image that deserves it
Shopify’s image_tag supports preload: true, and the docs note that it should be used sparingly for above-the-fold images.
That is the right mindset.
Preloading too many images dilutes the benefit. Preloading the true LCP image can help. The goal is not “preload more assets”. The goal is “preload the single image that controls the first meaningful render”.
5. Be honest about sizes and responsive layouts
Collection templates are especially sensitive here.
If your product grid displays an image at a smaller rendered size than the browser expects from the markup, the storefront can still download larger assets than necessary. That is why responsive image strategy is not just about having a srcset. It is about making the browser’s choice accurate.
The practical question is:
Does the browser know how large this image will actually render at each breakpoint?
If not, the grid often over-downloads.
6. Reserve space so media does not shift the layout
CLS problems often show up when media dimensions are vague or replaced late.
Shopify’s image_tag default width and height behaviour helps here, which is one reason bypassing it casually is risky. The moment a product card or hero image pushes content after render, you are no longer only dealing with image weight. You are dealing with layout trust.
Common Shopify CLS offenders include:
- announcement bars appearing above a hero after load
- review stars inserting before image dimensions settle
- promo labels repositioning the product-card image
- variant swaps changing the aspect ratio unexpectedly
7. Stop loading gallery and secondary media too early
Product pages often load too much media before the user has done anything.
That usually happens when:
- all thumbnails are treated as equal priority
- video previews compete with the lead product image
- zoom libraries preload large assets immediately
- gallery images for every variant are loaded eagerly
The right default is simpler: let the main product image win the first render, then progressively load the assets users are likely to need next.
8. Separate editorial imagery from transactional imagery
Not all Shopify images have the same job.
Editorial banners, lifestyle imagery, lookbooks, and campaign media can be useful, but they should not be allowed to weaken the transactional templates that actually need to feel fast.
If a collection page must carry a banner, the banner should still respect the page’s actual commercial priority: product discovery.
If the decorative layer becomes heavier than the product-discovery layer, the image strategy is out of balance.
9. Test collection grids, predictive search, and quick view separately
Merchants often optimize the PDP hero and then assume image work is done.
But on Shopify, image performance problems often hide in:
- collection hover states
- predictive-search thumbnails
- quick-add and quick-view drawers
- cross-sell and recommendation blocks
- article cards inside mixed-content sections
That is why image optimization is tightly connected to the same storefront surfaces discussed in our Shopify speed optimization guide and our article on auditing Shopify app bloat.
The common Shopify image mistakes that hurt performance most
Treating all images as equal priority
The browser should not think the fourth gallery thumbnail matters as much as the lead product image.
Shipping oversized assets into small card layouts
This is one of the most common collection-page inefficiencies.
Letting apps inject extra media into the first viewport
Badges, review layers, trust widgets, and marketing tools can all complicate the image-loading order.
Using the same lazy-loading rule on every template
Collection grids, product heroes, editorial cards, and lower-page sections do not need the same behaviour.
Ignoring the SEO side of image handling
Image optimization is not only about speed. Product and collection images still need coherent alt text, template logic, and discoverable placement. If the visual layer is messy, both the page experience and the content signal get weaker.
How image work connects to SEO on Shopify
This is where speed and SEO meet in a practical way.
When the LCP image is handled well, the product or collection page usually becomes easier to use, easier to crawl cleanly, and easier to trust visually. When the image layer is handled badly, the storefront often ends up with:
- weaker first impressions
- slower product discovery
- more layout shift
- worse interaction readiness
- harder merchandising QA
That does not mean every image tweak changes rankings directly. It means the same image decisions affect the page experience that both users and search systems have to interpret.
And on collection pages specifically, this overlaps with the taxonomy and filter decisions we covered in our Shopify collection filters SEO guide. A heavy image layer can make an already complex collection template much harder to recover.
EcomToolkit’s Take
Our view is simple: Shopify image optimization works best when you stop thinking like a compressor and start thinking like a template editor.
The strongest stores know which image owns the first viewport, which images can wait, and which layouts are silently over-downloading every time a collection page opens. They also avoid treating every piece of storefront media as equally important.
The weak pattern is when teams chase format changes but leave the priority model untouched. If the wrong image is still lazy-loaded, the wrong gallery assets are still eager, and the wrong card sizes are still being requested, the page may be technically compressed and still operationally slow.
If you want the practical default, use this:
Make the lead image fast, make the rest proportional, and make the browser’s choices easy.
That rule goes further than most “optimize your images” advice.
Final checklist for Shopify image optimization
- identify the real LCP image on product and collection templates
- use Shopify’s
image_urlandimage_tagflow intentionally - never lazy load the image that owns the first viewport
- preload only the image that truly deserves it
- make
srcsetandsizesmatch the actual layout - reserve space to avoid layout shift
- stop loading gallery and secondary media too early
- separate decorative imagery from transactional imagery
- test collection grids, predictive search, and quick-view surfaces separately
- treat image optimization as part of template strategy, not just asset compression
If you want to keep building the performance cluster, read this next with our guide to Shopify speed optimization that actually moves Core Web Vitals and our article on how to audit Shopify app bloat before it slows your store.