Nextjs <Image />
이미지 관련 성능을 개선하기 위해 내부적으로 제공하는 컴포넌트
다음과 같은 기능들을 제공한다.
1. 이미지 최적화
- 사용하면 자동으로 이미지 최적화 기능이 적용
- 이미지의 크기를 최적화하고, WebP 형식으로 변환하며, 이미지 레이아웃에 따라 적절한 이미지 크기를 선택
2. 레이지 로딩
이미지가 화면에 보여질 때까지 이미지를 로드하지 않고, 사용자가 스크롤하거나 해당 이미지 영역으로 이동할 때 비로소 이미지를 로드
3. 이미지 미리 로드
priority 속성을 이용하여 렌더링 시 미리 로드할 이미지를 지정할 수도 있음
4. 플레이스홀더 이미지
- 이미지 로드 전에 플레이스홀더 이미지를 표시할 수 있음
placeholder속성을 사용하여 플레이스홀더 이미지를 지정할 수 있음