TL;DR
A simple HTML-only technique uses a conditional preload (via HTTP Link or <link rel="preload">) with a media query to make an image load eagerly on wide viewports while keeping it lazy on smaller screens. The approach was tested on a site and appears to work in major browsers, but it is undocumented and can confuse performance tooling like Lighthouse.
What happened
Developers often avoid applying native lazy loading to images that appear above the fold—especially the LCP image—because delaying those assets hurts perceived load speed. The challenge is that what counts as "above the fold" changes with viewport size: an image might be visible on desktop but offscreen on mobile. With static HTML and loading="lazy", you typically have to choose one behavior for all users. The reported workaround preloads the image conditionally using a media query, then still marks the <img> as loading="lazy". If the preload runs (for example on desktop), the browser has already fetched the resource and will not delay rendering; if the preload is skipped (for example on mobile), the image remains lazy-loaded. The author tested the pattern with an HTTP Link header and says it may also work with a <link rel="preload"> element, and gave a live example on pccd.dites.cat. They caution that the technique is not formally documented, requires preloading, and that Lighthouse does not fully detect the behavior.
Why it matters
- Avoids a one-size-fits-all decision about lazy loading when layout changes across devices.
- Can preserve a fast LCP experience on viewports where the image is above the fold while saving mobile bandwidth where it is not.
- Provides an HTML-only option that does not rely on client-side JavaScript or server-side device detection.
- May improve real-user perception without adding complex delivery logic, but has trade-offs due to documentation and tooling gaps.
Key facts
- Common guidance: do not lazy-load above-the-fold images, particularly the Largest Contentful Paint (LCP) image.
- "Above the fold" depends on screen size; an image can be above the fold on desktop but below it on mobile.
- With native lazy loading and static markup, you normally must pick a single behavior that may be wrong for some users.
- Workaround: preload the image conditionally with a media query, then include the image element with loading="lazy".
- Example header syntax shown: Link: </hero.jpg>; rel=preload; as=image; media="(min-width: 1024px)"
- Effect described: desktop preload fires and image loads eagerly; mobile ignores the preload and the image lazy-loads.
- Tested using an HTTP Link header; author suggests it may also work via a <link rel="preload"> element.
- Author used the method on book pages and sidebar images at https://pccd.dites.cat as a real-world example.
- Caveats noted: the pattern is not documented anywhere, requires preloading, and Lighthouse doesn't fully understand it.
What to watch next
- Whether browser vendors publish formal documentation or change how conditional preloads behave — not confirmed in the source.
- If Lighthouse and other performance tools update to detect this conditional preload pattern and reflect it in metrics — not confirmed in the source.
- Potential broader compatibility or edge-case behaviors across different browser versions and platforms — not confirmed in the source.
Quick glossary
- Lazy loading: A technique that defers loading of offscreen resources (like images) until they are needed, reducing initial page load work.
- Preload: A mechanism (via Link headers or <link rel="preload">) to tell the browser to fetch a resource early so it is available when needed.
- Media query: A CSS construct (usable on link/preload) that conditions resource loading on characteristics such as viewport width.
- LCP (Largest Contentful Paint): A web performance metric that measures when the largest visible element in the viewport is rendered, often used to judge perceived load speed.
- Lighthouse: An open-source tool for auditing web page performance and other best practices; it analyzes pages and reports metrics and recommendations.
Reader FAQ
Do you need JavaScript to use this conditional lazy-loading pattern?
No. The reported technique is HTML-only: a conditional preload (via HTTP Link header or <link rel="preload">) combined with an <img loading="lazy"> element.
Will this work in all browsers?
The author reports it seems to work fine in major browsers, but notes the behavior is not formally documented.
Will Lighthouse recognize that the image was preloaded and loaded eagerly where appropriate?
The source states Lighthouse doesn't fully understand what's happening with this pattern.
How was the technique tested?
The author tested it using an HTTP Link header and applied it on pages at pccd.dites.cat; they also suggest a <link rel="preload"> tag may work.
HTML-only conditional lazy loading (via preload + media) 11 de gener del 2026 The accepted practice is to not add lazy-loading to images above the fold, especially the LCP image….
Sources
- HTML-only conditional lazy loading (via preload and media)
- Can you add native lazy loading attribute to an image with …
- HTML performance optimization – Learn web development
- What Is Lazy Loading And How to Use It to Speed Up Your …
Related posts
- Gentoo Linux 2025 Review — Retrospective, Releases and Infrastructure Updates
- Think of Pavlov: How Everyday Interactions Condition Future Behavior
- Why I removed Windows 11 and switched my main computers to Linux