Does my Shopify theme already lazy load product images?

Most Online Store 2.0 themes — including Dawn, Horizon, and many premium themes — include native lazy loading by default. To check, right-click any below-the-fold product image on your live store, click Inspect, and look at the tag. If you see loading="lazy" in the HTML, it is already active. If not, you will need to add it manually to your Liquid template files such as product-card.liquid or main-product.liquid.

Will lazy loading hurt my Largest Contentful Paint (LCP) score?

Lazy loading the wrong images is the most common cause of LCP regression. You must never apply loading="lazy" to your hero image, the first product image in a collection grid, or any image visible in the initial viewport. These images should use loading="eager" (or simply omit the attribute). Only images that are below the fold — not visible until the user scrolls — should be lazy loaded. Applying this distinction correctly will improve LCP, not hurt it.

What is the best way to add lazy loading in Shopify Liquid?

The recommended method is using Shopify's built-in image_tag Liquid filter with the loading: "lazy" parameter: {{ image | image_tag: loading: "lazy", widths: "165, 360, 535, 750, 1070" }}. This approach automatically injects the loading attribute, generates a responsive srcset for different screen sizes, and outputs width/height attributes that prevent layout shift. It is safer and more maintainable than manually editing raw tags throughout your theme.

Do I need a JavaScript library like Lazysizes or Lozad.js for Shopify?

No — for most modern Shopify stores, the native loading="lazy" HTML attribute is sufficient and is supported by all major browsers. JavaScript lazy loading libraries like Lazysizes or Lozad.js were necessary before browsers supported the native attribute natively. Today they are only worth adding if you want advanced effects like a blurred placeholder or dominant-color fade-in. If you do add one, load it asynchronously (async attribute on the script tag) and only apply it to below-the-fold images to avoid blocking page render.

How do I fix layout shift caused by lazy-loaded images?

Layout shift from lazy-loaded images is caused by missing width and height attributes on tags. Without explicit dimensions, the browser cannot reserve space for the image before it loads, so the page jumps as images appear. Fix it by always including width and height on every tag, or by using the image_tag Liquid filter which outputs these automatically. You can verify your Cumulative Layout Shift (CLS) score in Google PageSpeed Insights — a score under 0.1 is the target.

How much can lazy loading improve Shopify store speed?

The impact depends on how many images your pages load and how well your theme was previously optimized. For collection pages with 20–50 product images, correctly implemented lazy loading can reduce initial page weight by 60–80% and cut Time to Interactive significantly. When combined with responsive srcset attributes and modern WebP format (which Shopify delivers automatically), stores commonly see LCP improvements of 0.5–1.5 seconds and PageSpeed Insights scores jump 15–30 points. The biggest gains come on mobile where bandwidth is limited.

Ira Bodnar·July 17, 2026·14 min read

How to lazy-load Shopify product images the right way

Knowing how to lazy-load Shopify product images the right way is the single highest-leverage speed fix available to most stores — but get it wrong and you tank your Largest Contentful Paint score and lose organic rankings along with it.

Built by our community of 2,000 marketers

Free skills and prompts for paid ads and SEO

Templates for Claude, ChatGPT and Perplexity.

Clients we work withClients we
work with

Images are the single biggest drag on Shopify page speed — and most stores are loading them all at once, even the ones buried 2,000 pixels below the fold.

Lazy-loading fixes that. But the implementation details matter enormously: lazy-load your hero product image and Google punishes your LCP. Skip width and height attributes and you trigger Cumulative Layout Shift. Use a heavy JavaScript library when you didn’t need to and you’ve solved nothing.

Here’s what the data says about why this matters in 2026:

Images account for over 50% of total page weight on the average Shopify product page, according to HTTP Archive data from Q1 2026 — making lazy loading the highest-ROI performance fix available.
Google’s Core Web Vitals update means LCP now directly influences ranking position. A 1-second improvement in LCP correlates with a 7% increase in conversions (Deloitte Digital, 2024) and measurable ranking gains on competitive queries.
Native loading="lazy" is now supported by 96.4% of browsers globally (Can I Use, June 2026), meaning JavaScript-based lazy loading libraries are only needed for edge cases and advanced placeholder effects — not baseline support.

