[React 이미지 압축전송] 필요 이상으로 큰 이미지를 서버로 넘기지 말자. Browser Image Compression 을 이용한 이미지 압축 후 전송

이미지 압축을 도입한 이유

Brower Image Compression 을 사용한 계기는 서버로 필요 이상으로 큰 이미지를 전송함으로 인한 트래픽을 줄여 서버의 부하와 비용을 줄이고, 브라우저의 초기 로딩속도를 높히기 위함이다.

 

파일의 크기에 신경 쓸 필요없이 인쇄용으로 사용되는 이미지의 경우 확대, 축소를 고려해 높은 해상도의 이미지를 필요로 하지만, 웹사이트의 경우 확대, 축소를 하는 경우가 드물고, 지나치게 큰 이미지는 이미지 로딩시간의 증가와 트래픽 증가를 야기한다.

 

이미지 압축을 브라우저에서 진행한 이유?

업로드가능한 이미지의 용량을 제한해버리는 방법도 있지만, 일반적으로 이미지 크기를 생각하면서 파일을 업로드 하지는 않으므로, 생각지도 못한 경고/오류 를 만나게 된다면 UX 관점에서 좋지 못하다고 판단했다.

 

일반적으로 클라이언트 (브라우저) 는 서버에 비해 부하가 적다. 서버보다 할 일이 적은 클라이언트 단에서 이미지의 압축을 진행하여 서버에 넘겨주는 것이 현재 프로젝트 상황에서 적합하다고 생각하여 브라우저에서 압축을 진행하는 방향으로 결정했다.

브라우저를 이용한 이미지 압축은 본 프로젝트 수준에서는 충분한 성능을 내주었다.

사용시 고려해야 할 점

하지만 이미지 압축을 더 빠르게 행할 수 있는 이미지 처리 전용 서버를 따로 두어 서버로 전송하는 방식이 더 좋은방법이고, 보편적인 방법이다. 이미지 압축은 비동기이기 때문에 파일의 압축이 진행되는 동안 서버로 전송을 하지 못하게 되고 이 시간이 너무 길어진다면 UX 에 좋지않은 영향을 준다. 따라서 백그라운드에서 처리를 한다던가 추가적인 조치가 필요하다.

 

사용법

yarn add browser-image-compression

npm install browser-image-compression

import imageCompression from "browser-image-compression";

export const compressImage = async (file:File,maxWidth?:number) => {
  const imageFile = file;
  const options = {
    maxSizeMB: 2,
    maxWidthOrHeight: maxWidth?maxWidth:980,
    useWebWorker: true,
    fileType:'image/png'
  };
  try {
    const compressedFile = await imageCompression(imageFile, options);
    return compressedFile
  } catch (error) {
    console.log(error);
  }
};

기본적인 사용법은 위와 같다. imageCompression 함수를 browser-image-compression으로부터 import 하고 사용하면 되는데, 비동기 함수이므로 await 를 잊지 않도록한다.

 

imageCompression() 함수는 두 가지 인자를 받는데,

1.첫번째 인자로 압축을 진행할 파일,

2. 두번째 인자로 압축에 관한 설정을 담은 객체

 

를 받는다.

간단한 프로젝트라면 건들여줄 옵션값은 maxSizeMB (최고 사이즈를 mb 단위로 적는다) 와, maxWidthOrHeight (가로세로 구분없이 가장 긴 면의 최대길이를 px로 지정) 정도면 충분하다.

본 프로젝트에서는 위와 같이 compression 함수를 커스텀하여, 이미지를 업로드 할 곳에서 적절한 사이즈로 압축을 해 사용했다.