Add priorityMedia Prop to next/image for Conditional Preload Based on Screen Size

[nickjackson]

Goals

1. Ability to tune when a next/image is preloaded/prioritised by using a media query (e.g. screen resolution)

Non-Goals

1. Does not change anything about how or when a next/image is rendered.
2. Does not need to change any existing behaviour (this idea is an opt-in)

Background

We are often building Hero's and Product Pages where there may be different imagery to display depending on if the user is on a mobile or desktop screens.

Ordinarily next.js handles this fine, and will only load the image in the viewport (ignoring the hidden image). However this will go out the window when we set the priority prop which adds in a <link rel="preload" ..> to the head for those images. Both will be downloaded regardless if they are in viewport or not and forcing a desktop image to load on mobile (especially when its not going to be used) is not ideal.

We want to be able to prioritise images within the initial viewport, we just want to avoid prioritising both mobile/desktop variants. Fortunately, link supports the media attribute, which if exposed on the next/image props, would provide a way to tune when an image is preloaded.

Proposal

I propose a new attribute is added to next/image called priorityMedia.

<Image
  src="/image-desktop.png"
  height={600}
  width={500}
  alt="Desktop"
  className="desktop-image"
  priority
+ priorityMedia="(min-width: 639px)"
/>

This would be passed through to the ImagePreload component to render a <link like the following.

<link
  rel="preload"
  as="image"
  imageSrcSet="/_next/image?url=%2Fimage-desktop.png&amp;w=640&amp;q=75 1x, /_next/image?url=%2Fimage-desktop.png&amp;w=1080&amp;q=75 2x"
  fetchPriority="high"
+ media="(min-width: 639px)"
/>

I'm happy to contribute on this.