How we evaluated each approach

Over ten weeks we applied each lazy-load method to live Shopify stores across fashion, homeware, and beauty verticals, ranging from single-product stores to collections with 400+ SKUs. We measured every approach against real Chrome User Experience Report (CrUX) data, not just Lighthouse lab scores, so the rankings reflect what real visitors on real devices actually experienced.

We scored five dimensions equally:

LCP impact — does it improve or harm the Largest Contentful Paint score?
CLS safety — does it introduce layout shift from missing dimension attributes?
Implementation complexity for a non-developer Shopify merchant
Theme compatibility with Dawn, Impulse, Prestige, and custom OS 2.0 themes
Maintenance burden — does it break on theme updates?

No vendor paid for placement. Ryze is our own product, and we’ve flagged that wherever it appears so you can weigh it accordingly.

All 10 lazy-load approaches, at a glance

Rank	Approach	Best for	Effort	Rating
01	Ryze AI automated SEO Winner	Fully automated fix + monitoring	Zero	4.9/5
02	Native loading="lazy" on img tags	Most stores — baseline fix	Low	4.8/5
03	Shopify image_tag filter with lazy	OS 2.0 theme development	Low	4.7/5
04	Conditional lazy — eager first row	Collection pages 20+ products	Medium	4.7/5
05	Lazysizes JS library	Advanced blur-up placeholders	Medium	4.4/5
06	Dominant-color placeholder technique	Visual-first fashion/art stores	Medium	4.3/5
07	Lozad.js with IntersectionObserver	Custom headless Shopify builds	Medium	4.3/5
08	TinyIMG app (one-click)	Non-technical merchants	Very low	4.5/5
09	Link rel=preload for LCP image	Hero/above-fold image speed	Low	4.6/5
10	Blur-up low-quality placeholder (LQIP)	Premium brand UX on slow connections	High	4.2/5

Get a free instant audit

Get a free, instant read on your paid ads or SEO — and fix it right away.

Paid ads audit

Catch wasted spend & broad-match leaks
Find account structure gaps
Rank your quickest wins
Spot PMax & brand-search overlap
Check conversion-tracking health
Benchmark CPC vs your industry
Catch wasted spend & broad-match leaks
Find account structure gaps
Rank your quickest wins
Spot PMax & brand-search overlap
Check conversion-tracking health
Benchmark CPC vs your industry

Free · no credit card · instant

SEO audit

Find keyword & ranking gaps
Catch technical SEO issues
Rank your fastest wins
Surface thin & duplicate pages
Check indexing & crawl coverage
Compare backlinks vs competitors
Find keyword & ranking gaps
Catch technical SEO issues
Rank your fastest wins
Surface thin & duplicate pages
Check indexing & crawl coverage
Compare backlinks vs competitors

Free · no credit card · instant

The implementation guide

Approaches #2–#10: how each one works

02Best baseline fix for any Shopify theme

Native loading="lazy" on img tags

The simplest and most reliable way to lazy-load Shopify product images the right way is the native HTML loading="lazy" attribute. No library, no script, no app — just one extra attribute on your <img> tags. The browser handles the rest: it defers fetching any image that isn’t within its calculated “distance-from-viewport” threshold (roughly 1,200px on Chrome at a fast connection) and loads it just before the user would scroll into view.

To implement it, go to Online Store ’ Themes ’ Actions ’ Edit Code. Open snippets/product-card.liquid, sections/main-product.liquid, and sections/featured-collection.liquid. Find every <img> tag that lacks loading="lazy" and add it. Crucially, also ensure each tag has explicit width and height attributes — without them, the browser cannot reserve space for the image and your CLS score suffers as images pop into layout.

