웹 성능 최적화 여정(1) - 이미지 용량 압축 라이브러리

🐝 웹 성능 최적화 시리즈 🐝
웹 성능 최적화 여정(0) - 이미지 최적화를 통한 성능 개선 방법

 

프로젝트에서 로딩이 오래 걸리는 부분들은 아래와 같았습니다.

 

1️⃣ 무거운 애니메이션과 3d 이미지들이 로딩되는 첫 화면

2️⃣ 이미지를 서버에 보내는 썸네일 업로드 화면과 선물 등록 화면

3️⃣ 이미지를 서버에서 가져와 보여주는 카드 컴포넌트들

 

용량 이슈를 해결하기 위해 나름대로 여러 방법을 찾아보고 고민한 결과, 아래와 같이 해결하기로 결정했습니다.

 

1번의 경우, webP로 변환 가능한 것들은 변환해서 사용하기

2번과 3번의 경우, 사진 업로드 시 프론트 단에서 이미지 용량을 압축하는 라이브러리를 사용해 서버에 보내기 + 백에서 CDN을 적용하면 사진 사이즈와 포맷 형식(webP로) 지정해서 서버 통신하기

이외에 lazy loading 등 다양한 코드 리팩토링,,

 

이번 글에서는 그중에서도 이미지 용량 압축 라이브러리에 대해 간단히 적어볼까 합니다.

이전에 다른 프로젝트에서 이미지 용량 이슈로 골치 아팠던 경험이 있어, 이번에는 presignedUrl을 처음부터 도입해 서버의 부하를 예방하고자 하였습니다. 하지만 S3에 제대로 올라갔음에도 이미지가 로딩되는데 오래 걸리거나 제대로 받아와지지 않는 경우가 있어 확인해보니 이미지 파일의 용량 때문일 가능성이 높아 보였습니다. 기다리면 제대로 뜨는 경우들이 있었는데, 사용자는 그 사이에 이탈할 것이 분명하다고 느껴질 정도로 기다림이 꽤 길어 이미지를 압축해서 전송하기로 결정했습니다.

 

가장 널리 쓰이는 이미지 용량을 줄여주는 라이브러리는 browser-image-compression, react-image-file-resizer 두 가지였고 레퍼런스들도 거의 이 둘과 관련되어 있어 둘 중에 하나를 선택하게 되었습니다.

 

위의 npm trends 지표를 확인했을 때, browser-image-compression이 버전 업데이트도 비교적 최근까지 이루어졌고, 사용량도 훨씬 높은 것 같아 끌렸지만, 안드로이드에서 사진이 뒤집히는 치명적인 버그가 있는 것 같아 선택을 바꾸게 되었습니다.

 

react-image-file-resizer도 2년 전 업데이트라 나쁘지 않았고, 문서화나 레퍼런스도 잘 되어 있었습니다.

이미지를 압축할 때는 사용자가 큰 불편함을 느끼지 않는 한에서 가장 낮은 품질인 75%로 설정하였고, 이미지 형식은 webP, 사이즈는 레티나 디스플레이를 고려하여 보여줄 최대 크기의 2배로 설정했습니다.