Image Loader

info

이번 목차에서는 Image Loader에 대해서 정리하는 글을 적으려 한다.

나는 다양한 SNS앱들의 빠른 이미지 로딩을 보며 어떻게 구현했길래 이미지를 로딩하는 화면을 안정적으로 동작시키는지가 궁금해졌다. 사실 나는 안드로이드 개발을 하면서 Glide, Piccaso, Coil 등등 Third Party 라이브러리만 사용만 해봤지 어떤 프로세스를 가지고 있는지, 이들의 차이점들에 대해서는 깊게 공부하지 않았기에 이번 글에서 정리해볼 예정이다.

---

이미지 로딩 라이브러리는 무엇인가?

https://d2.naver.com/helloworld/429368

위의 블로그를 읽으면 이해가 된다. 그니까 이렇게 엄청나고 귀찮은 단계를 거쳐야하는 것을 처리해준다는 것이다.

위의 블로그에 작성된 엄청나고 귀찮은 프로세스는 아래와 같다.

https://d2.naver.com/helloworld/429368 (그림 2)

1. 이미지 전처리: 이미지를 로딩하기 전에 섬네일이나 진행 상황을 보여 주기 위한 단계
2. 이미지 로딩: 캐시나 네트워크에서 이미지를 가져오는 단계
3. 디코딩: BitmapFactory를 이용하여 이미지를 비트맵 형식으로 변환하고 크기, 회전, 품질 등을 변환하는 단계
4. 이미지 후처리: 보여 줄 이미지에 애니메이션이나 모서리를 둥글게 하는 등의 효과를 적용하는 단계.
5. 보여 주기: UI 스레드에서 이미지를 보여 주는 단계

https://d2.naver.com/helloworld/429368 (그림 3)

1. 메모리 캐시에서 비트맵을 가져온다.
2. 메모리 캐시에 비트맵이 있으면(cache hit), 이미지 후처리 단계로 진행한다.
3. 메모리 캐시에 비트맵이 없으면(cache miss), 디스크 캐시에서 이미지를 가져온다.
4. 디스크 캐시에 이미지가 있으면(cache hit), 비트맵으로 디코딩 후 비트맵을 메모리 캐시에 저장한다. 다음으로 이미지 후처리 단계를 진행한다.
5. 디스크 캐시에 이미지가 없으면(cache miss), 이미지를 외부(네트워크, 리소스 등)에서 다운로드 한다.
6. 이미지를 다운로드한 후, 디스크 캐시에 이미지를 저장한다.
7. 이미지를 비트맵으로 디코딩한 후 비트맵을 메모리 캐시에 저장한다. 그리고 이미지 후처리 단계로 진행한다.

정말 ㅎㄷㄷ 한 라이브러리가 아닐 수 없다...

그럼 우리는 대표적인 라이브러리 3가지 Piccaso, Glide, Coil을 분석하고 비교하며 상황에 맞는 적합한 라이브러리를 알아보도록 하자.

---

 

각각의 라이브러리 특징

1. 라이브러리간 성능 비교

해당 비교는 아래 블로그에 성능비교 기준을 보고 직접 확인해보았습니다.

(반복 스크롤 부분은 50장 정도의 이미지를 리스트뷰에 띄웠고 메모리를 정리하기 직전 최대 사용량을 구함)

Library 종류	이미지 용량(KB)	최초		디스크 캐시		메모리 캐시		스크롤 반복
		메모리(MB)	속도(ms)	메모리(MB)	속도(ms)	메모리(MB)	속도(ms)	최대 할당 메모리(MB)
Glide	301	4.6	2603	2.2	159	0.1	1	115
	563	2.9	526	1.4	45	0.1	1
	219	1.8	575	1.1	36	0	2
	456	0.9	715	1.3	54	0.1	1
	238	2.3	407	1.2	37	0.1	1
	556	1.9	507	1.3	48	0.1	1
Picasso	301	9.3	706	9.5	542	0.2	0	65
	563	9.4	1021	9.4	355	0.1	1
	219	9.5	496	9.5	333	0.1	0
	456	9.4	566	9.4	344	0.1	1
	238	9.6	1117	9.4	339	0.1	0
	556	9.5	970	9.4	361	0.1	0
Coil

출처 : https://gun0912.tistory.com/17

 

 

 

 

[안드로이드/Android]유용한 라이브러리 - Glide (이미지 로딩 라이브러리)

 

프로세스는?

3. 각각의 라이브러리마다의 장단점, 속도, 메모리 비교 등등

4. 나만의 라이브러리 만들어보기

참고

[Android] Image Loader Library 톺아보기 - Picasso, Glide, Coil

고전 글:  https://d2.naver.com/helloworld/429368

성능 비교 : https://gun0912.tistory.com/17

[안드로이드/Android]유용한 라이브러리 - Glide (이미지 로딩 라이브러리)

메모리 사용량 비교 : https://techblog.lotteon.com/glide-vs-coil-%EB%A9%94%EB%AA%A8%EB%A6%AC-%EC%82%AC%EC%9A%A9%EB%9F%89-%EB%B9%84%EA%B5%90-cb93cffb9fc0