Verify your implementation by opening Chrome DevTools Network tab, filtering by “Img”, and scrolling the page. Images should appear in the network waterfall only when you scroll near them — not all at page load. Most stores see a 20–40% reduction in initial page bytes transferred from this step alone. See our guide on Shopify page speed optimization for the full context.

PricingFree — built into the browser

ProsZero JavaScript, zero dependencies, 96.4% browser support, no CLS risk if width/height are set

ConsNo visual placeholder effect, requires manually checking every img tag in your theme

VerdictThe right starting point for every Shopify store — audit your Liquid files and add this first

03Best approach for OS 2.0 theme development

Shopify image_tag filter with lazy loading

Shopify’s image_tag Liquid filter is the most correct way to render product images in Online Store 2.0 themes. A single line — {{ product.featured_image | image_tag: loading: 'lazy', widths: '200,400,800,1200' }} — outputs a fully formed <img> tag with a srcset covering multiple breakpoints, the correct loading="lazy" attribute, and automatic WebP delivery where the browser supports it.

The srcset is what separates this from a plain loading="lazy" attribute alone. Without responsive image sizes, a mobile visitor on a 390px screen still downloads the full 1,200px image — which is 3–6x the bytes they actually need. Combining lazy loading with correct srcset values cuts mobile data transfer by an additional 60–75% compared to naive single-src implementation.

Check Dawn’s snippets/card-product.liquid — it already uses image_tag with loading: 'lazy' for below-fold cards and loading: 'eager' for the first visible card. This conditional pattern is the gold standard. If your theme doesn’t do this yet, it’s a direct upgrade path. For broader SEO context, see our article on the complete Shopify SEO checklist.

PricingFree — built into Shopify Liquid

ProsAuto-generates srcset, handles lazy attribute, produces responsive images with one line of Liquid

ConsOnly available in Liquid templates, not in plain HTML sections or custom JavaScript renders

VerdictThe modern Shopify-native way — use this whenever you're writing or editing Liquid image output

Why this matters

Most guides tell you to add loading="lazy" and stop there. Ryze AI is the only tool in our roundup that audits every image in your store, identifies which ones are harming your LCP score, fixes the attributes automatically, and monitors for regressions after theme updates — 24/7 without any manual work. Learn more at get-ryze.ai.

04Best pattern for collection pages with many products

Conditional lazy loading — eager first row, lazy the rest

The single most common lazy-loading mistake on Shopify is applying loading="lazy" to every image on the page including the first visible product card. Chrome’s lazy loading deliberately delays image fetching — which is exactly what you want below the fold, but catastrophic for the image Google will measure as your Largest Contentful Paint. Stores that do this typically see LCP scores worsen by 400–900ms, which translates directly to ranking drops on competitive keywords.

The fix is conditional logic in your collection loop. In Liquid, you can use the forloop.index variable to apply loading="eager" (or simply omit the attribute, which defaults to eager) on the first three or four product cards — the ones visible in a typical desktop viewport — and loading="lazy" on all subsequent ones. Dawn theme implements this exact pattern since version 9.0. If your theme predates that, this is the most important single-file edit you can make.

You can also combine this with <link rel="preload"> in your theme.liquid <head> for the hero product image on product detail pages, telling the browser to fetch it at the highest priority even before it parses the rest of the DOM. This two-pronged approach — preload the LCP candidate, lazy-load everything else — is the pattern that consistently produces the best Core Web Vitals across our test stores.

PricingFree — logic implemented in Liquid

ProsProtects LCP on above-fold images while deferring everything else, follows Dawn's own pattern

ConsRequires Liquid loop logic, easy to misconfigure on custom layouts

VerdictThe most LCP-safe implementation for collection and category pages — always pair this with srcset

05Best for advanced blur-up and placeholder effects

Lazysizes JavaScript library

Lazysizes is the most popular JavaScript lazy-loading library and the one referenced in Shopify’s own developer documentation for advanced placeholder techniques. Instead of the standard loading="lazy" attribute, it uses a data-src + lazyload class pattern: the browser sees a tiny placeholder in the real src attribute, Lazysizes swaps it for the full-resolution image from data-src when the element enters the viewport.

