Next/Image

🚨 경고 발생 Image with src "~~" has "fill" but is missing "sizes" prop. Please add it to improve page performance. Read more: https://nextjs.org/docs/api-reference/next/image#sizes 🤔 원인 해당 링크로 들어가 보니 내용은 다음과 같았다. sizes의 값은 fill을 사용하는 이미지나 반응형 크기를 가진 이미지에 대한 성능에 큰 영향을 미친다. "fill" 속성이 있는 이미지에 "sizes"값을 지정하지 않으면 기본값으로 100vw가 사용된다. 이게 무슨 뜻인지 좀 더 찾아봤는데 fill 속성을 사용한 이미지의 경우 이미지가 전체 뷰포트를 채우도록 확장되어야 한다는 것을 ..

오늘은 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) 보다 훨씬 더 좋은 무손실 압축과 고품질을 자랑한..