Next.js 14 이미지 최적화

초기 Nuxt3로 개발했었던 사이드 프로젝트 아트인포  를 Next14로 리뉴얼하며 들었던 큰 고민중 하나는

이미지 위주의 컨텐츠가 많다보니 페이지의 용량이 3~5MB가 넘어가는 일이 많았다. (컨텐츠에 따라 용량의 차이는 있지만)

이 문제를 해결하고자 최적화에 대해 찾아봤고 next/image 컴포넌트를 사용하며 최적화한 방법에 대해 기술한다.

기존 문제점

 

아트인포 에서 흔히 볼수 있는 컨텐츠인 공연들중 하나의 이미지다. png의 형태로 용량은 778kb이다..

이런 이미지가 10장 20장을 넘어간다면..?

 

이러한 문제로 최적화에 대해 고민하였고 next/image의 포멧 변환과 캐싱 기능을 사용하였다.

 

next/image 컴포넌트는 기본적으로 webp 파일 형식으로 변환을 해주었고, avif로도 선택이 가능했다.

 

 

AVIF는 일반적으로 인코딩하는데 Webp에 비해 20& 더 걸리지만 20% 더 작게 압축한다. 이미지를 처음 요청할 때는 비교적 더 느리지만
이후에 캐시되는 요청은 더 빠르다.

 

Webp 형식일때의 이미지

 

AVIF 형식일때의 이미지

 

상황에 따라 첫 페이지 로딩속도가 크게 중요한 프로젝트의 경우 webp 아닐경우 avif를 사용하면 될 것 같았지만

AVIF는 Safari에서 IOS16 버전대부터 지원이 되고 이전엔 안됐었다 한다... (Webp는 IOS14 버전부터 지원)

저 문제로 webp형식으로 포맷을 변환해서 당분간은 사용할 예정이다.

 

 

next.cofing.ts에서 image 컴포넌트에 들어가는 이미지의 캐싱시간을 설정을 해줄수도 있어서 캐싱시간은 1분 정도로 설정을 했다.

next.js에선 이미지 캐싱 리셋관련 설정이 없기에 캐싱 시간을 짧게 가져가는것을 권장한다.

이 외의 이미지 최적화와 관련된 옵션들

• quality: 이미지 압축률로 기본값은 75이다. 값이 낮아질수록 압축률이 높아지고 이미지의 품질은 낮아진다.
• priority: 기본값은 false이고 이미지가 로드되는 우선순위를 설정 할 수 있다. 사용자가 페이지 로드 직후 바로 보게되는 중요한        이미지에 적절한 옵션이라고 생각된다.
• unoptimized: 최적화 여부를 설정하는 옵션으로 기본값은 true이다. false로 지정 할 경우 포멧변환, 캐싱등이 적용되지않는 일반  이미지 태그로 생각해야 한다.

 

출처: https://nextjs.org/docs/app/api-reference/components/image

Components: <Image> | Next.js

 

 

그 외에 Can I use에서 확인한 avif, webp의 호환 가능한 브라우저 리스트들이다

Webp

 

AVIF

 

출처: https://caniuse.com/?search=avif