📔 개발 일지

이미지 다루기(캐싱, 압축, 포맷, 리사이징)

목적

• 캡쳐한 이미지를 편집 화면으로 Bitmap을 넘기기에는 파일 크기가 너무 큼. => 캐싱을 통해서 Uri를 받아서 사용
• 사진을 업로드하고 다운로드할 때 시간을 단축하기 위해서 파일의 크기를 줄일 필요가 있음
• 이미지를 로드할 때 메모리 사용량을 줄여서 성능 향상 및 불필요한 많은 메모리 사용을 없애서 안정적으로 작동하게 하기 위함.

이미지 캐싱

반려된 기술

• 서버에 업로드 후 받아온 URL 사용 => 편집 화면으로 이미지를 보내는 목적이므로 쓸데없이 많은 시간이 소모됨.
• 메모리 캐싱 => LRU Cache를 사용하는데 우리는 고해상도 이미지를 다루므로 OutOfMemory가 발생할 우려가 있음.
• filesDir => 장기 저장에 용이한데, 우리는 짧은 시간 저장하고 삭제하므로 부합하지 않음.

결정된 기술 : 캐시 디렉토리

cacheDir을 사용하여 단기적으로 저장할 수 있고, 저장하고 가져오는 속도가 빠름. 저장 공간이 부족할 때 자동으로 삭제되므로 저장 용량의 문제도 해결 가능함.

이미지 압축 및 포맷

압축률

압축을 많이 하면? => 파일의 크기가 작음. 이미지 전송/로드 속도가 빨라짐. 이미지 품질이 낮아짐. 압축을 작게 하면? => 파일의 크기가 큼. 이미지 전송/로드 속도가 느려짐. 이미지 품질이 높아짐.

우리의 앱은 고해상도의 사진을 보여줘야 하므로 가능한 압축을 적게 하는 것이 좋다.

압축률 Test

Bitmap.compress로 quality를 10 ~ 100까지 테스트

10 => 확연하게 화질이 안좋음.

50 => 화질이 눈에 보일 정도로 안좋음.

60 ~ 70 => 살짝 뿌옇게 보일 정도.

80 ~ 100 => 원본과 거의 차이가 존재하지 않음.

결과적으로 원본과 거의 차이가 나지 않지만 파일의 크기를 가능한 줄일 수 있는 80%로 설정.

포맷

• JPEG (Joint Photograph Expert Group) => 손실 압축 방식. 약간의 손실을 고려하되 속도가 가장 빠름. 투명도 지원 X
• PNG (Portable Network Group) => 무손실 압축 방식. 고해상도의 사진을 지원. 투명도 지원 O
• WebP (Web Picture) => 무손실, 손실 압축 모두 지원. JPEG 대비 34% 크기를 줄인 상태에서 동등한 이미지 퀄리티를 보장

포맷 테스트

WebP가 확실히 파일 크기가 작지만 압축 속도가 JPEG 대비 많은 시간이 걸렸다.(3초) WebP는 VP8 비디오 압축 기술을 기반으로 압축 알고리즘이 구성되어 있어서 더 많은 계산이 필요하기 때문이다.

이미지를 처리하는 데 걸리는 모든 시간이 사용자 경험성에 연관이 되므로 파일의 크기, 압축 속도를 모두 고려하여 Jpeg를 사용하기로 결정하였다.

리사이징

• 리사이징을 통해서 파일의 해상도와 크기가 줄어들면서, 전송할 데이터 양이 줄어서 업로드, 다운로드 속도가 빨라짐.
• 파일 크기가 줄어서 서버 비용이 감소함.

Test

460 ~ 1440까지 해상도 테스트를 진행. 460 => 눈에 띄는 화질 저하 발생 720 => 화질 저하가 보이지 않음 1080 ~ 1440 => 이미지의 깊이감이 깊어짐.

결과적으로 해상도를 720p로 리사이징하여 적절한 해상도와 파일 크기를 줄이는 것으로 결정.