NextJS에서 제공하는 <Image/> 를 왜 써야할까?

NextJs를 사용하기 전에는 이미지를 넣어야 한다면 <img />태그를 사용하여 이미지를 넣고는 하였다.

하지만 Next 자체에서 <Image/> 컴포넌트가 존재하기 때문에 이를 사용하여 이미지를 넣을 수 있다. 

그렇다면 어떨 때 <Image/> 컴포넌트를 사용하고, 왜 사용하는 것인지에 대해 공부한 내용을 작성해보고자 한다.

 

<Image/> 

<Image/> 컴포넌트는 lazy-loading이 지원되며 기본적으로 width와 heigth를 작성해줘야 한다. 

또한 alt값을 필수로 작성해야만 오류가 발생하지 않는다. 

또한 해당 컴포넌트는 이미지를 최적화해서 보여주기 때문에 사용처에 따라 이미지의 크기를 원본과 다르게 보여준다. 

 

위의 값을 설정하기 위해 지원하는 옵션을 적어보고자 한다.

width, heigth

<Image width={300} heigth={300} /> // 300px X 300px

괄호 안에 들어간 값은 픽셀로 이미지가 렌더링되게 된다.

<Image/> 컴포넌트에서 필수로 들어가야되는 옵션이다. 하지만 아래에 작성한 옵션을 작성한다면 이 두개의 값은 생략이 가능하다.

fill

<Image fill /> // 100% * 100%

fill 옵션은 이미지가 해당 렌더링할 때 가득 채우게 하는 옵션으로 해당 옵션을 작성하게 되면 width, height 옵션을 작성하지 않아도 된다.

하지만 해당 옵션을 작성하면 <Image />태그는 자동적으로 absolute로 포지션이 되기 때문에 부모 엘리먼트에 포지션을 relative혹은 fixed로 지정을 해줘야 한다.

이렇게 작성후에 이미지 태그의 object-fit CSS를 작성해줘야 기존에 사용한 <img />와 동일하게 사용할 수 있다.

quality

해당 옵션은 이미지의 퀄리티를 조정하는 것이다. Next로 만들어진 웹사이트에 500kb 이미지 렌더링한 후에  값을 살펴보면 원본보다 작아진 것을 알 수 있다. 

그 이유는 Next에서 이미지를 자체적으로 최적화하는데 이때 최적화의 값을 해당 옵션을 통해서 조절이 가능하다.

<Images quality={75}/> // default = 75

기본값은 75이며, 0~100 사이의 값을 작성하면 된다. 값이 작아지면 원본의 이미지보다 더 압축하여 보여지며, 100에 가까울 수록 원본의 크기보다 용량이 커지게 된다. 

(jpg 자체가 이미 압축한 파일이기 때문에 브라우저에서 원본의 파일 크기보다 커지는 것이 가능하다.)

priority

위에서 <Image /> 태그는 lazy-loading을 지원한다고 작성했는데 이때 해당 옵션의 값은 false인 상태이다.

만약 해당 값을 true로 바꿔주게 되면 lazy-loading에서 제외하여 렌더링시 우선순위로 렌더링을 하게된다. 

<Image priority />

그럼 언제 사용해야 할까?

이미지를 보여주기 위해서 무조건 <Image />  컴포넌트를 사용해야 하는 것은 아니다. 

작고 중요하지 않은 것일 때는 간단하게 <img> 태그를 사용하여 보여줘도 괜찮지만, 브라우저에서 메인에 보여지는 이미지의 경우에는 굳이 <img> 태그를 사용하는 것보다 <Image /> 컴포넌트를 사용하여 보여주는것이 성능적인 면에서도 더 좋다. 

외부에서 불러온 이미지를 보여주기 위한 준비

만약 내가 외부에서 불러온 이미지를 <Image /> 에 보여주고 싶어 src에 값을 넣어서 확인해보면 에러가 발생한 것을 알수있다. 

그 이유는 Next에서 외부의 이미지를 불러올 때는 next.config.js를 수정을 해줘야 한다.

아래의 주소에서 이미지를 불러와 보여주는 예를 들어보자

• https://example.image/width=500&heigth=500.....

그렇다면 위의 주소를 <Image src=""/>값으로 넣어주게 된다.

그리고 next.config.js에서 위 주소의 도메인 부분만 복사하여 아래처럼 작성해줘야 한다. 해당 값이 여러개가 들어올 때는 , 를 통해 계속 작성해주면 된다.

module.exports = {
  reactStrictMode: true,
  images: {
    domains: ["examle.image"],
  },
};

이 작업까지 완료를 해줘야 NextJS에서 제공하는 <Image/> 컴포넌트에 외부 이미지를 불러와 사용할 수 있게 된다.