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, since doing so can delay their loading until the browser has determined they are definitely in the viewport. One problem though is that "above the fold" depends on screen size: an image can be above the fold on desktop and below it on mobile. With native lazy loading and static HTML (e.g., without device detection on the server side or JavaScript), you normally have to pick one behavior and get it wrong for part of your users.
But there's a small workaround that seems to work. Browsers won't delay the loading of an image if it's already been fetched. You can take advantage of that by conditionally preloading the image using a media query, then marking the image as lazy later. I tested it using the HTTP link header, but may also work fine with a tag.
Conceptually:
Link: ; rel=preload; as=image; media="(min-width: 1024px)"
< img src = " /hero.jpg " loading = " lazy " />
Effect:
Desktop: preload fires → image loads eagerly (good for LCP)
Mobile: preload ignored → image lazy-loads
... continue reading