Why Does Preloading My Product Hero Download an Image the Page Never Displays?

Identify the two independent resource decisions

A preload tells the browser to discover a resource earlier than it might otherwise. A responsive image element independently provides candidate resources through srcset and sizes.

Google's web.dev documentation explains that a responsive preload can use imagesrcset and imagesizes on a link element. These attributes use selection information corresponding to the image's srcset and sizes.

A simple preload with a fixed href may be appropriate when the hero uses that exact resource. But when the visible image chooses between several widths, a fixed preload can request an image different from the one ultimately selected.

Do not assume every duplicated-looking network entry represents a second transfer. Inspect request URLs, cache behavior, response details and initiators. The meaningful question is whether bytes were unnecessarily transferred for a resource the page did not use.

Compare preload and rendered-image selection

Open a fresh page load in browser developer tools. Identify every preload for the hero and record its href, imagesrcset, imagesizes and fetch priority where present.

Next inspect the actual image element and its currentSrc. Record the selected variant, source dimensions and when its request began. If the preload requests a 1600-pixel image while the displayed hero selects an 800-pixel file, investigate whether both resources were fetched.

Check for variant-specific landing pages. A campaign link that selects a blue product should not preload a red product image merely because red is the catalog default.

Also inspect whether the hero is a CSS background, dynamically inserted image or ordinary markup image. Early discovery has different value in those cases. Preloading a resource that the parser already discovers promptly may add little benefit.

Use the appropriate responsive preload

When a responsive preload is justified, the developer can align imagesrcset and imagesizes with the actual hero's responsive selection. web.dev documents this mechanism and warns that responsive preloads can be risky if the viewport definition changes late.

Do not indiscriminately preload desktop, mobile and every color-variant asset. That can compete with critical stylesheets, scripts and the image the buyer actually sees.

Test one controlled change at a time: no preload, current fixed preload, and a correctly matched responsive preload where supported. Compare request discovery, duplicate transfers and the actual displayed hero. Keep the image's loading behavior and product identity unchanged during the comparison.

If the preload's benefit is unproven, retain a simpler implementation. A hint is not a guarantee of a performance improvement across all browsers and network conditions.

Hypothetical case: two hero downloads

Hypothetical network fixture; no waterfall was recorded. A fictional store has 800w and 1600w versions of the same approved bottle photograph. The actual mobile hero selects 800w.

Candidate A preloads the 1600w URL through a fixed href, then the image element selects 800w. The stipulated network trace contains two distinct transfers, so A fails the transfer-efficiency check.

Candidate B uses a responsive preload whose candidate list and slot hint match the hero. B is the preferred test, but its actual request behavior remains unverified.

Candidate C removes preload entirely. It may be appropriate if the browser already discovers the hero early. Compare all three under the same conditions rather than assuming B must win.

Record your own observations

The filled rows are illustrative examples. Use the blank row for your own files and observations.

Download the editable CSV worksheet

What the references establish

• web.dev — Preload Responsive Images: Primary guidance for imagesrcset, imagesizes, early resource discovery and responsive preload limitations.
• MDN — link HTML Element: Documents resource hints and preload-related attributes. The bottle network case is hypothetical.