[React] 파이어베이스 프로필 이미지 용량 최적화

Today, What I learned?

라이트하우스의 지표를 보고 프로필 이미지의 확장자를 webp로 변경하는 것이 좋겠다고 판단되어서..

다른 이미지 확장자를 바꾸는 과정에서 프로필 이미지 확장자도 화면공유를 통해 팀원 분이 변경해 주셨지만,

그 과정에서 내가 또 실수한(!) 코드가 있어서 정리해보려 한다 ^^ㅎ

 

우선 현재 라이트 하우스는 이렇다.

 

 

 

이미지 리사이즈

우리 프로젝트에서는 이미지 사이즈 최적화를 위해 react-image-file-resizer 라는 라이브러리를 이용하고 있다.
이 라이브러리는 확장자를 jpg, png 뿐만 아니라 webp도 함께 제공한다.

기본적으로 적용되어 있던 리사이즈 포맷은 아래와 같다.

const resizeFile = (file: File) =>
  new Promise((resolve) => {
    Resizer.imageFileResizer(
      file,
      230,
      230,
      'JPEG',
      70,
      0,
      (uri) => {
        resolve(uri);
      },
      'base64',
    );
  });

 

 

파일 객체를 올리면 파일을 리사이즈해서 파이어베이스 스토리지에 올리고, 내려받은 이미지 url을 리턴 받아 state에 저장해 주는 방식이다.

...
  const file = e.target.files[0];
  const reader = new FileReader();
  reader.readAsDataURL(file as Blob);

  const resizedImage = await resizeFile(file);

  // 이미지를 스토리지에 업로드 후 반환받은 이미지 url을 상태(profileImg)로 저장
  uploadProfileImg(resizedImage, uid).then((res) =>
    setProfileImg(resizedImage as string), 
  );

 

 

문제는 webp 확장자로 바꾼 이후인데, 파이어베이스에는 base64 방식으로 webp 이미지를 올릴 수 없어 blob으로 변경했는데 프로필 수정 뒤 바로 변경된 이미지가 반영이 되지 않았다.

const resizeFile = (file: File) =>
  new Promise((resolve) => {
    Resizer.imageFileResizer(
      file,
      230,
      230,
      'WEBP',
      100,
      0,
      (uri) => {
        resolve(uri);
      },
      'blob',
    );
  });

 

 

이유는.. 콘솔을 찍어보니 아래처럼 blob 객체를 이미지태그 src에 넣고 있어서였는데,

 

 

이 부분에서 setState에 blob 객체를 string 타입으로 넣어주고 있었기 때문이다..

  // 이미지를 스토리지에 업로드 후 반환받은 이미지 url을 상태(profileImg)로 저장
  uploadProfileImg(resizedImage, uid).then((res) =>
    setProfileImg(resizedImage as string), 
  );

 

그래서 굳이 string으로 타입을 지정해주지 않고 promise의 반환값을 setState에 넣어서 제대로 적용 완료!..

// 이미지를 스토리지에 업로드 후 반환받은 이미지 url을 상태(profileImg)로 저장
uploadProfileImg(resizedImage, uid).then((res) => setProfileImg(res));

 

 

이렇게 이미지 수정이 바로 된다.

 

 

 

최적화가 얼마나 되었는지? 이미지 용량 비교

동일한 이미지를 비교해 보니 아주 큰 차이가 있었다.

(좌) jpeg (우) webp

원래 2.54MB였던 파일이 52.58KB까지 줄어들었다. 거의 98%에 가까운 감소율?!...

 

 

 

이렇게 이미지 최적화를 완료했다. 😊