Next.js에서 이미지를 불러올 때 대부분<img> 태그가 아닌 Next/Image 컴포넌트를 사용합니다. 보기에는 다른 점이 없는데 왜 굳이 귀찮게 Next/Image 컴포넌트를 사용해야 할까요? 이번 글에서는 <img>와 Next/Image의 차이점, 그리고 Next/Image를 사용하며 느낀 장단점에 대해 정리해 보겠습니다.
먼저 Next/Image가 웹 성능 최적화를 위해 사용된다는 점은 알고 계실 텐데요, 그렇다면 웹 성능 최적화란 무엇인지, 그리고 이미지가 웹 성능과 왜 연관이 있는지 간단히 짚고 넘어가겠습니다!
웹 성능 최적화란?
웹 성능 최적화는 사용자가 웹사이트에 방문했을 때 최대한 빠르고 원활하게 페이지를 로드하고 인터렉션이 자연스럽게 개선하는 과정을 말합니다. 속도가 빨라야 사용자가 서비스를 이용하는데 불편함이 없을 것고 사용자가 많아야 SEO에도 더 좋겠죠?
이미지 최적화
웹 성능 최적화를 위해서는 이미지 최적화를 뺴놓을 수 없습니다. 이유는 아래와 같습니다.
1. 이미지 차지 비중
- 일반적으로 웹 페이지의 50~80% 용량이 이미지입니다.
- 이미지 최적화를 통해 페이지 크기를 줄이면 로딩 속도를 획기적으로 개선할 수 있습니다.
2. 네트워크 비용 절감
- 최적화된 이미지는 더 작은 크기로 전송되므로, 사용자 데이터 소모를 줄이고 네트워크 비용을 절감할 수 있습니다.
3. 레이아웃 안정성 확보
- 최적화되지 않은 이미지는 로드 중 레이아웃 이동(CLS)을 유발해 사용자 경험을 저하시킬 수 있습니다. 하지만, 최적화 과정에서 이미지 크기를 미리 정의하면 이런 문제를 방지할 수 있습니다.
4. 최적화된 포맷 제공
- WebP와 같은 최신 이미지 표맷은 동일한 화질을 유지하면서도 파일 크기를 줄일 수 있습니다. 일반적인 JPEG나 PNG 대비 25~34% 더 작은 크기를 제공합니다!
<img> 의 한계
1. 이미지 최적화를 수동으로 처리해야 함
<img>는 브라우저가 제공한 이미지를 그대로 로드합니다.- 화면 크기와 해상도에 따라 다른 이미지를 제공하려면 개발자가 직접 미디어 쿼리를 작성하거나 이미지를 별도로 준비해야 합니다.
2. Lazy Loading을 기본적으로 지원하지 않음
loading="lazy"속성을 추가하면 브라우저에서 Lazy Loading이 가능하지만, 모든 브라우저에서 지원하지 않거나 추가 설정이 필요합니다.
3. 포맷 변환 기능 없음
- WebP, AVIF 등 최신 포맷으로 변환하려면 별도의 이미지 처리 도구나 CDN 서비스를 사용해야 합니다.
4. CLS(누적 레이아웃 이동) 문제
<img>는 이미지 로드 전에 크기 정보를 제공하지 않아, 로딩 도중 레이아웃 이동이 발생할 수 있습니다.
Next/Image 컴포넌트
Next/Image는 성능 최적화의 핵심적인 역할을 합니다. Next.js 공식 문서에서는 Next/Image에 대해서 다음과 같이 소개하고 있습니다.
Next.js Image 구성 요소는 HTML <img> 요소를 확장하여 자동 이미지 최적화 기능을 제공합니다:
- 사이즈 최적화: 각 디바이스에 맞는 크기의 이미지를 자동으로 제공하며, WebP와 AVIF와 같은 최신 이미지 포맷을 사용하여 성능을 최적화합니다.
- 시각적 안정성: 이미지를 로드할 때 레이아웃 이동을 자동으로 방지하여 화면이 안정적으로 표시됩니다.
- 빠른 페이지 로딩: 이미지는 뷰포트에 들어올 때만 로드되며, 기본적으로 브라우저의 Lazy Loading을 사용합니다. 또한, 블러 효과로 로드가 완료될 때까지 잠깐의 placeholder 이미지를 표시할 수 있습니다.
- 유연성: 원격 서버에 저장된 이미지도 필요에 따라 크기를 조정할 수 있어, 다양한 상황에 맞는 유연한 이미지 처리가 가능합니다.
Next/Image에서 제공하는 대표 기능은 다음과 같습니다.
Lazy Loading
Lazy Loading은 사용자가 이미지를 보게 될 때까지 이미지를 로드하지 않고, 스크롤을 통해 이미지가 뷰포트에 들어올 때에만 이미지를 로드하는 기술입니다. 이렇게 하면 페이지가 처음 로드될 때 불필요한 이미지 로딩을 피할 수 있어 초기 로딩 속도를 대폭 향상시킬 수 있습니다.
만약, 중요한 이미지 일부에 lazy loading을 적용하고 싶지 않은 경우에는 해당 기능을 끌 수도 있습니다. Image 컴포넌트의 priority라는 prop을 true로 설정하거나, loading prop에 “eager” 값을 설정하면 됩니다. (priorty 값을 설정하는 것이 더 권장되는 방식입니다.)
이미지 사이즈 최적화
이미지 사이즈 최적화는 사용하는 화면 크기와 디바이스의 해상도에 맞게 이미지를 적절히 조정하여 성능을 개선하는 기술입니다. 이는 파일 크기를 줄여 로딩 속도를 개선하고, 다양한 디바이스에서 최적화된 이미지를 제공합니다.
layout 속성(intrinsic, responsive, fill)을 통해 이미지 크기를 반응형으로 설정할 수 있습니다. 이 방식은 페이지 크기나 화면 크기에 맞춰 이미지 크기를 자동으로 조정합니다.
Next.js는 WebP와 같은 최신 이미지 포맷을 자동으로 제공하여 더 작은 파일 크기로 전송합니다. WebP는 동일한 품질의 이미지에 대해 JPEG보다 30% 이상 더 작은 파일 크기를 제공합니다.
Placeholder 제공
Next/Image는 이미지를 로드할 때 blur-up 효과를 제공합니다. 이미지가 로드되는 동안, 저해상도 이미지가 먼저 표시되고, 이후 고해상도 이미지가 로드되면 자연스럽게 교체됩니다. 또한, 이미지 로딩이 끝나기 전에도 화면에 흰 공간이나 빈 곳이 아닌, 로딩 중인 이미지를 표시함으로써 누적 레이아웃 이동(CLS)을 방지할 수 있습니다.
placeholder="blur" 속성을 사용하면 이 기능을 활성화할 수 있습니다.
내가 느낀 Next/Image 장단점
장점
자동으로 최적화된 이미지를 제공하여, 추가적인 설정이나 라이브러리 없이도 성능을 향상시킬 수 있습니다. 웹 성능을 높이기 위한 여러 가지 기능들이 기본적으로 내장되어 있어, 직접 최적화 옵션을 고민하거나 설정할 필요가 없어서 작업할 때 편리했던 것 같습니다.
단점
개인적으로 저는 항상 사용할 때마다 속성에 대한 설정이 헷갈렸습니다...ㅎㅎ
<img> 같은 경우는 직접 사이즈를 넣어주면 그만인데 Next/Image 는 설정해줘야할 속성들이 있고 그것이 어떤 것들인지에 대해도 다 알고있어야 했습니다.
특히 가장 헷갈렸던 것이 layout 속성이었습니다. layout 속성에는 fixed, intrinsic, responsive, fill과 같은 옵션이 있는데, 잘못된 값을 설정해서 이미지가 의도하지 않게 왜곡되거나 크기가 너무 커지는 문제를 겪기도 했습니다😅
그리고 layout 속성에 따라서 width와 height 속성의 의미도 달라진다는 점도 새롭게 알게 되었습니다.
- intrinsic은 원본 이미지 비율을 유지하면서 크기 조정.
- fixed는 설정한 크기로 정확히 표시.
- responsive는 width와 height로 비율을 정의하고, 화면 크기에 맞게 크기를 조정.
- fill은 width와 height가 설정되지 않고, 부모 컨테이너의 크기에 맞춰 이미지가 채워짐.
결론
쓰다 보니 장점보다 단점이 길어졌는데, 사실 단점이라기보다는 잘 몰라서 쓰기 어려웠던 개인적인 헤프닝이었던 것 같습니다ㅎㅎ
평소에 Next/Image를 사용하면서 <img>를 쓰지 않고 굳이 Next/Image를 써야 하는 이유와 성능 최적화에서의 차이가 얼마나 큰지 궁금했었는데, 이렇게 글로 정리하면서 그 궁금증을 조금 해소할 수 있었던 것 같습니다~!
다음 작업에서는 무작정 사용하는 것이 아닌, 성능 차이를 비교하면서 직접 눈으로 확인하고 진행해 봐야겠다는 생각이 듭니다.