Its standout feature is the ls.blur-up.min.js plugin, which loads a tiny 30×30 pixel version of your image first, then smoothly transitions to the full-res version as it loads. This creates the polished “image resolves as you scroll” experience you see on premium fashion stores. To use it in a Shopify theme, call the script from theme.liquid with the async attribute to avoid render-blocking, then add class="blur-up lazyload" and a 30x version of your image as the src.

The caveat: Lazysizes adds ~3KB minified+gzipped, and its data-src approach means images are invisible if JavaScript is blocked or fails. For most stores in 2026, native loading="lazy" is preferable. Use Lazysizes only when the blur-up UX is genuinely part of your brand experience and worth the added complexity.

PricingFree — open source (MIT)

ProsPowerful blur-up plugin, works in older browsers, highly configurable threshold and callbacks

ConsAdds JavaScript weight, requires data-src pattern which breaks if JS fails, more fragile

VerdictOnly use Lazysizes if you specifically need blur-up or dominant-color placeholder effects — native lazy is better for everything else

Let AI fix your Shopify image performance automatically.

✓Audits every image tag in your store for lazy-load errors
✓Fixes LCP-harming eager loads and missing srcset attributes
✓Monitors for regressions after every theme update

2,000+

Marketers

$500M+

Ad spend

Countries

06Best visual placeholder for fashion and art stores

Dominant-color placeholder technique

Rather than showing a blank white box while an image loads, the dominant-color technique fills the image container with a solid color extracted from the image itself. Shopify’s CDN supports a 1x size parameter that returns a single-pixel representative color: image | img_url: '1x'. Load this near-zero-byte image as an inline background or a tiny placeholder src, then let loading="lazy" handle the full image load.

The visual effect is subtle but meaningful: instead of the jarring content pop of a blank placeholder, visitors see the product’s dominant color fill the space — a technique used by Pinterest, Instagram, and premium Shopify themes like Prestige. For stores selling vibrantly colored products (art prints, fashion, home textiles), this can meaningfully reduce the perception of load time even before the byte count improves. Pair it with aspect-ratio CSS on the image container to prevent CLS entirely.

PricingFree — implemented in Liquid

ProsInstant visual feedback, no layout shift, elegant for product-photo-heavy stores

ConsRequires generating and storing the dominant color hex per image, extra Liquid logic

VerdictA premium touch for stores where product photography is the brand — combine with native lazy for best results

07Best lightweight JS option for custom headless builds

Lozad.js with IntersectionObserver

Lozad.js is a ~1KB lazy-loading library built on the native IntersectionObserver API — meaning it has zero polling overhead and near-zero impact on main thread execution. It uses the same data-src swap pattern as Lazysizes but without the plugin architecture, making it better suited to custom storefronts where you’re rendering images from JavaScript rather than Liquid.

For standard Shopify themes built on Liquid, Lozad adds complexity without benefit over native loading="lazy". But for headless Shopify builds using the Storefront API with a React frontend, or for custom section renderers that construct <img> elements in JavaScript, Lozad is a clean and performant option. Initialize it with a custom rootMargin like 200px 0px to begin loading images before they enter the viewport, preventing a flash of empty content on fast scrollers.

PricingFree — open source (MIT), 1KB minified+gzipped

ProsTiny footprint, IntersectionObserver API is natively fast, good for non-Liquid renders

ConsJavaScript dependency, data-src pattern, not needed for standard Liquid Shopify themes

VerdictA solid choice for headless Shopify storefronts using React or custom JavaScript rendering

08Best for non-technical Shopify merchants

TinyIMG app (one-click lazy loading)

TinyIMG is a Shopify app that bundles image compression, bulk alt-text optimization, and lazy loading into a single toggle. For merchants who don’t want to edit Liquid files, it’s the most accessible implementation path: install the app, enable lazy loading in the dashboard, and it injects the correct attributes site-wide via a lightweight embed script.

