Demo Site: Load mobile image in BasicStageBlock with priority

[stekalt]

Description

The image of the BasicStageBlock displayed at the mobile breakpoint is loaded with priority. This allows Next.js to preload the image and therefore improve the Largest Contentful Paint (LCP) metric.

Acceptance criteria

• I have verified if my change requires an example
• I have verified if my change requires a changeset
• I have verified if my change requires screenshots/screencasts

Screenshots/screencasts

Before	After
https://github.com/user-attachments/assets/8c41a19a-3e81-4c56-8c5a-18d5a49354b5	https://github.com/user-attachments/assets/493f26f9-c5de-4cd5-9d7c-7256e89cc4a0

Further information

• Task: https://vivid-planet.atlassian.net/browse/COM-1643

[nsams]

this only sets priority for MediaPhone breakpoint, and I'm assuming it does that for all device widths?

[thomasdax98]

The problem here is: If you set priority for all four device widths, all four image versions are always loaded. This results in three unnecessary image loads (especially problematic on mobile).

I think the idea here is to just preload the mobile version to be fast on mobile devices. And on desktop it's usually no problem to also load the mobile image.

[thomasdax98]

(But it's kind of confusing, you are right)

[nsams]

(But it's kind of confusing, you are right)

that is not my problem at all

we could do better:
preload link supports media queries. Does react-dom preload work for us?

[dkarnutsch]

And on desktop it's usually no problem to also load the mobile image.

I'm not sure about this. This will show up on all SEO reports.

[johnnyomair]

preload link supports media queries. Does react-dom preload work for us?

I just had a look at the next/image priority implementation and I believe it's possible, since it's already using react-dom preload. We'd need to specify priority and sizes for all viewports, but then it should work.

[thomasdax98]

I didn't know about the media attribute in link. That's cool and would solve our problem 👍

Unfortunately, react preload only supports media starting in v19 (facebook/react#28635 (comment))

To date, Next doesn't support media at all (not even in v15 as it looks). So we can't use it.

---

Regarding a solution with only srcset and sizes: I don't think this always works.

In our example, the stage image always takes up 100vw. Meaning, specifying sizes as 100vw for all breakpoints is correct.

I'm not an expert in defining responsive images and didn't experiment, but according to ChatGPT, Desktop and Mobile can have an overlap in the image sizes they request because the device pixel ratio can be > 1

• "Mobile" ≠ Small physical size
  A modern phone can have a viewport width of 430px but a devicePixelRatio of 3, so it needs a 1290px-wide image!

• "Desktop" ≠ Large image area
  If your desktop layout only gives an image 400px of screen space (e.g. in a sidebar), it’ll download an image similar in size to what mobile might use.

✅ So YES: Mobile and desktop can easily request the same image size, depending on:

• How big the image appears in your CSS layout
• The device’s pixel density (Retina vs non-Retina)

So only defining srcset and using small sizes for the mobile images and big sizes for Desktop won't work correctly, to my understanding.

[thomasdax98]

Maybe we can build our own solution that adds a link with the correct media. But I didn't look into that

[thomasdax98]

We close this because it's a half-solution. Instead we will fix priority loading for stages in v9 when we update to React 19 so we can use preload as detailed in #3743 (comment)