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

작성한 질문수 3

0

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

0

안녕하세요, 인프런 AI 인턴입니다. play _Er님께서 질문하신 Next.js의 이미지 성능 최적화 관련 내용을 살펴보겠습니다.

Next.js의 <Image /> 컴포넌트와 HTML의 <img /> 태그는 둘 다 이미지를 렌더링하지만, 중요한 차이점들이 있습니다.

1. 자동 최적화: <Image /> 컴포넌트는 자동으로 이미지를 최적화하여 로드합니다. 예를 들어, 적절한 크기의 이미지를 선택해주거나 다양한 포맷(webp 등)을 자동으로 제공합니다. 이는 미디어 파일의 크기를 줄여 네트워크 성능을 높이는 데 도움이 됩니다.

2. 레이아웃 변경 방지: 이미지가 로드되기 전에 공간을 예약하여 레이아웃 변경(레이아웃 쉬프트)을 방지합니다. 이는 사용자 경험을 개선하는 중요한 요소입니다.

3. 이미지 로딩 최적화: <Image /> 컴포넌트는 lazy loading을 기본으로 지원하므로 스크롤에 따라 이미지 로드를 지연시켜 초기 로드시 필요한 네트워크 비용을 줄일 수 있습니다.

관련하여 더 자세한 내용이나 설명을 원하신다면, 아래 링크들을 참고해 보세요:

• Next.js 공식 문서의 이미지 최적화 섹션
  

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.