오늘은 Next.js에서 이미지를 사용하는 방법에 대해서 알아보겠다. 이 글은 Next.js 14를 기준으로 작성되었다. 이미지 최적화 전략 이미지를 최적화하기 위한 전략에는 아래와 같이 다양한 방법이 있다. png, jpeg 형식보다는 webp, avif 형식의 이미지 파일 사용하기 이미지 Lazy Loading 처리하기 디바이스 크기에 알맞은 이미지 크기로 리사이징 이미지 캐싱하기 이러한 작업을 Next.js에서 해주고 있는데 어떻게 적용할 수 있는지 알아보겠다! 1. webp로 변환 next/image는 png, jpeg 등 형식을 webp로 변환해 이미지 용량을 줄여준다. webp보다 2019년에 만들어진 avif가 여러 형식(jpeg, webp) 보다 훨씬 더 좋은 무손실 압축과 고품질을 자랑한..
