Image 태그
Next.js 에서는 Image태그를 사용할 수 있습니다.
기존 <img>태그와 다르게 <Image> 태그를 사용하는 이유는 크게 3가지 입니다.
- lazy loading
- 이미지 크기 최적화
- layout shift 방지
lazy loading
말 그대로 이미지 로딩을 지연시키는 것입니다. 예를 들어 한 화면에서 이미지가 굉장히 많이 랜더링 되어야 하는 경우를 생각해봅시다.
처음 보이는 화면아래에 스크롤 해야 보일 수 있는 사진까지 똑같이 모두 렌더링을 하게 된다면 엄청난 시간이 소요될 것입니다.
이 lazy loading은 스크롤 밖에있는 사진은 우선 지연시키고 스크롤 내에서 client가 보고 있는 화면을 우선 랜더링 해서 이미지 로딩을 조금 더 매끄럽게 해줍니다.
<Image>태그를 사용한다면 lazy loading은 자동으로 적용됩니다.
lazy loadding을 해제 하려면 <Image>컴포넌트의 priority라는 prop을 true설정 해주시거나 loading prop에 eager값을 설정하시면 됩니다. priority 값을 권장합니다.
이미지 크기 최적화
최적화 된 이미지를 넣으려면 src="picture.png"로 작성하지 말고 이미지 파일을 import 해와서 src={picture}로 작성하시면 됩니다.
다만 외부 URL을 통해 삽입한 image는 width속성과 height속성을 꼭 지정해줘야 합니다.
또한 next.config.js 파일에서 도메인 등록과 경로등록을 해야합니다.
layout shift 방지
보통 이미지를 렌더링 하게되면 이미지가 로딩되기 전까지 이미지가 차지할 영역이 없어지고 화면 비율이 깨지는 경우가 발생합니다. 하지만 layout shift를 방지하는 기능이 있습니다. 해당 영역을 blur혹은 빈 영역으로 처리할 수 있습니다.
