Next.js 기반의 프로젝트를 진행 중, 동료가 모든 이미지에 대해Image 컴포넌트를 사용하는 것을 peer riview 도중 파악했습니다. 동료분에게 리뷰로 짧게 설명하기보단 문서화를 통해서Next.js 환경에서는 꼭 Image 컴포넌트만 사용해야 할까?라는 것을말씀드리고 싶었고, 당시 전하고자 하는 내용을 블로그에도 포스팅해보았습니다.🤷🏻‍♂️ 둘의 사용 시점은 서로 다릅니다.HTML 태그를 사용하는 경우:매우 작은 크기의 아이콘이나 데코레이션용 이미지 (10x10 px 같은 경우)정적이고 변경되지 않는 작은 이미지성능 최적화가 크게 중요하지 않은 경우외부 이미지나 SVG 아이콘로딩 시간이나 레이아웃 시프트가 중요하지 않은 상황Next.js Image 컴포넌트를 사용하는 경우:다양한 디바이스..

회사에서 외주 프로젝트를 개발하다 문득 궁금해진 내용이 있었습니다. Next.js를 사용하면 Image 컴포넌트를 사용하는 것이 좋다고만 알았지왜 좋은지 전부 파악하지 못한 채로 사용하고 있었어요. 처음엔 Image 컴포넌트를 먼저 떠올리고 사용하는 이유만 포스팅하려고 했는데,디깅하다 보니 Next/image가 동작하는 원리와img 태그를 사용하면 좋을 때도 알고싶어졌습니다.그래서, 둘 다 포스팅하기로 했죠.Image 컴포넌트가 주는 안락함처음에는 local state에 따라 Image tag의 width와 height가동적으로 변하는 부분이 신경쓰였습니다. 이 때는 Image 컴포넌트가동적으로 변경되어지는 사이즈에 대해선 최적화를 못해줄 것이라 생각했지만이미지 최적화는 주로 런타임에 요청이 들어왔을 때..

warning 01 )/images/fortune_card_image_02.png" has either width or height modified,but not the other. If you use CSS to change the size of your image,also include the styles 'width: "auto"' or 'height: "auto"' to maintain the aspect ratio.warning 02 )/images/fortune_card_image_02.png" was detected as the Largest Contentful Paint (LCP).Please add the "priority" property if this image is above the..