next/image not work for different images depending on the screen

[vicasas]

What version of Next.js are you using?

10.2.0

What version of Node.js are you using?

12.18.3

What browser are you using?

Chrome

What operating system are you using?

Windows

How are you deploying your application?

localhost

Describe the Bug

By using the next/image component I need it to be able to decide which image to display depending on the device window. For example, if I am on a smartphone I want a superhero image to be shown while if I am in a desktop size I want a car image to be displayed.

This is possible using img using the srcset and sizes attributes but using the next/image component this does not work.

Expected Behavior

The behavior I expect is to be able to display an "A" image on small screens while on larger screens to display a "B" image.

Similar to using picture with source or using img with srcsets and sizes.

To Reproduce

Use the component Image as follows

<Image
   src='/image-desktop.jpg'
   srcSet='/image-mobile.jpg 375w, /image-desktop.jpg'
   sizes='(max-width: 375px) 375px, 100%'
   width={5658}
   height={3183}
/>

[0livare]

My understanding is that the srcSet on <img>s is only intended to show different resolutions of the same image. My experience is that if the browser has already downloaded a higher resolution image, then it will not switch back to using a lower resolution image.

To show different images based on different screen widths, the preferred solution seems to be use of the <picture> element:

<picture>
    <source srcset="/media/cc0-images/surfer-240-200.jpg"
            media="(min-width: 800px)">
    <img src="/media/cc0-images/painted-hand-298-332.jpg" alt="" />
</picture>

next/image also does not support that use case because of the <div> that it wraps the <img> in.

[thewanionly]

With NextJS 13, next/image is now using <img> without any wrapper so we can use this pattern now.

[azurespheredev]

Then in which case can we use Image for displaying images in Next 14?

[vicasas]

That is precisely why I opened this issue, I think that the Image component does not yet cover all use cases. It would be great if the nextjs team could provide this type of support because for e-commerce sites these are super useful to represent products with dedicated images for mobiles and desktop.

[longprao]

+1 for this, I have been trying a lot but still couldn't get Next Image works similar to <picture> element.

[balazsorban44]

You could use a custom loader for this: https://nextjs.org/docs/api-reference/next/image#loader

Based on the width, you could show a different image.

[vicasas]

I think it could be done programmatically (I have not done tests), but, why not be able to use the same feature of the Image component to achieve it in the classic way that HTML5 already provides us?

I think that many developers would like to work more semantically than programmatically.

As I mentioned in the issue, this feature is widely used in e-commerce sites where an image must be represented according to the width of the graphic window.

[stefanprobst]

there's also this RFC: #25393

[Mib1411]

this is done https://nextjs.org/docs/pages/api-reference/components/image#art-direction

[Whizzie99]

Thank you so much for this

[adnanjpg]

what about app router use cases?

[mikeharrison4]

What if want to use more than two breakpoints?

[Mnigos]

it doesn't work for me

[djmin43]

I am late to the party, but how about you create two separate image components and solve it with css display: none?

I know it's a bit verbose, and it is indeed a bit more expensive to have two components. however, this is clearly free from layout shifts and prevents you from downloading two images for each break points, and bonus point for using nextjs/image!

// this image has css media query that has "display:none" under certain breakpoint.
<PcImage
        src={someImage}
        alt="alt"
        width={800}
        height={400}
/>
// this image has css media query that has "display:none" over certain breakpoint.
<MowebImage
        src={someImage}
        alt="�alt"
        width={200}
        height={400}
/>

[Mib1411]

Yeah, but why? Use ArtDirection, that's what it is made for. Your code is just outdatet and not neccessary anymore.

[broguinn]

The Image component and the native img tag's props give us everything we need to load the right image size, and (almost) no image for contexts where an image is hidden: sizes!

        <Image
          src={batteryPicture}
          alt="Background image of battery installed on home."
          sizes="(min-width: 768px) 100vh, 0px"
          priority
        />

I also edited my next.config.ts like so, to create a very tiny default image:

const nextConfig: NextConfig = {
  images: {
    // we add the `1` width so that we can send the smallest possible image to views where an image is hidden and `priority`.
    imageSizes: [1, 16, 32, 48, 64, 96, 128, 256, 384],
  },
};

[vicasas]

@broguinn We do not want to load the same image on different screens, it is to load a different image according to the media query that is indicated.

Example: A special image for light mode, another for dark mode.

This is already fixed in new versions of Next.js with the use of getImageProps.

[hugomota]

Hi. Any ideas for implementing this is on older versions of Next (v13)? I don't want to update the Next version using just because of this.

[Mib1411]

Sure: like it worked before: Building the picture tag "manually" or you can use different images in containers and show / hide the containers with media-queries or switch src and styles with js depending on window width...