A scenario prompt for choosing eager versus lazy loading on a homepage, including the case where an image sits below the fold on desktop but above it on mobile.
Works with Claude / GPT260 uses★ 4
The prompt
media-lazy-loading-exclusions
Our homepage template has, in this order: a full-width hero image, a 3-column
"featured posts" thumbnail grid directly below it, then a testimonial section with
a headshot, then a footer logo strip of eight partner logos.
[replace with your own page's image layout and viewport breakpoints]
On desktop (1440px), the hero and the featured post grid are both visible without
scrolling. On mobile (390px), the responsive layout stacks things so only the hero
and the first featured post thumbnail are visible without scrolling, the second and
third thumbnails require a scroll.
Tell me:
1. Which images should load eagerly (and which one, if any, needs
fetchpriority=high) versus which should use loading=lazy, given the difference
between desktop and mobile above-the-fold content.
2. How to handle the featured post thumbnails specifically, since they're
above-the-fold on desktop but below-the-fold on mobile, one blanket setting
will be wrong for one of the two breakpoints.
3. Whether the footer logo strip needs any special treatment (it never appears
above the fold on any device, but it's a lot of images if they're all
unnecessarily eager-loaded).
Lazy-loading guidance usually assumes a single fold line, but responsive layouts reflow content so an image can be above the fold on one breakpoint and below it on another. When that happens, the safer default is usually lazy plus a low fetch priority, since the cost of a slightly late mobile image beats the cost of a needlessly eager desktop one.