Next Image 최적화와 SVG

Next.js

• 프로젝트에서 로고와 아이콘을 구현하기 위해 SVG 이미지를 사용했는데, Next.js의 <Image /> 컴포넌트를 적용해도 이미지 최적화가 이루어지지 않는 문제를 발견했다.
• PNG 이미지는 최적화가 적용되었지만, SVG는 동일한 방식으로 처리되지 않아 그 원인이 궁금해졌다.

 

Next.js 공식문서에서의 Image 

• Next.js 공식문서에서는 기존 img 태그를 최적화 시킨 Image 컴포넌트를 제공한다. 

• 실제로 위 png가 img 태그를 사용했고, 아래 png가 Next.js에서 제공하는 Image 컴포넌트를 사용한 결과인데 시간차이가 꽤 크게 났다. 
• 실제로 공식문서를 보면 크키 최적화와 이미지 로드시 레이아웃 이동(CLS)를 방지해주고 이외에 많은 기능을 제공한다.

Next.js 공식문서 이미지 최적화 사진

 

Next.js Image 까보기

• 현재 img src를 보면 src가 뭔가 내가 준 src와는 차이가 있다. 
• Next.js에서 src를 loader 라는 속성이 자동으로 변경시킨다고 한다. 

 

🧐그렇다면 최적화는 언제 시키는 걸까

• Next.js는 요청이 들어오면 dist 폴더안에 cache/images 폴더안에 이미지를 생성해 동적으로 만들고 이후 동일한 요청이 오면 이를 캐싱해서 사용한다. 
• 위와 같이 이미지를 동적으로 만들 때 작업시간이 걸리기 때문에 첫 로딩은 길지만, 재요청시에는 빠른 모습을 보인다. 
• 하지만 위 사진에서는 생각보다 빨라서 놀랐다. 
• 근데 모든 이미지를 최적화 시켜주는 것은 아니었다... 현재 나는 SVG로 이미지를 처리하고 있다. 그래서 최적화가 되지 않는 모습을 보였다.. 이는 Next.js가 이미지를 동적으로 생성하다 보니 작업이 오래걸리는 SVG, GIF의 경우에는 최적화 지원을 하지 않는다고 한다.

 

Next.js SVG 사용 하기 

• 현재 작업한 이미지는 로고처럼 다양한 크기에서 반복적으로 사용되는 그래픽 요소였다. 따라서 화면 크기나 해상도에 따라 이미지가 흐려지지 않고, 항상 선명하게 유지되는 것이 중요하다고 판단했다.
• 이러한 이유로 픽셀 기반 이미지보다 크기 변화에 강한 벡터 이미지인 SVG가 더 적합하다고 보았다.
• Next.js에서 SVG를 svgr 라이브러리를 사용하는 방법과 unoptimized를 true로 바꾸면 된다. 

npm install --save-dev @svgr/webpack

• 위와 같이 svgr 라이브러리를 사용하면 SVG를 Next.js에서도 사용이 가능하다고 한다. 

 

Next.js 공식문서

• Next.js에서 제공하는 unoptimized 속성을 활용하면, 최적화가 필요하지 않은 SVG를 Image Optimization API를 거치지 않고 원본 그대로 사용할 수 있다.

Sharp?

🔍 Sharp에 대한 이해

• Next.js의 이미지 최적화는 내부적으로 이미지 처리 라이브러리를 사용해 이루어지며, 환경에 따라 Sharp 또는 Squoosh가 사용된다.
• 일반적으로 개발 환경에서는 별도의 설정 없이도 동작하는 Squoosh가 사용되며 프로덕션 환경에서는 더 빠르고 효율적인 처리를 위해 Sharp 사용이 권장된다.
• 또한 Sharp는 PNG, JPEG와 같은 raster 이미지 최적화에는 적합하지만, SVG와 같은 벡터 이미지는 구조적으로 최적화 대상이 아니기 때문에 적용되지 않는다.

🎯 결론

이미지 최적화는 하나의 방식으로 해결되는 문제가 아니라, 이미지의 특성에 따라 적절한 전략을 선택하는 것이 중요하다는 것을 알게 되었다.

• 로고, 아이콘 → SVG (해상도 독립성)
• 사진, 일반 이미지 → Next.js Image + Sharp (최적화)

→ 상황에 따라 SVG와 Image 최적화를 구분해 사용하는 것이 가장 효율적이라고 판단했다.