[NextJS] 이미지 컴포넌트 사용하기

NextJS에서는 최적화된 이미지 컴포넌트를 별도로 제공한다.

 

https://nextjs.org/docs/pages/api-reference/components/image

Components: <Image> | Next.js

 

상기 링크로 들어가보면 굉장히 많은 옵션이 존재하는데 해당 블로그에서는 필수 사용법만 정리하겠다.

 

 

 

기본 사용법

 

상기는 일반적인 img 태그 적용예시이다.

 

 

상기는 Next 이미지 컴포넌트를 적용한 예시이다. import에 'next/image'가 추가된 것을 확인할 수 있고, 'src' 구분이 삭제 되었다. 일반적으로 별도의 옵션 설정 없이 상기의 코드처럼 사용하면 된다.

 

 

소스 코드 변경점

 

 

 

해당 이미지의 HTML 코드를 살펴보면 loading="lazy"라는 항목이 추가된 것을 확인할 수 있다. 또한, 자동으로 너비와 높이를 추론한다. srcset이 설정되어 뷰포트와 웹 사이트를 방문하는 장치에 따라 다른 크기의 이미지를 자동으로 로드한다. 

 

 

 

 

더하여 사용자의 브라우저에 따라 해당 이미지를 자동으로 최고의 이미지 포맷으로 자동 적용해준다. 예를 들어 크롬에서 이 페이지를 방문한다면 WebP 이미지로 표현해준다. 이는 png 포맷보다 훨씬 효율적이다. 

 

priority 속성 추가하기

 

상기에서 작성한 코드를 사용하면 Console창에 priority를 추가 해달라는 경고 메세지가 나타난다. 이는 lazy loading이 많은 것들을 해주지 못하는 것이다. 불필요한 콘텐츠의 변경과 화면 깜빡임을 피하기 위해 NextJS와 브라우저에게 해당 이미지가 가능한 빠르게 로딩되는 것을 요청해야 한다.

 

 

 

priority를 추가해주면 경고는 사라지게 된다.