Support for media attribute in <NextImage> component for responsive preload control

[tomraasowow]

Goals

1. Enable developers to conditionally preload images based on media queries (e.g. mobile vs desktop).
2. Prevent unnecessary preloading of unused responsive images, improving performance.
3. Align behavior with native HTML functionality.

Non-Goals

1. Replace existing responsive image functionality (e.g. srcSet or sizes).
2. Add full control over tag generation.
3. Enable media-based dynamic imports (this is about preload, not lazy loading or code splitting).

Background

In responsive designs, it’s common to serve different hero images for desktop and mobile using next/image. However, when priority (which adds rel="preload" links in head) is set to true, both images are preloaded regardless of the device, leading to wasted bandwidth and performance issues.

A typical workaround—dynamically importing the Image component or switching sources client-side—does not prevent both images from being preloaded when marked with priority.

Native HTML allows developers to specify a media attribute on preload links to conditionally load resources. The lack of equivalent support in Next.js leads to a gap in performance optimization.

Proposal

Add support for a media prop on the Image component, which is passed through to the generated link[rel=preload] element when priority is true. For example:

<Image src="/hero-desktop.jpg" priority preloadMedia="(min-width: 769px)" />