웹사이트의 성능은 사용자 경험에 중요한 역할을 하며, 그 중 이미지 최적화는 페이지 로딩 속도를 크게 향상시킬 수 있는 핵심 요소입니다. 이미지는 흔히 웹페이지의 대부분의 데이터를 차지하는데, 이는 LCP(Largest Contentful Paint) 성능에 큰 영향을 미칩니다. Next.js는 이 문제를 해결하기 위해 Image 컴포넌트('next/image')를 제공합니다. 이 컴포넌트는 기존 HTML <img> 태그를 확장하여 자동 이미지 최적화 기능을 포함하고 있습니다.

Image 컴포넌트는 다양한 기능을 제공하는데요. 그 중 하나는 이미지의 사이즈를 자동으로 최적화하여 해당 장치에 맞게 조정해줍니다. 또한, 이 컴포넌트는 최신 이미지 포맷인 WebP와 AVIF를 지원합니다. 예를 들어, 2MB의 JPEG 파일을 약 20KB의 WebP 이미지로 자동 변환 됩니다. (magic)

이러한 최적화는 내부적으로 이미지 최적화 모듈을 사용하여 이루어집니다. 그리고 최적화 모듈에서는 이미지 최적화 라이브러리가 사용하는데요. Next.js는 기본적으로 개발 환경에 적합합 Squoosh 라이브러리를 사용합니다. 하지만 Production 레벨에서는 Sharp 라이브러리의 사용을 강력히 권장합니다. Sharp는 Squoosh보다 성능이 약 3~6배 빠르기 때문에, 더 빠른 이미지 처리가 가능합니다.

또한, Image 컴포넌트는 레이지 로딩(Lazy Loading)을 지원하여, 이미지는 페이지의 뷰포트(Viewport)에 들어갈 때만 로드됩니다. 이 기능은 페이지의 로딩 속도를 향상시킵니다.

또, 이미지의 로딩으로 인한 레이아웃 이동을 방지하는 기능도 제공되며, 이는 웹페이지의 시각적 안정성을 유지하는 데 도움이 됩니다.

따라서, Next.js 프로젝트에서 이미지 최적화를 진행하려는 경우, img 태그 대신 Image 컴포넌트의 사용 및 Sharp 라이브러리의 사용을 권고 드립니다.

https://oliveyoung.tech/blog/2023-06-09/nextjs-image-optimization/