FE/Next.js
Next.js Image 컴포넌트
Next/Image 컴포넌트의 기능LazyLoading => 기본적인 image태그를 통한 lazy loading을 구현하려면 Intersection Observer를 통해서 element가 보일 때 이미지를 로드하도록 직접 구현해야한다(현재 크롬에서는 loading="lazy"옵션으로 쉽게 구현할 수는 있다. 이미지 사이즈 최적화(webp)이미지를 그대로 내려받는 것이 아니라, webp 형식으로 가져오기 때문에 원본에 비해 훨씬 더 작은 용량으로 이미지를 사용할 수 있다.quality의 기본 값은 75이다. placeholder 제공placeholder를 제공하여 이미지가 불러오는 동안에 영역의 높이가 변경되어 레이아웃이 흔들리는(CLS) 문제를 방지해준다. 어떻게 이런 기능을 제공할까?내부 이미지Ne..
