image component1 Next.js 14 이미지 최적화 초기 Nuxt3로 개발했었던 사이드 프로젝트 아트인포 를 Next14로 리뉴얼하며 들었던 큰 고민중 하나는이미지 위주의 컨텐츠가 많다보니 페이지의 용량이 3~5MB가 넘어가는 일이 많았다. (컨텐츠에 따라 용량의 차이는 있지만)이 문제를 해결하고자 최적화에 대해 찾아봤고 next/image 컴포넌트를 사용하며 최적화한 방법에 대해 기술한다.기존 문제점 아트인포 에서 흔히 볼수 있는 컨텐츠인 공연들중 하나의 이미지다. png의 형태로 용량은 778kb이다..이런 이미지가 10장 20장을 넘어간다면..? 이러한 문제로 최적화에 대해 고민하였고 next/image의 포멧 변환과 캐싱 기능을 사용하였다. next/image 컴포넌트는 기본적으로 webp 파일 형식으로 변환을 해주었고, avif로도 선택이 가능.. 2024. 7. 14. 이전 1 다음
