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

yho79555님의 프로필 이미지

작성한 질문수

손에 익는 Next.js - 공식 문서 훑어보기

메타데이터 다루기

next/image에 대한 질문

24.08.08 18:51 작성

·

77

·

수정됨

1

질문 1. next/image는 (Image컴포넌트) 웹사이트의 로딩 성능에 많은 영향을 미치는 이미지를 사용하는 것만으로도 큰 개선을 볼 수 있도록 해주는 컴포넌트이라서 비용이 비싸다고 하는데 그렇다면 AWS로 배포했을 때 next/image 때문에 비용이 더 올라가나요?
질문 2. next/image가 비용이 비싸다면 어떤 경우에 사용하는지 궁금합니다.

답변 1

1

하조은님의 프로필 이미지
하조은
지식공유자

2024. 08. 09. 14:38

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

 

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

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

 

 

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

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

 

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

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

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

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

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

 

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

 

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

yho79555님의 프로필 이미지
yho79555
질문자

2024. 09. 07. 23:07

답변 감사합니닷

yho79555님의 프로필 이미지

작성한 질문수

질문하기