HTML-only conditional lazy loading (via preload and media)

4 months ago

Conditional lazy loading for images based on screen size using preload and media queries.
Preload images for desktop (min-width: 1024px) to ensure eager loading for LCP, while mobile ignores preload and lazy-loads the image.
Example implementation uses HTTP Link header or <link rel='preload'> tag followed by an <img> with loading='lazy'.
Demonstrated in use at https://pccd.dites.cat, optimizing cover image loading for desktop and mobile differently.
Caveats include lack of official documentation, reliance on preloading, and Lighthouse not fully recognizing the behavior.

Hasty Briefsbeta