이미지 지연 로딩 라이브러리 어떤걸 써야할까?

 

웹 사이트 개발 시 사용자가 보여지는 부분만 로딩시키기 위해 지연로딩이란 기술을 사용합니다. react프로젝트에서 이 지연로딩을 해주는 라이브러리들이 있는데 오늘 어떤것을 사용해야할지 고민이 들어서 정리해봅니다.

 

react-lazy-load-image-component와 next/image은 모두 웹에서 이미지 로딩을 최적화하려는 목적으로 사용되는 라이브러리이지만, 기능과 사용법에서 차이가 있습니다.

 

react-lazy-load-image-component

이 라이브러리는 이미지 로딩을 지연시키고 (lazy-loading), 뷰포트 내에 들어갈 때 이미지를 로드하는 데 초점을 맞추고 있습니다. 이를 통해 초기 페이지 로드 시간을 줄일 수 있습니다. 또한 placeholder 이미지나 spinner를 사용하여 이미지가 로드되기 전에 표시할 컨텐츠를 지정할 수 있습니다.

다음은 이 라이브러리를 사용하는 기본적인 방법입니다:

import { LazyLoadImage } from 'react-lazy-load-image-component';
import 'react-lazy-load-image-component/src/effects/blur.css';

const MyImage = ({ image }) => (
  <LazyLoadImage
    alt={image.alt}
    height={image.height}
    src={image.src}
    width={image.width}
    effect="blur"
  />
);

 

next/image

next/image는 Next.js의 일부로 제공되는 이미지 컴포넌트입니다. 이 라이브러리는 이미지 최적화, 자동 리사이징, 우선 순위 로딩, 그리고 느리게 로드되는 이미지에 대한 지연 로딩 등 여러 기능을 제공합니다.

또한, next/image는 이미지를 로드할 때 CDN과 같은 외부 소스를 사용하거나, 이미지 최적화를 위한 서버사이드 로직을 이용할 수 있습니다.

다음은 이 라이브러리를 사용하는 기본적인 방법입니다:

jsxCopy code
import Image from 'next/image'

const MyImage = () => (
  <Image
    src="/path/to/image.jpg" // Relative to the root of your project
    alt="Picture of the author"
    width={500} // Desired size with correct aspect ratio
    height={300} // Desired size with correct aspect ratio
  />
)

 

둘 중 어느 것을 사용할지 결정하는 데 있어서는, 프로젝트의 요구 사항과 사용하려는 프레임워크에 따라 달라집니다. 만약 이미 Next.js를 사용하고 있다면, next/image를 사용하는 것이 더 간편할 수 있습니다. 하지만 Next.js를 사용하지 않거나 더 유연한 옵션을 원한다면 react-lazy-load-image-component를 고려해볼 수 있습니다.