인프런 커뮤니티 질문&답변

안녕하세요. 이미지 컴포넌트에 대해 질문 남겨주셨네요!

AWS로 배포했을 때 next/image 때문에 비용이 더 올라가나요?

next/image가 서버를 활용해 이미지 최적화를 하기 때문에 어느정도의 서버 운용 비용을 증가 시킬 수 있다는 의미로 질문을 해석했습니다. 이미지의 갯수, 페이지 방문 트래픽에 따라 차이가 있을 수 있지만 일반적인 경우라면 next/image를 사용한다고 해서 크게 차이날 정도는 아닐 것으로 예상합니다.

next/image가 비용이 비싸다면 어떤 경우에 사용하는지 궁금합니다.

이미지는 웹 서비스의 성능에 가장 많은 영향을 끼치는 요소입니다. 특히, LCP라고 부르는 지표에 큰 영향을 줍니다. 때문에 이미지 로딩 성능을 개선하면 웹 서비스의 성능 향상에 지대한 영향을 끼칠 수 있습니다. 이를 위해 Next.js에서는 next/image를 제공합니다.

next/image는 다음과 같은 장점을 가지고 있습니다.

1. 디바이스 환경에 맞는 이미지 사이즈, 포맷으로의 자동 매칭

2. 레이아웃 시프팅 이슈 해결 (레이아웃 시프팅:이미지 로드 전과 후의 크기 차이에서 발생하는 레이아웃 트러짐 현상)

3. 이미지 지연 로딩으로 초기 로딩 속도 개선

장점에 대한 자세한 내용은 공식 문서를 확인해보시면 좋을 것 같습니다.

결국 next/image를 사용했을 때의 장점이 어느정도의 비용 발생보다 큰 가치를 제공한다고 판단했을 때 next/image를 쓰는 것이라 말할 수 있을 것 같습니다.

질문 남겨주셔서 감사합니다.