이미지 리사이징

문제 상황

이미지 업로드 기능에 용량 제한이 없으며 이를 그대로 s3 에 업로드 한다.

예상되는 문제

용량이 큰 이미지를 업로드 하면 응답 속도가 느려(클라이언트에서 직접 s3 에 업로드 하도록 구현되어 있다) 사용자 경험이 나빠지고 서버 관리 비용이 늘어난다.

또한 해당 이미지를 최초 조회할 경우에도 응답 속도가 느려 사용자 경험이 나빠질 것이다.

해결

클라이언트에서 해당 이미지를 리사이징, 포맷 변경, 품질 설정을 한 뒤 s3 에 업로드 하도록 구현했다. 따라서 이전과 같이 사용자는 다양한 포맷과 용량의 이미지를 제한 없이 업로드 요청 할 수 있다.

해결 과정

tag 에서 제공하는 가장 큰 이미지는 170 x 170 픽셀 이다. 이와 비슷한 이미지 크기를 사용하는 유명 서비스의 이미지 용량은 아래와 같았다.

유튜브 채널 프로필 사진

크기: 160 x 160 픽셀

용량: 7kb ~ 18kb

인스타 프로필 사진

크기: 150 x 150 픽셀

용량: 5kb

그래서 이미지 리사이징 뿐만 아니라 가장 압축률이 뛰어난 WebP 로 포맷을 변경하고 사용자가 불편을 느끼지 않는 선에서 품질을 낮추기로 했다.

1. 이미지 크기 줄이기
2. WebP 로 포맷 변경하기
3. 품질 낮추기(손실 압축)

이미지 리사이징에 HTML5 Canvas API 를 사용했다. 사용자 이미지의 가로, 세로 길이 중 더 긴 길이를 170px 에 맞춰 리사이징 했다.

이를 Blob 으로 변환했고 이때 포맷 설정과 품질 조절을 했다.