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