The trade-off is dependency: you’re relying on the app’s script to remain functional through Shopify updates, and it adds a small HTTP request overhead. In our testing, TinyIMG’s lazy-load output was correct and LCP-safe (it excludes above-fold images from lazy loading by default), making it a reasonable option for stores under $50K/month that want results without developer time. Above that revenue threshold, the manual implementation approaches above pay off faster. Pair it with a broader Shopify image optimization audit for the best results.

PricingFree tier available; paid from $4.99/mo

ProsNo code required, handles lazy loading + compression + alt text in one dashboard

ConsApp dependency adds a script to your storefront, less control than manual implementation

VerdictThe fastest path for non-developers who want lazy loading plus image compression without touching Liquid

09Best technique for above-fold hero image speed

link rel=preload for the LCP hero image

While the rest of this guide focuses on deferring below-fold images, the other half of the lazy-loading strategy is aggressively prioritizing the above-fold hero image. A <link rel="preload" as="image"> tag in your <head> tells the browser to begin fetching the resource immediately during the HTML parse phase — before it has encountered and processed the <img> tag in the body.

On product detail pages where the featured product photo is almost always the LCP element, this single addition typically shaves 200–500ms from measured LCP in real-user data. In theme.liquid, use Shopify’s content_for_header or a conditional block that outputs the preload only on product pages. Include an imagesrcset attribute matching your product image srcset so the browser can select the right resolution to preload. For a full walkthrough of Core Web Vitals improvements see our guide on Core Web Vitals for Shopify.

PricingFree — implemented in theme.liquid head

ProsDirectly improves LCP by fetching the critical image at highest browser priority before DOM parse

ConsOnly apply to one or two images — preloading too many defeats the purpose and delays everything

VerdictThe essential complement to lazy loading — preload your hero, lazy-load everything else

10Best premium UX for slow connection visitors

Blur-up LQIP (Low Quality Image Placeholder)

The blur-up LQIP technique serves a tiny, heavily compressed version of an image (typically 20×20 or 30×30 pixels) as an immediate placeholder, then transitions to the full-resolution image as it loads via lazy loading. The result is the smooth “image resolves into clarity” effect you see on Pinterest, Medium, and stores like the Shopify example CandyLand. On slow mobile connections — which still represent a significant portion of traffic in many markets — this dramatically reduces the perception of load time even when the actual bytes transferred are unchanged.

Implementation in Shopify uses the Lazysizes blur-up plugin combined with Shopify’s img_url filter at a tiny size: set src to image | img_url: '30x' and data-src to the full-res URL, add the blur-up lazyload classes, and apply a CSS filter transition that removes the blur once the lazyloaded class is added by the script. This is the highest-complexity implementation in this guide and should only be pursued if the visual polish is a genuine brand requirement — for most stores, native lazy loading plus preload covers 90% of the performance benefit at 10% of the effort. Related: see how product page SEO ties into image performance on Shopify.

PricingFree — implemented in Liquid + CSS

ProsPolished progressive loading experience, reduces perceived load time significantly on slow mobile

ConsMost complex implementation, requires generating and serving tiny placeholder images, more Liquid logic

VerdictWorth the effort for flagship product pages on premium brands targeting mobile-first markets

Daniel W.

Technical SEO Lead
DTC Homeware Brand

★★★★★

“

We had lazy loading on our collection pages but had accidentally applied it to the first row too. Ryze flagged the LCP regression, fixed the conditional logic, and our Google ranking for our main category page jumped from position 9 to position 4 in three weeks.”

+480ms

LCP improvement

3 weeks

Time to rank lift

Category ranking

How do you choose the right lazy-load strategy for your Shopify store?

With ten approaches ranging from a one-attribute HTML edit to a full blur-up LQIP system, the right answer depends on three variables: your technical capability, your store’s traffic volume, and how much the visual loading experience matters to your brand.

Decision 1

What is your technical level?

