[next/image] Responsive images with "art direction"

[jasonsilberman]

I am using the Image component and it is working quite well, however, I was wondering if it is possible to implement "art direction" as described in the MDN docs here?

The idea is that based on media queries (all I need is a certain width breakpoint in this case), change the src of the image. For example, on desktop have a more landscape image, and on mobile show an image that is more of a square.

Here is the example from the MDN docs:

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

How can I achieve this using the Image component? My only idea so far is to have multiple Images and use a wrapper component that shows/hides based on a css media query. I think this would work, however, this seems less than ideal since it will probably lead to multiple or incorrect image loads.

Thanks.

[g-elwell]

Your suggestion should work fine. If you hide your elements by using CSS display: none then the unused images won't be loaded by the browser.

[dfellows12]

Thanks for the help!

[aNyMoRe0505]

note: this work because next/image default is lazy load

[thexpand]

@aNyMoRe0505 Absolutely! When I try to use priority={true}, sadly, it no longer works.

[rein96]

thanks for sharing!

I tried this one, and it works fine for me (with Tailwind)

         <Image
            alt={image.name}
            className="w-full hidden md:block"
            height={0}
            sizes="100vw"
            src={image?.asset?.url}
            width={0}
          />
          <Image
            alt={mobileImage.name}
            className="w-full block md:hidden"
            height={0}
            sizes="100vw"
            src={mobileImage?.asset?.url}
            width={0}
          />

[bobaaaaa]

We also did this. The downside is, that both images are requested by the browser. So you always end up downloading to much

[grahammather]

The problem with this approach is when you set priority={true} on your Image. Both the mobile and the desktop images will be preloaded because there's no media query in the preload link. We need to be able to do Responsive Preloading in order to avoid preloading the desktop image on mobile. AFAIK, this isn't possible right now.

[aghoneim92]

I'd like to open an issue for this

[aghoneim92]

#29612

[gkpty]

responsive preloading would be an awesome addition to the next image component.. right now im having performance issues because my header image is different for web and mobile and im preloading both

[BL1133]

I've had this issue before. The problem with display: none is I believe the images are still downloaded, so it's an insane cost to have like 3 downloads for every image at all times. So I ended up making up all images load lazy so that this doesn't happen. It's not a great work around at all because lazy loading every image isn't optimized either, but it wasn't a production site. I think the only way to do it correctly is with javascript and not CSS media queries

[Multiply]

We ended up writing our own <NextPicture /> component, which takes some of the capabilities of next/image, but with support for loading different sources per breakpoint.
It's was extremely difficult landing on a good React API for this feature, as you can do so many different things with sources, media queries etc.

We'll iterate some more internally, and publish it at a later time, when we've tested it fully.

[ncorso]

Completely agree with @thexpand! It would be very kind of you @Multiply if you can share your current implementation.
At least to have as a starting point :)

[AdrianFahrbach]

Do you have an Update on this? Would be interesting to see your approach!

[drMonro]

Need update on this!!

[MartinaMilisic]

Would love to see your solution on this :)

[bobaaaaa]

FYI: https://github.com/humaans/next-img has <picture> support with art-direction

[leerob]

Update: We have extracted the core logic from next/image into a new unstable_getImgProps() function.

This allows usage outside of <Image>, such as:

1. Working with background-image or image-set
2. Working with canvas context.drawImage() or simply new Image()
3. Working with <picture> media queries to implement Art Direction or Light/Dark Mode images

Example

import { unstable_getImgProps as getImgProps } from 'next/image'

export default function Page() {
  const common = { alt: 'Hero', width: 800, height: 400 }
  const { props: { srcSet: dark } } = getImgProps({ ...common, src: '/dark.png' })
  const { props: { srcSet: light, ...rest } } = getImgProps({ ...common, src: '/light.png' })

  return (<picture>
  <source media="(prefers-color-scheme: dark)" srcSet={dark} />
  <source media="(prefers-color-scheme: light)" srcSet={light} />
  <img {...rest} />
</picture>)
}

PR: #51205

[bobaaaaa]

@eroSilva It's just not ready for prod. Use it at your own risk. React does the same:
https://github.com/facebook/react/blob/546fe4681c52de6a333a55cedb141c87b626425e/packages/react/src/React.js#L141

[AlexandreBourdeaudhui]

Hello @leerob 👋 , do you know why when we're using the images.unoptimized: true in next.config.js, the srcset output into <source> are empty ?

⏬ Optimized

⏬ Unoptimized

[coelhucas]

To anyone getting here, in Next.JS 14.X we have it working as getImageProps 🙂

[NickWoodward]

Hi Rob, hope you don't mind me asking a noob question - where is rest coming from here? ie how can I set the default image?
Thanks :)

[revnelson]

Hi Rob, hope you don't mind me asking a noob question - where is rest coming from here? ie how can I set the default image? Thanks :)

