next/image를 활용한 이미지 최적화

우연히 아래 글을 보게 되었는 데 지금 진행하고 있는 프로젝트가 Next.js라서 적용해보면 좋을 것 같았다.

Next/Image를 활용한 이미지 최적화

 

지금 진행하고 있는 프로젝트에서 가끔씩 이미지가 제각각으로 로딩되는 부분이 신경 쓰였는 데 이 글을 통해 많은 도움을 받았다.

 

Next/Image 컴포넌트의 기능은 크게 3가지라고 하는 데

- lazy loading
: 이미지 로드 시점을 이미지가 필요할 때까지 지연 시키는 기술

- 이미지 사이즈 최적화
: 스테이지에서는 기존 표시되는 영역에 비해 5배 큰 이미지를 로드하고 있어 Next/Image는 디바이스 크기 별로 srcSet을 미리 정해두고, 사용자의 디바이스에 맞는 이미지를 다운로드할 수 있게 해 준다.

- placeholder 제공
:  어떤 웹 사이트에 방문했을 때 이미지가 로드되기 전까지 영역의 높이가 0이었다가 이미지가 로드된 후 이미지만큼 영역이 늘어서 레이아웃이 흔들리는 바람 같은 경우가 생기는 데 이런 현상을 방지하고자 제공하는 기능
(placeholder="blur"를 사용하면 이미지 로드 전에 이미지 영역만큼 회색 바탕이 생긴다.)

 

이로써 얻게 되는 장점에는

성능 향상, 시각적 안정성, 빠른 페이지 로딩이 있다고 한다.

 

더 자세한 내용은 아래 블로그 보세요.

Next/Image를 활용한 이미지 최적화