Change <Image /> src according to screen size

Unanswered

PepeW posted this in #help-forum

2023-06-22T09:59:40.000Z

With a normal <img /> tag we can change images according to the screensize using the srcSet attribute.
Is there a way to do a similar thing with the <Image /> component in NextJS 13 ? (Maybe using a loader ?)

4 Replies

PepeWOP

2023-06-22T12:28:05.000Z

PepeWOP

2023-06-22T14:42:06.000Z

joulev

2023-06-22T14:46:05.000Z

please do not bump more than once a day per rule 8

PepeWOP

2023-06-22T17:14:11.000Z

for people having the same problem, here's how I did it:

<picture>
  <source
    srcSet="desktop.jpeg"
    media="(min-width: 1024px)" // 1024px and above
  />
  <Image
    src="mobile.jpeg"
    alt="pictures"
    fill
  />
</picture>