next/image media query display filtering for priority images

[kirkstrobeck]

Describe the feature you'd like to request

1. If I have a desktop image and a mobile image, next/image will only load the mobile or desktop image accordingly
2. If I add priority, then both the mobile and desktop images will load in all cases
3. Omitting priority impacts my LCP, adding priority means the user has to download an additional large image
4. I would like to be able to specify that an image should only be visible at a certain media-query

Describe the solution you'd like

Example

<>
  {/* I only load on mobile */}
  <Image
    alt="Picture of the author"
    media="(max-width: 699px)"
    height={500}
    priority
    src="me-mobile.jpg"
    width={500}
  />

  {/* I only load on desktop */}
  <Image
    alt="Picture of the author"
    media="(min-width: 700px)"
    height={500}
    priority
    src="me-desktop.jpg"
    width={500}
  />
</>

Describe alternatives you've considered

Manually creating an img tag with sizes or source and specifying media-queries there

[thexpand]

This is related to #21379 and #19880
To be honest, this has been around for 2 years and there is still no resolution from Vercel. I lost any hope.

[lachlanjc]

Indeed, we've needed this for awhile; I run into it nearly weekly. Vercel's blog uses different versions of images both in dark & light modes & desktop & mobile, but they load each of the variants regardless of which is rendered, unfortunately.