[Next.js] 13 Image 태그 사용법 및 특징 -프론트엔드개발

Next/Image 컴포넌트의 기능

Next/Image 컴포넌트에서 제공하는 대표적인 기능은 3가지 입니다.

• lazy loading
• 이미지 사이즈 최적화
• placeholder 제공

1.lazy loading

lazy loading이란 이미지 로드하는 시점을 필요할 때까지 지연시키는 기술을 의미합니다. 예를 들면 유저한테 보이는 이미지들은 로드하고 보이지 않는 화면의 이미지는 지연시켜서 불필요한 대역폭 사용을 줄이고 필요한 이미지만 빠르게 로드할  수 있도록 하는 것입니다.

 

모든 브라우저에서 잘 동작하는 lazy loading을 구현하기 위해서는 Intersection Observer 혹은scroll 이벤트를 통해 스크린에 element가 보일 때를 캐치하여 이미지를 로드하도록 구현해야 합니다.(img 태그에 loading="lazy" 속성을 추가하여 간단한게 적용이 가능 합니다.)

 

Next/Image를 사용하게 되면 자동으로 lazy loading이 적용됩니다. 중요한 이미지는 lazy loading적용을 안 할수도 있습니다. Image컴포넌트의 priority라는 prop을 true로 설정하거나, loading prop에 "eager"값을 설정하면 됩니다. priority 값을 설정하는 것이 더 권장되는 방식입니다.

 

2.이미지 사이즈 최적화

Next/Image는 디바이스 크기 별로 srcSet을 미리 지정해두고, 사용자의 디바이스에 맞는 이미지를 다운로드 할 수 있게 지원합니다. (srcSet 뷰포트 너비에 따라 로드될 이미지 후보들을 설정하는 css 속성) layout이 "intrinsic"이나 "fixed"인 경우 1x와 2x, 즉 2개의 srcset만 생성하여 최초 이미지를 생성하고 로드하는데 상대적으로 빠릅니다. layout이 "responsive"나 "fill"인 경우 next.config.js의 imageSizes, deviceSizes에 의해 srcset이 생성 됩니다.

module.exports = {
    images: {
        // 기기의 너비 중단점 목록
        deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840]
    
        // 이미지 너비 목록, 
        // deviceSizes 배열과 연결되어 이미지 srcset 생성하는데 사용
        imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    },
}

- deviceSizes는 디바이스의 중단점 목록을 작성합니다. 사용자의 기기에 따라 올바른 이미지를 제공하기 위해서 사용됩니다.

- imagesSizes는 이미지의 너비 목록을 작성합니다. 이 너비들은 deviceSizes 배열과 연결되어 srcset을 생성하는데 사용됩니다.

 

또한 Next.js는 이미지를 webp와 같은 용량이 작은 포맷으로 이미지를 변환해서 제공합니다.

 

2.placeholder 제공

CLS(Cumulative Layout Shift)현상을 막기 위해서 Next/Image는 placeholder를 제공합니다. CLS는 웹 사이트 방문 시 이미지가 로드 되기 전 Image의 영역이 0이였다가 Image가 로드 된 후 레이아웃이 밀려나는 현상 입니다. 그래서 placeholder에서 이미지가 로드 되기 전에도 이미지 높이만큼 영역을 표시해서 이미지가 로드된 후에 레이아웃이 밀려나는 현상을 방지 합니다. placeholder은 빈 영역 또는 blur 이미지로도 적용이 가능하고 커스텀 하게 설정도 가능 합니다.

 

Next/Image를 사용하면 얻는 장점

• 성능 향상 : 디바이스에 맞는 적정 이미지를 로드하고, webp와 같은 작은 용량의 포맷을 사용
• 시각적인 안전성 : 이미지 로드 전 placeholder을 제공하여 CLS 방지
• 빠른 페이지 로딩 : viewport(유저에게 보이는 부분)에 들어 왔을 때만 이미지 로딩하고, 작은 사이즈의 blur 이미지를 빠르게 로딩하여 유저에게 더 빨리 페이지를 보여 줄 수 있음