On a workshop landing page, the main room photograph may be visible immediately while a long gallery sits below the description. Delaying the room photograph with lazy loading works against that first-screen task. Reserve lazy loading for appropriate later images and evaluate priority separately.
Mark the image that needs the hint
<img
src="./room-wide.webp"
alt="Workshop room with tables arranged around a demonstration bench"
width="1200"
height="800"
fetchpriority="high">
<img
src="./gallery-tools.webp"
alt="Tools laid out for the afternoon session"
width="800"
height="600"
loading="lazy">
These are illustrative filenames; provide the matching image files. The first image has no lazy-loading attribute. Its dimensions reserve its aspect ratio while the file arrives. The gallery image can wait until the browser considers it near enough to the viewport.
The priority values are high, low, and auto. auto leaves priority to the browser's normal behavior. low signals less importance relative to similar resources. Applying high to every image removes the useful distinction you intended to communicate. MDN fetchpriority reference
Separate discovery, priority, and display
A normal image cannot be fetched until the browser discovers its URL. A priority hint changes how the browser can treat a known resource. It does not turn an undiscovered CSS background into an HTML image request or remove the need to decode and paint the file.
Likewise, loading="lazy" affects when an image is eligible to load, while fetchpriority expresses relative importance. Setting both lazy loading and high priority does not make a deferred image an eager first-screen image. Begin by choosing an appropriate loading policy, then decide whether a priority hint is useful.
For the loading policy, see lazy loading images in HTML. Keep responsive source selection and image sizing intact when adding the hint; priority does not correct a large file or a wrong source URL.
Compare the actual page before keeping the change
Open the served page in Chrome DevTools and inspect the Network panel's image requests. Enable the Priority column if it is hidden. Reload under a repeatable cache and network condition, then confirm that the expected room-image URL was requested and the image displayed correctly.
Compare the page with and without the single hint under the same conditions. Record the selected image URL, cache state, and observed timing. Browser priority may change while a request is in progress, and a higher priority label alone is not evidence of a faster useful paint. Use a performance recording when the question is which element becomes the largest contentful paint and when it appears.
If the image remains slow, inspect its discovery time, response size, server response, and competing work. Keep the hint only when it suits the page you measured. No universal time saving follows from the markup above.
Keep the reviewed image recognizable
Recheck the first screen on the narrow layout: a desktop hero can move below a large block of mobile text. If the image no longer serves the first-screen task, reconsider the priority decision rather than copying the desktop assumption.
Save the accepted markup with the image assets and the comparison notes. For a page whose images do not appear at all, use the HTML image guide to resolve the source path and markup before changing scheduling hints.