Skip to content

How to make Image responsive in NextJS 13

Hi, I understand that Image component in Next/Image is annoying. Sometimes it needs width and height predefined and still we fail to get a responsive image according to our need.

Here is a fix to to make Image component responsive in Next JS 13.

All you need to do is wrap the Image Component into a <div> component and write the Image component in this way

import dummyImage from "IMAGE_PATH"
<div className='w-full max-w-xs'>
    <Image
      alt="responsive_image"
      src={dummyImage}
      sizes="100vw"
      width={IMAGE_WIDTH}
      height={IMAGE_HEIGHT}
      style={{
        width: '100%',
        height: 'auto',
      }}
      priority="blur"
    />
</div>
JSX

Here are a few things to notice:

  1. I am using NextJS 13 with Tailwindcss
  2. Make sure to import your image and use the imported image (imported as dummyImage ) in the src. Avoid writing IMAGE_PATH in src attribute. I don’t know why it throws error to me while doing the opposite.
  3. To make image responsive, change the styles of wrapper <div> element. Like I have given it a max-w-xs (max-width: 20rem; /* 320px */).
  4. You can change the responsive styles of the <div> element, the Image will be resize just like the <div>.

If you face any problem, let me know.

Thanks.