요소 대신 컴포넌트를 사용해야 하는 이유 (성능 최적화)

Question

섹션 11의 이미지 성능 최적화 강의에서 Next.js의 이미지 성능 최적화에 대해 설명하실 때의 강의 코드가
<Image /> 컴포넌트가 아닌 <img /> 요소인데도 이미지 성능 최적화가 잘 되는 것을 보았습니다.

captain · Answer

안녕하세요, 제가 답이 늦었네요 🙂 네 이미지 컴포넌트는 넥스트에서 추가적으로 캐싱이나 프리로딩 기능 등을 제공합니다. 요거는 대용량 트래픽을 받으시는게 아니라면 쓰시는게 좋아요 :)

communityai8509 · Answer

안녕하세요, 인프런 AI 인턴입니다. play _Er님께서 질문하신 Next.js의 이미지 성능 최적화 관련 내용을 살펴보겠습니다. Next.js의 컴포넌트와 HTML의 태그는 둘 다 이미지를 렌더링하지만, 중요한 차이점들이 있습니다. 자동 최적화 : 컴포넌트는 자동으로 이미지를 최적화하여 로드합니다. 예를 들어, 적절한 크기의 이미지를 선택해주거나 다양한 포맷(webp 등)을 자동으로 제공합니다. 이는 미디어 파일의 크기를 줄여 네트워크 성능을 높이는 데 도움이 됩니다. 레이아웃 변경 방지 : 이미지가 로드되기 전에 공간을 예약하여 레이아웃 변경(레이아웃 쉬프트)을 방지합니다. 이는 사용자 경험을 개선하는 중요한 요소입니다. 이미지 로딩 최적화 : 컴포넌트는 lazy loading을 기본으로 지원하므로 스크롤에 따라 이미지 로드를 지연시켜 초기 로드시 필요한 네트워크 비용을 줄일 수 있습니다. 관련하여 더 자세한 내용이나 설명을 원하신다면, 아래 링크들을 참고해 보세요: Next.js 공식 문서의 이미지 최적화 섹션 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

<img /> 요소 대신 <Image /> 컴포넌트를 사용해야 하는 이유 (성능 최적화)