Different mobile and desktop images with Next.js image

[dfellows12]

I'm in the process of switching my site over to Next.js image. I often use different mobile and desktop images for design purposes. Using the picture element allows me to ship only one image over to the client. Is there a way I can accomplish the same thing with Image?

[Sandstedt]

Looking though the source-code (canary branch) I couldn't find any use of and , so no unfortunaly not. I would very much need this feature too.

[Sandstedt]

Duplicate of this question: 19880

[dfellows12]

Thanks. I was also going to try using multiple image components with media queries. Did that solution not work for you?

[Sandstedt]

Yes just tried it out. will post my solution in the thread above.

[igorbrasileiro]

I'm trying to do the same thing, render different images based on device width. In my case, I have a carousel and i would want to have images with different aspect ratios depending o the device's screen widths.

For example:

import Image from 'next/image'
import myStaticImage1 from 'src/images/img1.jpg'
import myStaticImage1Mobile from 'src/images/img1-mobile.jpg'

const Banner = () => {
   const device = useDevice() // client side
   return (
     <Carousel>
       <Image src={device === 'mobile' ? myStaticImage1Mobile : myStaticImage1} {... otherProps } />
       <Image src={device === 'mobile' ? myStaticImage1Mobile : myStaticImage1} {... otherProps } />
     </Carousel>
   )
}

Or something like that:

import Image from 'next/image'
import myStaticImage1 from 'src/images/img1.jpg'
import myStaticImage1Mobile from 'src/images/img1-mobile.jpg'

const Banner = () => {
   const device = useDevice() // client side
   return (
     <Carousel>
       {device === 'mobile'
         ? <Image src={myStaticImage1Mobile} {... otherProps } />
         : <Image src={myStaticImage1} {... otherProps } />
       }
       {device === 'mobile'
         ? <Image src={myStaticImage1Mobile} {... otherProps } />
         : <Image src={myStaticImage1} {... otherProps } />
       }
     </Carousel>
   )
}

[biels]

Have you been able to achieve this?

[igorbrasileiro]

No, not yet. I've tried one approach that cause a layout shift 😢 . Is basically it

const Banner = () => {
const device = useDevice() // return null on server
return device !== null ? (
    <Carousel>
      <Image ... src={device === 'mobile' ? static1Mobile : static1} priority={true}>
      <Image ... src={device === 'mobile' ? static2Mobile : static2}>
    </Carousel>  
  ) : (
      <>
        <Image ... src={static1Mobile} priority={true} />
        <Image ... src={static1} priority={true} />
      </>
     )
}

[igorbrasileiro]

Updating, I've found this way that Gatsby solves this problem: https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/#withartdirection .

But there is another discussion talking about something related #19880

[igorbrasileiro]

https://github.com/deco-sites/std/blob/main/components/Picture.tsx

I'm working with deno fresh and worked on this with picture + source: https://github.com/deco-sites/std/blob/main/components/Picture.tsx

[dohomi]

I'd like to find a solution for this as well. As currently for example SSG pages don't know on initial build the device size I guess the logic needs to be placed inside of a _middleware to work properly to prevent layout shifts. I still haven't found a solution though.

Another good way would be enabling the position of the scaled images based on sharp.strategy parameters:
https://sharp.pixelplumbing.com/api-resize#parameters

[longfellowone]

Also interested in this

[machineghost]

This seems like a fundamental of responsive design (which Next is supposed to be the king of) ... how is this not answered yet?

[przpl]

Any updates on this?

[mbianchidev]

I'm also interested in this!

[ChrisJohnNewton]

Likewise interested

[amLiux]

This helped me to bypass this:

const [width, setWidth] = useState<number>(0);

useEffect(() => {
  function handleResize() {
    setWidth(window.innerWidth)
  }
  
  window.addEventListener('resize', handleResize)
  
  handleResize()
  
  return () => {
    window.removeEventListener('resize', handleResize)
  };
});

// Then on your component: 
<div className={terminalHeaderStyles.logoContainer}>
  <Image src={width > 375 ? logo : littleLogo} alt='Jardin Binario logo' layout='responsive' />
</div>

But also interested on the right approach for this implementation

[Dimetio]

Do you have any information - is it possible to pass image props for mobile devices into the component?
some time has passed, suddenly something has been updated

[AdrianFahrbach]

The solutions above do work, but do not satisfy all our requirements.
The problem is that we get hydration errors when selecting the image server side and that non-Javascript SEO bots don't see both images.
Our solution is to load both images on SSR and then pick the right one after the first render. That way both images are in the static html and the client still only loads the relevant one (Chrome cancels the other requests as far as we observed).

So our code looks like this:

We created a hook that takes a media query and returns undefined on the first render and then a boolean after that. We use matchMedia instead of the resize event because that one has a better performance.

const getMatches = (query: string): boolean => {
  // Prevents SSR issues
  if (typeof window !== 'undefined') {
    return window.matchMedia(query).matches;
  }
  return false;
};

/**
 * Returns true if the given media query matches.
 * Returns undefined until the first render occured to prevent hydration errors.
 * @param query A media query as string
 * @returns
 */
export function useMediaQuery(query: string): boolean | undefined {
  const [hasMatch, setHasMatches] = useState<boolean>(getMatches(query));
  const [initialLoad, setInitialLoad] = useState(true);

  useLayoutEffect(() => {
    if (initialLoad) {
      setInitialLoad(false);
    }
  }, []);

  function handleChange() {
    setHasMatches(getMatches(query));
  }

  useEffect(() => {
    const matchMedia = window.matchMedia(query);
    handleChange();
    matchMedia.addEventListener('change', handleChange);
    return () => {
      matchMedia.removeEventListener('change', handleChange);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [query]);

  return initialLoad ? undefined : hasMatch;
}

When using it you just have to make sure that you show both images on undefined and the right one on the boolean.

const ExampleComponent = ({}) => {
  const isMobile = useMediaQuery(`(max-width: 767.98px)`);
  return (
    <>
      {(!isMobile || isMobile === undefined) && (
        <Image src="/desktop-image.jpg" alt="This is the desktop image" />
      )}
      {(isMobile || isMobile === undefined) && (
        <Image src="/mobile-image.jpg" alt="This is the mobile image" />
      )}
    </>
  );
};

We did not fully test this solution yet, but it is working for us and we didn't notice any flickering on the client.
Any improvements or other approaches are highly appreciated, a solution built in to NextJS would obviously be the best way to solve this though.

[r742davis]

@AdrianFahrbach Nice solution! I know you haven't tested this out fully yet, but have you been able to get any preliminary metrics for how this performs versus your previous solution? We just went back to using a basic picture + source and that gave us the result we wanted (eg: not adding additional code, SEO friendly, etc)

[AdrianFahrbach]

@AdrianFahrbach Nice solution! I know you haven't tested this out fully yet, but have you been able to get any preliminary metrics for how this performs versus your previous solution? We just went back to using a basic picture + source and that gave us the result we wanted (eg: not adding additional code, SEO friendly, etc)

We don't have any performs insights and probably won't really test this. The benefits should be minimal.
I guess your approach removes the Next image optimization then or is there a way to get a source tag out of it? A picture tag sounds like a better way to solve this if we can somehow get the Next image optimization working with it.

[agsmartwolf]

I've tried your solution, but the browser loads both images as a desktop one and a mobile one on my mobile device. Tested on chrome desktop and simulator too.

[AdrianFahrbach]

Are you sure that both images are completely loaded? One of them should be cancelled.