[Next.JS] Image 컴포넌트

 

 

Next.JS에서는 특별한 기본 제공 이미지 컴포넌트가 있습니다.

바로 <Image> 컴포넌트입니다!

 

이미지를 보여줄 때, 단순히 <img> 태그를 사용하는 것이 아니라,

Next.JS에서 제공하는 <Image> 컴포넌트를 사용하면 이미지를 더 최적화된 방식으로 출력하도록 도와요.

 

예를 들어, lazy loading을 적용하여 보일 때만, 불러옵니다.

 

위의 동작은 추가적인 설정없이 자동으로 해줍니다.

lazy-loading이 되면 안되는 이미지도 있습니다! 예를 들면, header에서 항상 보이는 이미지/아이콘 같은 경우에는

priority 속성을 추가해서 항상 우선적으로 보이도록 설정할 수 있습니다.

 

반응형 이미지를 적용하는 과정도 단순화할 수 있어요.

 

그래서 <Image> 컴포넌트를 사용하는 것이 좋습니다.

 

그리고, Image를 사용하면 이미지의 확장자가 webp로 변환됩니다.

webp는 가장 압축률이 높아서 성능적으로 가장 좋은 확장자가 될 수 있습니다.