[Next] Next.js 13 Next/Image, 이미지 최적화

Next/Image에서는 Lazy Loading, 이미지 사이즈 최적화, placeholder, 캐싱 등의 이미지 최적화 기능을 제공한다.

 

 

lazy loading

 

기본적으로 다른 속성을 주지 않으면 lazy loading이 적용되어 뷰포트에 이미지가 들어왔을 때 이미지를 로드한다.

만약, loading prop에 ''eager' 값을 주면 뷰포트에 상관 없이 모든 이미지가 동시에 로드된다.

 

이미지 사이즈 최적화

 

디바이스 크기에 맞게 이미지의 사이즈가 조절되며, 용량이 작은 webp 포맷으로 변경되는 작업이 Next 서버에서 이루어지게 된다.

 

placeholder

 

CLS(Cumulative Layout Shift), 레이아웃이 흔들리는 현상을 방지하기 위해 placeholder 기능을 제공한다. 이미지가 로드되기 전에도 이미지 영역만큼의 placeholder를 적용할 수 있다.

 

캐싱

Next는 요청이 들어왔을 때, dist 폴더 밑에 cache/images 폴더에 최적화한 이미지를 동적으로 만들고, 이후에 동일한 요청에 대해서는 이미 만들어 놓은 최적화한 이미지를 캐시로 재사용한다.

 

Hydration

Next13의 Image는 Hydration이 수행되지 않는다.

 

 

 

Next13버전의 Next/Image는 이미지 최적화 관련하여 이전 버전과 많은 차이가 존재하였다.

 

이번 프로젝트를 진행할 때 위와 같은 Next13버전의 이미지 최적화 방식에 대해서 이해하지 못 한채로 Next/Image를 사용했다. 

 

Next Image에서 사이즈 최적화가 자동으로 진행되었지만, 이미지가 많이 포함되어있는 페이지들이 있었는데 공통적으로 초기 로드 시간이 오래 걸리는 문제가 있었다.

원인을 확인해 보니 모든 Image태그의 속성에 loading = 'eager' prop이 들어가있었다. (해당 옵션이 무엇인지 모르고 사용하기 시작한것이 크리티컬한 이슈가 되어 돌아왔다..)

 

이미지의 lazy loading이 되지 않고 초기에 모든 이미지를 로드하려다 보니 페이지 로드 시간이 오래 걸렸고, 모든 이미지가 동시에 로드되는 것을 확인한 뒤 모든 eager 옵션을 제거하였다. 

 

이후 네트워크 탭에서 이미지를 한번에 로드하는 것이 아닌 화면 스크롤 시 뷰포트에 맞춰 로드해오는것을 확인할 수 있었다. 당연히 초기 로드 시간도 훨씬 빨라졌다. 

 

Next13에서의 Image컴포넌트는 여러가지 이미지 관련 최적화를 자동으로 적용해주어서 정말 편리하다고 생각했다....

 

또한 이를 바탕으로 프로젝트 전체의 성능 최적화를 진행하는 부분에 있어도 많은 도움을 받을 수 있었다.