next/image priority with media queries

[aghoneim92]

Describe the feature you'd like to request

When specifying the priority prop to the Image component in next/image, it would be useful to specify a media query, to support desktop-only images, for example.

Describe the solution you'd like

Perhaps a priorityMediaQuery prop that can be set to a specific media query?

Describe alternatives you've considered

I've used a wrapper div with display:none for some media query but the priority prop overrides this.

[richyrb00]

I've got here through a few discussions and issues that have been posted.

Although i agree the quick solution is to have multiple Image components set with media queries i don't believe that this is the long term solution.

The image component should be improved to accept attributes for mobile, tablet, desktop and however many is required for the use case of the client. and the component could be called to mimic what we are replacing initially.

this way and if possible the component can read the client to see what size is required to be served, set priority to the image size required and thus allow a more performant solution to be served.

[lejtzen]

I see your point @richyrb00.

My HTML-markup requires me to use two separate img-tags. It would not be possible with a single tag and multiple attributes.

What are your thoughts?

[gkpty]

Im also having this issue loading my header image which is different in mobile and web, when i set priority on the images it preloads both images for web and mobile hindering performance.. a priority media query would be great!

[SenorMann]

Any word on this? 👀

[1Ghasthunter1]

Any progress on this ??

[duveborg]

This is still very much wanted by me 🌟

[lepadatumihail]

same

[navin-moorthy]

Linking a similar discussion - #43756

Would be nice to have the media support in ReactDOM.preload

const preloadImgProps = getImgProps(imageProps);
ReactDOM.preload(preloadImgProps.props.src, {
	as: "image",
	imageSrcSet: preloadImgProps.props.srcSet,
+	media: "(min-width: 640px)",
	fetchPriority: "high",
});

[lepadatumihail]

Have you tried using a isMobile() hook and then loading={isMobile ?'lazy': 'eager'} or priority={!isMobile} ?

[navin-moorthy]

Yeah, I tried that but to implement isMobile hook with SSR, works properly either at desktop or mobile based on the default value that gets SSRed.
With the above solution, we don't have to use hook or worry about SSR.

[ryu9663]

I also agree that having a responsive priority prop would be very useful.
Right now, both on desktop and mobile we end up downloading both the desktop and mobile priority images regardless of the viewport.
I tried using a custom hook like useWindowSize to toggle priority on the client, but that causes hydration mismatches and leads to CLS, so it’s not a viable workaround.