Nextjs Image component srcSet attribute

Question

I want to load different images for mobile viewport. Based on the Next.js doc passing srcSet does not work, so how can I do it?

Right now I can do it with CSS display property but I need something like the below:

<Image
   srcSet={{
      '/path/to/image-small.jpg': 320,
      '/path/to/image-medium.jpg': 640,
      '/path/to/image-large.jpg': 1024,
   }}
   src={data.smallImg.url}
   fill={true}
   alt=""
   className="rounded-[10px]"
/>

Answer 1

The <Image /> component automatically generates your srcSet, but you can use deviceSizes in your config if you'd like.

If you want to load a different image for mobile, you could use the picture element. It also looks like Vercel has been working on support to get image props and use them in other elements (like <picture>).