[Next.js] Next/Image로 이미지 최적화하기

더 나은 UX를 위해 프로젝트에서 이미지 로딩을 어떻게 다루는게 좋을지 궁금했다. 

 

Next.js 에서 이미지를 최적화하는 방법에는 크게 3가지가 있다. 

1. lazy loading

2. 사이즈 최적화

3. layout shift 방지하기 

 

(이 모든 걸 잘 다루고 있는 카카오 기술블로그의 글을 참고했다 - https://fe-developers.kakaoent.com/2022/220714-next-image/)

Next/Image를 활용한 이미지 최적화 | 카카오엔터테인먼트 FE 기술블로그

-> lazy loading은 이전에도 배웠던 개념이다. 페이지에 접근할 때, 모든 콘텐츠를 전부 로드하는 대신 사용자가 필요한 페이지의 일부만 로드하여 성능을 최적화하는 것이다.

-> layout shift는 이번에 새로 배운 개념. 이미지 로드가 늦어져서 레이아웃이 밀려나는 현상을 의미한다. 

 

<직접 최적화 해보기>

먼저, Next.js를 이용한 프로젝트에서 기존의 리액트 문법으로 <img> 태그를 이용해 이미지를 삽입했다. 

그랬더니 경고 메세지가 뜬다.

Next.js에서 제공하는 <Image /> 를 통해 이미지를 자동으로 최적화해준다고 한다!

(찾아보니 lazy loading과 사이즈 최적화, 그리고 placeholder를 제공(layout shift 방지)한다. )

 

+ 이걸 쓰려면, 이미지를 public에서 자동으로 잡아주는 것이 아니라 직접 해당 파일 상단에 import 해와야 한다. 

+ 외부 이미지를 쓰려면, height, width 속성 설정 및 config 설정이 필요하다.

 

<최적화 전> 

- 많은 이미지를 로드하고 있는 것은 아니지만, 최적화 전후 차이를 직접 살펴보기 위해 성능을 관찰해보았다.

아래 세가지 이미지를 .jpeg 형태로 보여주고 있다.

 

-

페이지 로드 시, 네트워크 탭을 뜯어보았다.

세 이미지 파일 모두 Content Download에 각각 대략 0.33 ms가 걸린다. μs로 환산하면 330μs 이다. 

 

<최적화 후>

 

<Image /> 로 최적화 해준 후, Content Download에 6μs가 걸린다. 엄청난 최적화 효과...!? 

또한, 최적화 전에는 .jpeg 형태로 로드되는데에 반해,

이렇게 최적화 후에는 webp 형태로 변환된다. (더 용량이 작은 포맷)

 

이러한 작업은 이미지에 대한 최초 요청 시에 서버에서 이루어진다.

그래서 네트워크 탭을 보면 webp형태로 변환된 이미지로 요청한것으로 request URL도 변경된 것으로 보여진다. 

 

<후기> 

이렇게 간단하게 Next.js에서는 이미지 최적화 기능을 제공하고 있다니! 

기존 <img> 보다 설정해줘야 하는 것들이 조금 추가되기는 하지만, 사용법도 간단하고 최적화 효과가 좋아서 놀라웠다. 

포트폴리오 사이트 Next.js 로 만들면서 이미지 최적화 기능을 잘 활용해봐야겠다. 👏

그때는 lazy loading과 layout shift 방지하는 효과까지 잘 관찰해보겠음!