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

jasonsilberman · 2020-12-05T21:00:19Z

jasonsilberman
Dec 5, 2020

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.

Answered by leerob

Jun 29, 2023

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

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

Working with background-image or image-set
Working with canvas context.drawImage() or simply new Image()
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 (<…

View full answer

g-elwell · 2020-12-07T13:33:17Z

g-elwell
Dec 7, 2020

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.

7 replies

dfellows12 Jan 21, 2021

Thanks for the help!

aNyMoRe0505 Mar 9, 2022

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

thexpand Mar 15, 2022

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

rein96 Jul 16, 2023

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 Jul 16, 2023

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

grahammather · 2021-07-21T19:57:52Z

grahammather
Jul 21, 2021

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.

3 replies

aghoneim92 Oct 4, 2021

I'd like to open an issue for this

aghoneim92 Oct 4, 2021

#29612

gkpty Mar 30, 2022

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 · 2022-06-28T01:46:38Z

BL1133
Jun 28, 2022

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

0 replies

Multiply · 2022-06-28T05:27:03Z

Multiply
Jun 28, 2022

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.

8 replies

ncorso Dec 23, 2022

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 Jan 30, 2023

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

drMonro Mar 18, 2023

Need update on this!!

MartinaMilisic Apr 3, 2023

Would love to see your solution on this :)

bobaaaaa Apr 26, 2023

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

leerob · 2023-06-29T03:13:39Z

leerob
Jun 29, 2023
Maintainer

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

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

Working with background-image or image-set
Working with canvas context.drawImage() or simply new Image()
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

6 replies

bobaaaaa Jul 16, 2023

@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 Mar 30, 2024

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 May 28, 2024

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

NickWoodward Jun 15, 2024

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 Jun 17, 2024

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 · 2023-08-08T21:21:36Z

cvbuelow
Aug 8, 2023

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}
/>

2 replies

ddaoxuan Sep 1, 2023

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

cvbuelow Sep 1, 2023

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 · 2024-03-07T10:27:26Z

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

Example

Replies: 7 comments · 32 replies

leerob Jun 29, 2023 Maintainer

Example

Replies: 7 comments 32 replies

leerob
Jun 29, 2023
Maintainer