[Next.js] Images에 대해서

해당 내용은 npx create-next-app --example image-component react-image-app 를 이용해 작성하였습니다.

 

1. Next.js의 Image 컴포넌트

 

 

Image 컴포넌트에서 제공하는 기능 3가지

• lazy loading
  - 화면 밖의 이미지는 로딩을 지연시키고 화면 안에 있는 이미지만을 로드해서, 불필요한 사용을 줄이고 필요한 이미지만 빠르게 로드할 수 있도록 하는 것 입니다.

lazy loading

• 이미지사이즈 최적화
  - Next.js는 이미지를 webp와 같은 용량이 작은 포맷으로 이미지를 변환해서 제공합니다
  - 아래의 이미지를 보면 img 의 경우 294kb(원본크기)  Next.js/Image는 8.1kb로 나타나며 유형 또한 다른것이 보입니다

좌 : img , 우 : Next.js/Image

 

 

• placeholder 를 제공하여 CLS를 방지합니다

 

---

Image 컴포넌트의 장점

• 성능 향상 : 디바이스마다 적절한 사이즈의 이미지를 서빙하고, webp와 같은 작은 용량의 포맷을 사용합니다
• 시각적인 안정성 : 이미지 로드 전 placeholder를 제공하여 CLS(Cumulative Layout Shift) 방지
  *CLS : 웹 페이지가 로드될 때, 사용자가 페이지의 내용을 읽거나 상호 작용하는 중에 레이아웃이 갑자기 변경되면 사용자 경험에 부정적인 영향 주는 경우를 말합니다.
• 빠른 페이지 로딩 : viewport에 들어왔을 때만 이미지를 로드하고, 작은 사이즈의 blur 이미지를 미리 로딩하여 사용자 경험이 향상됩니다.

 

Image의 속성

 

Layout

• intrinsic : default 값, 이미지의 width, height에 따라 얼마나 많은 자리를 차지하는지 계산합니다.
  * 컨테이너의 크기가 이미지보다 작아질 경우 컨테이너에 맞게 크기를 줄임!
• fixed : 이미지의 정확한 width, height를 사용하여 표시합니다.
  * 컨테이너 크기와 무관하게 이미지의 크기를 width, height 속성값을 이용
• fill : relative 포지션을 가진 조상의 너비, 높이와 동일하게 조정함. 주로 objectFit 속성과 함께 사용합니다.
  * position: relative를 가진 조상의  width, height에 맞추기 위해 자동으로 width, height를 조절합니다.
  (이미지 사이즈를 모를 때 사용하면 좋은 옵션입니다.)
• responsive : 부모 컨테이너의 width에 맞게 이미지를 확대합니다.
  (부모 컨테이너에 display: block을 추가해야 합니다.)
  
  

width, height 속성에 대해

- intrinsic, fixed 의 경우 이미지의 width, height 속성값이 그대로 적용됩니다.
- responsive, fill의 경우 이미지가 비율에 맞게 확대 축소됩니다.

 

Priority(우선순위)

• priority를 사용시 브라우저가 이 이미지를 미리 렌더링 합니다.  처음 보이는 이미지에는 이 속성을 지정하는 게 좋습니다.
• Boolean 타입 이며,  priority라고 적으면 true가 되고, 안 적으면 false가 됩니다.
  (priority의 경우  lazy loading은 적용되지 않습니다.)

 

참고

카카오 FE 기술블로그 : https://fe-developers.kakaoent.com/2022/220714-next-image/

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