이미지 최적화(Browser image Compression)

 중고 의류 거래 플랫폼 프로젝트를 진행할 때 상품 사진과 프로필 사진을 업로드하는 기능이 있었는데, Spring boot의 이미지 저장 용량의 기본값이 1MB여서 이보다 큰 이미지를 넣었을 때 500 에러가 발생하였다. 백엔드분들에게 요청을 해서 변경할 수 있기도 했지만, 프로필 이미지의 경우 매우 작은 사이즈였고, 상품 이미지의 용량도 너무 클 필요가 없다는 판단이 들어 최적화를 진행하게 되었다.

 

 Browser image Compression을 사용한 이유는 이후에 구현해야 할 기능들이 매우 많았고, 시간은 제한적이었기 때문에 학습시간이 비교적 적고 빠르게 적용할 수 있는 방법을 사용해야 했기 때문이다.

 

 Browser image Compression은 option 값과 이미지의 타입만 정해주면 됐기 때문에 사용방법이 간단했고, 이러한 이유에 의해 사용하게 되었다.

 

프로젝트에서 구현

• 설치 방법과 import

yarn add browser-image-compression

import imageCompression from "browser-image-compression";

 

• 코드

const saveImgFile = async (event: React.ChangeEvent<HTMLInputElement>) => {
    if (event.currentTarget.files) {
      const file = event.currentTarget.files[0];
      // 이미지의 사이즈 옵션 설정해주기
      const options = {
        maxSizeMB: 0.2,
        maxWidthOrHeight: 840,
        useWebWorker: true,
      };
      try {
        // 이미지와 적용된 옵션을 imageCompression을 통해 압축 이후 새로운 파일로 변환
        const compressedFile = await imageCompression(file, options);
        // 이미지를 웹 페이지에서 보여주기 위해서는 url 형태여야 하기 때문에 변환
        const result = await imageCompression.getDataUrlFromFile(compressedFile);
        const newFile = new File([compressedFile], 'image.jpeg', { type: 'image/jpeg' });

        const newFormData = new FormData();
        newFormData.append('image', newFile);

        setImage(result);
        setFormData(newFormData);
        setConfirm(true);
      } catch (error) {
        console.log(error);
      }
    }
  };

 

 위의 코드처럼 option 값을 지정해주고, imageCompression()에 최적화 하고자 하는 파일과 옵션값을 넣어주면 이미지 최적화를 진행할 수 있다. 사용방법이 어렵지 않기 때문에 시간이 부족하고 이미지 최적화 경험이 없을 때 사용하면 좋을 것 같다.