Next.js에서 이미지를 사용할 때 next/image를 사용하는게 좋을까요?

[hyjoong]

Next.js 프로젝트에서 이미지를 사용할 때 next/image모듈을 사용할 수 있는 것 같네요

Next.js 프로젝트를 진행할 때 기존에 사용하던 <img> 태그를 사용하는 것보다 이점이 있을까요??

공식 문서: https://nextjs.org/docs/pages/api-reference/components/image

[hyjoong]

공식문서 보니 next/image의 속성 값인 quality의 기본값이 75 라고 나와있네요.
품질이 높으면 높을수록 좋은 거 아닐까요 ?? 그러면 항상 quality값을 100으로 설정해서 사용하면 좋지 않을까요??

import Image from 'next/image'

<Image
  src="~"
  quality={100}
/>

Next.js의 image는 quality값을 왜 100이 아닌 75로 설정했을까요 ??

공식문서: https://nextjs.org/docs/pages/api-reference/components/image#quality

[hyjoong]

공식 문서에서 next/image를 사용할 때 sharp 라이브러리 설치를 하면 최적화가 된다고 나와있는 것 같은데 next/image를 사용할 때 sharp 라이브러리도 추가로 설치해서 사용하는 게 좋을까요 ??

공식 문서: https://nextjs.org/docs/pages/building-your-application/deploying#configuring-caching

[lledellebell]

관련 아티클:
올리브영 테크 블로그, NEXT.JS의 이미지 최적화는 어떻게 동작하는가? - NEXT.JS는 왜 Sharp를 추천하는가
출처 도움: @hyjoong

[lledellebell]

추가:
HTMLImageElement의 fetchPriority 속성