[Next.js] 이미지 최적화

프론트엔드에서 최적화 1순위는이미지 최적화 입니다. 웹 개발에 있어서 이미지 최적화는 사용자 경험과 성능 향상에 필수적입니다. 특히 모던 웹에서는 이미지 로딩 속도가 페이지 로딩 시간에 큰 영향을 미치므로, 이를 효율적으로 관리하는 것이 중요합니다.  다행히도 Next.js 에서는 자체적으로 Image 라는 컴포넌트를 제공함으로써코드 몇줄만으로 이미지를 최적화 시켜줄 수 있습니다. 다음 그림과 같이 일반적인 Tag 와 Tag 를 비교해 봐도 확연하게 차이가 나는 것을 보실 수 있습니다. 기본적인 형식Image 컴포넌트는 아래와 같은 properties 가 필수적으로 들어가야 합니다.import Image from 'next/image' export default function Page() { re..