https://orga.cat/blog/html-conditional-lazy-loading/

- orga.cat

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 <link rel=
"preload"> tag.

Conceptually:

Link: </hero.jpg>; 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

I'm using this in book pages and sidebar images at https://
pccd.dites.cat. Example: https://pccd.dites.cat/obra/Conca-Guia_
(1996)%3A_Els_primers_reculls_de_proverbis_catalans

In that layout, the cover image is above the fold on desktop but not
on smaller devices -- so it's eagerly loaded where Lighthouse
recommends it, and lazy-loaded where it makes sense.

Caveats:

  * Not documented or discussed anywhere (but seems to work fine in
    major browsers)
  * Requires preloading, which may not always be practical (or
    intended)

But this gives you HTML-only, viewport-dependent lazy loading.

Icona d'un monitor CRT dels anys 90 que porta a la pagina Quant a...