#Using <Image> responsively

5 messages · Page 1 of 1 (latest)

sullen sun
#

Hello,
how can we use <Image> in different breakpoints? eg:

<Image
  src="https://s3.amazonaws.com/my-bucket/profile.png"
  alt="Picture of the author"
  width={500}
  height={500}
/>
#

My intuition is to use a hook that detects wht breakpoints your in and not use a CSS calssname on <Image/>?

idle anvil
#

With the sizes prop you can download an optimized image based on the browser's render width/height

sullen sun
#

Thanks :)!