Bug: Fallback image unnecessarily downloaded in `<picture>` element on Safari

[bviale]

When a element with a fallback image is rendered by React, Safari downloads both the fallback image and the correct image from the element. This issue occurs only in Safari and results in the fallback image being downloaded unnecessarily.

Reproduced on macOS Safari 18.6

React version: 19.2.0

Steps To Reproduce

1. Add the following tags inside a React component JSX :

      <picture>
        <source
          media="(min-width:650px)"
          srcSet="https://www.w3schools.com/TAGS/img_pink_flowers.jpg"
        />
        <source
          media="(min-width:465px)"
          srcSet="https://www.w3schools.com/TAGS/img_white_flower.jpg"
        />
        <img
          src="https://www.w3schools.com/TAGS/img_orange_flowers.jpg"
          alt="Flowers"
        />
      </picture>

2. Open the app on Safari
3. Observe that 2 images are downloaded : the one corresponding to the screen size and the fallback image
4. Move the element to the root index.html so it is rendered outside of React
5. Observe that only the image corresponding to the screen size is downloaded

Link to code example:

https://codesandbox.io/p/sandbox/dreamy-swartz-rfm5wv

The current behavior

The fallback image is being downloaded unnecessarily.

The expected behavior

Only one picture should be downloaded, just like with other browsers.

[dev-hari-prasad]

This looks like a WebKit/Safari loading behavior rather than something React is triggering. React just renders the <picture> structure, but Safari ends up fetching both the selected <source> and the fallback <img> a known issue in webkit’s resource selection logic.

This means there isn't much React can patch on its side. The fix likely needs to happen in Webkit, unless there’s a reliable workaround that doesn’t depend on UA-sniffing or hacky lazy-loading. If anyone has a clean mitigation approach, I’m open to testing it.