사용성 향상 및 성능 최적화를 빠르게 구현할 수 있기 때문
next/image는 placeholder 속성으로 로딩 중일때의 사용자 경험 개선 가능
기본 img는 이미지 로등하는 동안 빈공간이지만, next/image는 placeholder 옵션을 활용해 로딩 전에도 이미지를 잠시 대체할 수 있는 요소를 보여줄 수 있음
이를 통해 콘텐츠의 시각적 일관성을 유지하여 사용자가 페이지 더 쾌적하게 탐색할 수 있게 해줌
next/image는 브라우저가 환경에 맞는 최적화된 포맷과 크기의 이미지를 제공
ex - 사용자의 브라우저가 WebP 포맷 지원시 JPG나 PNG 대신 WebP이미지 자동 제공 또한 요청된 이미지 크기에 따라 적절한 크기 이미지 서빙하여 불필요한 데이터 전송 줄임
이러한 기능 덕분에 개발자가 별도로 이미지 최적화 수행하지 않아도 성능 향상
마지막으로 next/image는 기본적 lazy loading 지원
뷰포트에 들어올 때 필요한 이미지만 로드하도록 구현되어 있음
이를 통해 별도 설정 없이도 초기 페이지 로딩 속도 개선, 네트워크 리소스 절약할 수 있음
단점은??
설정이 상대적으로 복잡함
ex - 도메인 이미지 경우 next.config.js에서 해당 도메인을 허용 목록에 추가해야함
또한 기본적으로 next/image는 서버 사이드에서 이미지최적화 수행해서
자체 서버 없는 경우 Vercel같은 호스팅 서비스 활용해야 하는 제약이 있음
사용 안한다면??
가능은 함
ex - 이미지 크기 미리 조절 후 정적인 파일로 제공, loading='lazy'속성을 활용하여 지연 로딩을 설정할 수도 있음
또 클라우드 기반 이미지 최적화 서비스 활용 시 next/image없이도 최적화 진행 가능
but
next/image만 사용하면 이러한 기능들 없이도 기본 제공받을 수 있어 시간 제약 극복하기 위해 사용함
