이미지 압축의 필요성과 라이브러리 선택

이미지 압축의 필요성

리뷰 작성 컴포넌트를 제작하며 최적화를 어떻게 할지 고민했다.

 

우선, 이미지 파일 개수 제한과 파일 크기 제한에 대한 기준을 설정했다. 리뷰 페이지가 인스타 피드 형식이기 때문에 이미지 파일 개수는 최대 5개로 제한하고, 파일 크기는 백엔드 개발자와 협의하여 임시로 10MB까지 업로드할 수 있도록 설정했다.

 

 

또한, 클라이언트 측에서 파일 크기를 줄이고 WebP 형식으로 변환하면 서버 저장 공간을 절약하고 전송 속도를 개선할 수 있다고 판단했다. 이를 통해 이미지를 불러올 때 더 가볍게 처리할 수 있어 사용자 경험을 크게 향상시킬 것으로 기대된다.

 

 

이미지 압축 라이브러리

어떤 라이브러리를 사용할지 고민한 끝에 browser-image-compression을 선택했다.

 

이 라이브러리는 다운로드 수가 많고, 문서가 잘 정리되어 있으며, 많은 사용 후기가 있어 신뢰할 수 있는 라이브러리라고 판단했다.

하지만 비교적 번들 크기가 크다고 생각했는데, 이 문제를 어떻게 해결하면 좋을지 고민했다.

 

이는 비동기적으로 imageCompression을 로드하여 해결 할 수 있었다. 사용자가 이미지를 업로드하려고 시도할 때 라이브러리가 로드되기 때문에 초기 로딩 속도가 개선될 것이라 생각한다.

export const compressImage = async (file: File): Promise<File | null> => {
  try {
    const { default: imageCompression } = await import(
      'browser-image-compression'
    );
    const options = {
      maxSizeMB: 2, // 최대 크기 (MB)
      maxWidthOrHeight: 800, // 최대 너비나 높이 (픽셀)
      useWebWorker: true, // 웹 워커 사용 여부
      fileType: 'image/webp',
    };
    const convertedFile = await imageCompression(file, options);
    return convertedFile;
  } catch (error) {
    console.error('파일 변환 중 오류:', error);
    return null;
  }
};

 

라이브러리 적용 결과

• 압축 전 파일 크기: 144003, 이미지 타입: “image/png”
• 압축 후 파일 크기: 33872, 이미지 타입: "image/webp"

 

https://www.npmjs.com/package/browser-image-compression

browser-image-compression