[React] File Resizer 적용기

프로젝트가 거의 끝나갈 때쯤 최적화를 진행하기 위해서 Light House를 사용해서 어떤 부분에 최적화를 진행해야 할지 알아보고 있었는데,

그중 퍼포먼스 부분에 Image Size가 성능을 많이 느리게 하는 주범이라는 것을 찾아 파일을 리사이징적용을 하기로 결정되었다.

 

먼저 리사이징을 하기 위해서 react-image-file-resizer라는 라이브러리를 사용해 JPG와 PNG 같은 확장자를 WEBP와 같은 압축률이 높은 확장자로 변경하고 현재 진행하는 프로젝트 썸네일에 맞게 파일의 사이즈를 조절해 주었다.

 

사용하는 방법은 간단하다.

const resizeFile = (file: File) =>
  new Promise((resolve) => {
    Resizer.imageFileResizer(
      file,
      1900,
      1200,
      'WEBP',
      60,
      0,
      (uri) => {
        resolve(uri);
      },
      'blob',
    );
  });
  
let resizedImage = null

if (thumbnail) {
	resizedImage = await resizeFile(thumbnail);
}

const docId = await firebaseCreateProjectRequest(
    writeFormValue,
    markdownText,
    resizedImage as File,
    uid,
);

 

먼저 라이브러리 사용법을 확인하고 resizeFile이라는 함수안에함수 안에 option을 변경하고 싶은 사이즈와 확장자 OutPutType을 설정하고 함수 안에 파라미터로 변경하고 싶은 이미지를 넣어주면 변환이 되어 return 해준다.

 

변환된 파일을 변수에 담아 보내주면 끝이다. 또한 프로젝트에서 사용하는 모든 GIF나 모든 이미지 파일을 WEBM과 WEBP로 전부 변환해서 저장해 적용을 해주었다.

 

이렇게 변환해서 프로젝트에 적용을 하니 퍼포먼스 점수부분에서 많은 성능향상을 이뤘다

 

PNG/JPG to WEBM

• 230302 이미지 최적화 : 총 62% 사이즈 감소name before after 감소율

  404ErrorImg	71KB	36KB	49%
  404ErrorMessage	12KB	4KB	67%
  login_welcome	18KB	15KB	17%
  logo_main1	183KB	91KB	50%
  mobileFirstBanner	64KB	28KB	56%
  mobilesecondBanner	186KB	134KB	28%
  scroll_to_top	18KB	8KB	56%
  thumbnail_big	320KB	16KB	95%
  thumbnail_mobile	7KB	1KB	86%
  thumbnail_small	7KB	1KB	86%

 

 

이렇게 파일을 리사이징 해주는 것만으로도 퍼포먼스 점수가 월등히 높아졌다.

 

이런 식으로 내 눈으로 직접 지표를 확인하면서 최적화를 시켜본 적은 처음이라 그런지 뭔가 체감상으로도 빨라지는 느낌마저 들어서 굉장히 뿌듯한 느낌을 느꼈다.

 

뭔가 내 프로젝트가 이미지를 많이 사용하는데 좀 느린 거 같다거나 싶으면 다들 꼭 파일 리사이징처리를 한번 해보면 좋을 거 같다는 생각이 드는 적용기였다.