In the example code from @leerob's post you can see:

  const { props: { srcSet: dark } } = getImgProps({ ...common, src: '/dark.png' })
  const { props: { srcSet: light, ...rest } } = getImgProps({ ...common, src: '/light.png' })

rest there is the spread object of all of getImgProps returned values except for srcSet.

[cvbuelow]

Art Direction hero image with preloading:

import {
  unstable_getImgProps as getImgProps,
  ImageProps,
  StaticImageData,
} from 'next/image'
import Head from 'next/head'

const AdaptiveImage = ({
  className,
  alt = 'Hero image',
  fill = true,
  priority = true,
  sizes = '100vw',
  breakpoint = 640,
  desktopImage,
  mobileImage,
  style = { objectFit: 'cover' },
  ...props
}: {
  breakpoint?: number
  desktopImage: StaticImageData
  mobileImage: StaticImageData
} & Partial<ImageProps>) => {
  const commonPreload = {
    rel: 'preload',
    as: 'image',
    imageSizes: sizes,
  }
  const common = { alt, fill, priority, sizes, style, ...props }
  const { srcSet: desktop } = getImgProps({ ...common, src: desktopImage }).props
  const { srcSet: mobile, ...rest } = getImgProps({ ...common, src: mobileImage }).props
  const desktopMedia = `(min-width: ${breakpoint}px)`
  const mobileMedia = `(max-width: ${breakpoint - 1}px)`
  return (
    <>
      <Head>
        <link
          {...commonPreload}
          media={desktopMedia}
          href={desktopImage.src}
          imageSrcSet={desktop}
        />
        <link
          {...commonPreload}
          media={mobileMedia}
          href={mobileImage.src}
          imageSrcSet={mobile}
        />
      </Head>
      <picture className={className}>
        <source media={desktopMedia} srcSet={desktop} />
        <source media={mobileMedia} srcSet={mobile} />
        <img alt={alt} {...rest} />
      </picture>
    </>
  )
}

export default AdaptiveImage

Usage:

import HeroDesktop from './hero-desktop.png'
import HeroMobile from './hero-mobile.png'

<AdaptiveImage
  alt='My Hero'
  desktopImage={HeroDesktop}
  mobileImage={HeroMobile}
/>

[ddaoxuan]

Isn't that downloading both images no matter the view anyway ?

[cvbuelow]

no, it only downloads one, either desktop or mobile image depending on screen size. if you resize your screen across the breakpoint it will then download the other one. you can see it in action here https://thangs.com/memberships/discover (on the hero image)

[Emanuele-Fortunati]

It's a great solution, unfortunately it won't work with the App Router. Any idea on how to make it working?

[revnelson]

It seems some of your response was cut off. Would you mind helping me (and others) with your solution for the app router?

[Emanuele-Fortunati]

Sure. You just need to add that code snippt anywhere in your component. The NextJs engine will copy/paste it into the tag itself.

[revnelson]

Thank you!

[Arunjenson]

@Emanuele-Fortunati im using the same solution provided above in 14.x version ,but its not working, is it possible to share the whole component so that it will be clear for us?

[revnelson]

@Arunjenson Here is a gist to the component as I use it. You will need to tweak it to work for your use case, but hopefully it helps!

https://gist.github.com/revnelson/046b87cfb981be0909bc9e475efacdef

[lubojanski]

to anyone looking for solution to this problem in 2025, the getImageProps api is stable now,
link includes example.
https://nextjs.org/docs/app/api-reference/components/image#getimageprops

[kncalderong]

Another option I found useful and simpler is creating a component using three Image blocks (from Nextjs). It still leverages all the performance optimizations from Nextjs component but conditionally loads one image source or another. This could be an starting point as more configs can be added

import Image from "next/image";

type PictureProps = {
  mobile: string;
  tablet: string;
  desktop: string;
  alt: string;
};

export default function PictureComponent({
  mobile,
  tablet,
  desktop,
  alt,
}: PictureProps) {
  return (
    <>
      <Image
        alt={alt}
        src={mobile}
        fill
        sizes="100vw"
        style={{ objectFit: "cover" }}
        className="block md:hidden"
      />
      <Image
        alt={alt}
        src={tablet}
        fill
        sizes="100vw"
        style={{ objectFit: "cover" }}
        className="hidden md:block lg:hidden"
      />
      <Image
        alt={alt}
        src={desktop}
        fill
        sizes="100vw"
        style={{ objectFit: "cover" }}
        className="hidden lg:block"
      />
    </>
  );
}

[bobaaaaa]

This will always load all three images no matter on which breakpoint you are. You can check the network panel in the dev tools

[kncalderong]

This will always load all three images no matter on which breakpoint you are. You can check the network panel in the dev tools

No, it will not load all three images. It will load just the one depending on your screen size.

Test it...

[Multiply]

Try with priority on. :)