No code at all: TinyIMG app (Approach #8) or Ryze AI for automated auditing and fixing
Comfortable editing Liquid files: Native loading="lazy" (#2) + image_tag filter (#3) + conditional first-row logic (#4)
Developer or headless build: Lozad.js (#7), Lazysizes (#5), or full LQIP blur-up (#10)

Decision 2

What is your primary performance problem?

Slow initial page load: Native lazy loading on all below-fold images + srcset via image_tag
Poor LCP score specifically: rel=preload for hero image (#9) + conditional eager/lazy split (#4)
Poor perceived performance on mobile: Dominant-color placeholder (#6) or blur-up LQIP (#10)
All of the above, automatically: Ryze AI (#1)

Decision 3

How often does your theme change?

Frequent theme updates or custom development: Ryze AI automated monitoring catches regressions after every update
Stable theme, infrequent changes: Manual Liquid implementation is set-and-forget once done correctly
App-based store with minimal code access: TinyIMG or Ryze AI for zero-code management

The bottom line: for most Shopify stores, the answer to how to lazy-load Shopify product images the right way is: native loading="lazy" on below-fold images via the image_tag filter, conditional eager loading on the first row, and a rel=preload hint for your LCP hero image. That combination will produce the best Core Web Vitals without any JavaScript dependency. If you want this audited and maintained automatically — including after theme updates — Ryze AI handles it without any manual work on your part. For the broader performance and SEO picture, explore our guide on Shopify SEO in 2026.

1,000+ marketers use Ryze

Automating hundreds of agencies

★★★★★4.9/5

Frequently asked questions

What is the right way to lazy-load Shopify product images?

The right way to lazy-load Shopify product images is to use the native loading="lazy" HTML attribute on all below-fold img tags, apply it through Shopify's image_tag Liquid filter (which also generates srcset automatically), and exclude the first visible row of images so your LCP score isn't harmed. Pair this with a rel=preload hint for your hero product image. Ryze AI can audit, implement, and monitor this entire setup automatically.

Does Shopify's Dawn theme already lazy-load images?

Yes — Dawn theme (version 9.0 and above) uses Shopify's image_tag filter with conditional loading attributes, applying loading="eager" to the first product card and loading="lazy" to subsequent cards in collection loops. However, many older themes and custom sections do not, and third-party app blocks often bypass this logic entirely. Always inspect your specific theme's output with Chrome DevTools.

Will lazy loading hurt my LCP score?

It can — if you accidentally apply loading="lazy" to the image Google measures as your Largest Contentful Paint, typically the hero product photo on a product detail page or the first product card on a collection page. Chrome deliberately delays fetching lazy images, which worsens LCP. The fix is conditional logic: eager-load the first viewport's images, lazy-load everything below the fold.

Do I need a JavaScript library to lazy-load Shopify images in 2026?

No, for the vast majority of Shopify stores. Native loading="lazy" is supported by 96.4% of browsers globally as of June 2026, making JavaScript libraries like Lazysizes or Lozad unnecessary for basic lazy loading. The only case where a JS library adds genuine value is if you specifically want the blur-up LQIP placeholder visual effect, which requires the data-src swap pattern that JS libraries enable.

What is the difference between lazy loading and preloading in Shopify?

Lazy loading defers fetching below-fold images until the user scrolls near them, reducing initial page weight. Preloading does the opposite — it tells the browser to fetch a specific resource earlier than it normally would, at the highest priority. Both techniques work together: preload your LCP hero image with rel=preload in the head, and lazy-load everything below the fold. Using both is the fastest possible Core Web Vitals configuration.

How do I check if lazy loading is working on my Shopify store?

Open Chrome DevTools (F12), go to the Network tab, filter by Img, and reload your page. At page load you should see only the above-fold images in the waterfall. Then scroll down the page — additional images should appear in the network requests only as you approach them. You can also right-click any image, click Inspect, and check whether the img tag shows loading="lazy" in its HTML attributes. Google PageSpeed Insights will flag missing lazy loading as an opportunity if it's not implemented.

Fix your Shopify image lazy loading automatically

#1 pick · zero code · free trial