next-image

❓질문

왜 기본 img 태그 대신 next/Image를 사용하셨나요?

💡 조사하기전 내가 알고 있던 내용

img 태그 대신 next/image 태그를 사용하는 이유로는 img태그를 사용하고 최적화에 대한 코드를 작성해야하는 반면 next/image 태그는 기본적으로 최적화된 기능을 제공함에 있어서 간편하다는 점을 예로 들 수 있을것 같습니다.

첫번째로는 next/image태그는 사용자의 브라우저에서 webp형식을 지원한다면 webp형식으로 제공을 합니다.
두번째로는 기본적으로 lazy loading을 제공합니다 브라우저의 뷰포트에 들어갈때 필요한 이미지만 로드할 수 있게 구현이 되어있습니다

🏫 정리한 내용

그렇다고 마냥 next/image 태그가 무조건적으로 좋은건 아닙니다.
개발을 할때 외부 도메인의 사진을 끌어다가 쓸 때에 추가적으로 next.config.js 파일에 도메인을 허용하겠다는 설정을 해줘야하고
next/image는 기본적으로 서버사이드에서 이미지 최적화를 수행하므로 Vercel같은 호스팅 서비스를 이용해줘야하는 문제가 있습니다.