[Next.js] next Image 컴포넌트 사이즈 경고 해결

Next.js를 활용해 개발하다 보면 한번쯤은 마주쳤을 경고인 Image 컴포넌트 사이즈 경고!!

Image with src "..." has either width or height modified, but not the other. if you use CSS to change the size of your image, also include the styles 'width: "auto"' or 'height: "auto"' to maintain the aspect ratio.

도대체 왜 생기는 거야?

일단 Next.js에서 제공하는 Image 컴포넌트는 자체적으로 이미지 최적화를 제공해준다. 따라서 Next를 사용해 개발을 한다면 별도의 Image 최적화를 해주지 않아도 우리는 편하게 이미지 최적화를 적용할 수 있다.

 

이때 우리는 Image 컴포넌트를 사용하기 위해 필수적으로 src, alt를 지정해줘야 하며 사이즈 걔산을 위해 width, height를 지정하거나 fill 속성을 부여해줘야 한다.

그래서 왜 경고가 뜨는 건데?

그건 바로 개발자가 부여한 이미지의 폭과 높이가 원본 이미지의 폭과 높이의 비율과 다르기 때문이다!!

 

만약 70*70인 이미지가 있다고 가정했을 때 해당 이미지를 사용하고 싶다면 원본 이미지의 비율일 1 : 1 비율에 맞춰 width와 height를 지정해줘야 한다. 만약 지정한 너비와 높이의 비율이 원본과 다르다면 next는 우리에게 위와 같은 경고를 주는 것이다.

어떻게 해결할 수 있을까?

나의 경우 사용하고자 하는 이미지의 크기가 1 : 1 또는 9 : 16 이런 식으로 비율이 딱 떨이지지 않아는 이미지가 많았기 때문에 사이즈를 조정할 때 해당 경고가 불가피했다.

 

따라서 이런 문제를 해결하기 위해 css 코드로 width와 height를 auto로 지정해줘야 했는데 무슨 이유에서인지 tailwind로 w-auto h-auto 가 생각대로 적용되지 않아서 애를 먹었다.

 

그래서 선택한 방법은 width와 height 속성 대신 fill을 사용하는 것이었다.

fill은 이미지의 너비와 높이가 불명확할 때 사용하는 속성으로 부모 컨테이너의 크기에 맞게 이미지가 채워지게 한다.

그렇게 생성한 컴포넌트는 다음과 같다.

 

import { default as NextImage } from "next/image";

import { twMerge } from "tailwind-merge";

interface ImageProps {
  src: string;
  alt: string;
  className: string;
  priority?: boolean;
}

const Image = ({ className, ...props }: ImageProps) => (
  <div className={cn("relative", className)}>
    <NextImage {...props} fill sizes="100%" className="object-contain" />
  </div>
);

export default Image;

 

Image의 fill 속성을 사용하기 위해선 부모에 relative나 absolute, fixed로 position을 지정해줘야 한다. 또한 fill 속성을 사용하면 Image의 size가 자동으로 100dvw가 되어 모든 이미지가 전체화면 크기에 맞춰지게 된다 따라서 sizes를 지정해 크기를 조정해줘야 하며, 부모 컨테이너에 이미지를 맞추기 위해 object-fit 을 contain으로 지정했다.

 

이렇게 제작한 이미지 컴포넌트는 

<Image src="svg/ic-thick-arrow-right.svg" alt="next" className="w-[8px] h-[14px]" />

 

이런 식으로 사용해줬고 이미지 사이즈 경고를 해결할 수 있었다.