[안드로이드/Android]Picasso와 Glide 비교분석

이전에 포스트 내용으로 이미지로딩 라이브러리와 Glide에 관하여 소개해드렸었습니다.

이미지로딩 라이브러리 및 Glide소개 보기

이번에는 요즘 제일 많이 쓰이고 있고 레퍼런스가 많은 Picasso와 Glide에 대해서 비교해서 분석해보도록 하겠습니다.

또한 실제 제가 사용해보면서 느낀점도 추가해서 써보겠습니다.

Glide의 사용방식은 Picasso를 그대로 따라했다고 봐도 될정도로 사용방법이 비슷합니다.

(기존에 Picasso를 사용하던 개발자들이 Glide로 쉽게 넘어올수 있도록 비슷하게 만들었을것이라고 예상합니다)

기본 사용방법

기본적인 사용방법은 Picasso,Glide 완전히 똑같은 방식입니다.

Picasso

Picasso.with(context).load("http://www.selphone.co.kr/homepage/img/team/3.jpg").into(imageView); 

Glide

Glide.with(context).load("http://www.selphone.co.kr/homepage/img/team/3.jpg").into(imageView);

다만, with()함수에서 Picasso는 Context만을 지원하는 반면에 Glide는 context뿐만 아니라 다른 객체들도 사용할수 있습니다.

Fragment같은경우 getActivity()를 해줄필요 없이 this로 넣어주어도 Glide에서는 사용가능합니다.

            

기본 Bitmap포맷

1920x1080의 이미지를 768x432크기의 ImageView에서 각각 로드한경우 보여지는 이미지 입니다.

그림을 잘 보면 Glide의 이미지화질이 Picasso보다 좋지 않음을 알 수 있습니다.

왜 그럴까요?

Picasso는 Bitmap포맷을 ARGB_8888로 사용하고 Glide는 Bitmap포맷을 RGB_565를 사용합니다.

RGB_565는 ARGB_8888에 비해서 화질은 떨어지지만 메모리 용량을 50% 적게 사용합니다.

아래 그림은 Picasso와 Glide의 메모리 사용 그래프 비교입니다.

(8MB정도는 기본적으로 어플리케이션에서 사용하는 메모리 사용량이고 그 이상이 각각 이미지로딩 라이브러리에서 사용하는 메모리 사용량)

만약 메모리용량보다 화질이 더 중요하다고 생각한다면 Glide의 기본 Bitmap포맷을 ARGB_8888로 변경할수 있습니다.

GlideModule을 상속받는 클래스를 하나 지정해서 기본 포맷을 ARGB_8888로 설정하고 이 GlideModule을 매니페스트에 등록시켜주면 됩니다.

CustomGlideModule.java

public class SelphoneGlideModule implements GlideModule{

   @Override
   public void applyOptions(Context context, GlideBuilder builder) {
       builder.setDecodeFormat(DecodeFormat.PREFER_ARGB_8888);
      
   }

   @Override
    public void registerComponents(Context context, Glide glide) {
        glide.register(SelphoneImage.class, InputStream.class, new SelphoneGlideUrlLoader.Factory());
    }

}

AndroidManifest.xml

<!-- Glide모듈을 Custom하게 변경 -->
<meta-data
    android:name="kr.co.selphone.library.glide.SelphoneGlideModule"
    android:value="GlideModule" />

만약 Glide의 기본 Bitmap포맷을 ARGB8888로 변경했다면 Glide는 이전에 비해 2배정도 더 많이 메모리를 사용하는것을 볼 수 있습니다.

이제는 같은 Bitmap포맷을 사용하는데도 Picasso가 Glide보다 훨씬 많은 메모리 사용량을 보이고 있습니다.

그 이유는, Picasso는 1920x1080크기의 원본 이미지를 메모리로 가져와서 GPU에서 실시간으로 리사이징해서 768x432의 ImageView에 할당합니다.

하지만 Glide는 바로 768x432크기로 메모리에 가져와서 ImageView로 할당 시키기때문에 메모리 사용량이 적습니다.

만약, Picasso에서도 Glide와 같은 방식을 취하고싶다면 resize()함수를 이용하면 됩니다.

Picasso.with(context)
.load("http://www.selphone.co.kr/homepage/img/team/3.jpg")
.resize(768,432)
.into(imageView); 

ImageView의 크기를 매번 적어주기가 번거롭거나 알아오기 귀찮다면 fit()함수를 사용하면 같은 효과를 볼 수 있습니다.

Picasso.with(context)
.load("http://www.selphone.co.kr/homepage/img/team/3.jpg")
.fit()
.into(imageView); 

위 방법을 사용할경우 Picasso,Glide모두 같은 메모리 사용량을 보일것입니다.

이미지 캐시

이미지를 캐시하는 하는 방식에서도 기본적인 정책은 Glide와 Picasso는 다릅니다.

위의 예시처럼 1920x1080이미지를 768x432크기의 ImageView에 로드하는경우 Glide는 768x432크기의 이미지를 캐시하는 반면, Picasso는 1920x1080의 원본 이미지를 캐시하게 됩니다.

만약 1920x1080 이미지를 다시 384x216크기의 ImageView로 로드한다고 할 경우 Picasso는 이미 원본 이미지를 그대로 가지고 있지만 Glide는 또하나의 384x216 크기의 이미지파일을 캐시하게 됩니다.

Glide는 같은 이미지를 다른 크기의 ImageView에 로드한다는 이유로 2번의 이미지 다운로드와 리사이징 작업이 필요하게 됩니다.

만약 Glide에서 원본크기의 이미지를 캐시하도록 설정하고싶은경우 아래와 같이 캐시정책을 추가해주면 됩니다.

Glide.with(context)
        .load("http://www.selphone.co.kr/homepage/img/team/3.jpg")
        .diskCacheStrategy(DiskCacheStrategy.ALL)
        .into(imageView);

위의 정책을 적용하고난 뒤부터는 모든 Glide를 이용하여 로드할때 원본 이미지를 가져와서 캐시하게 됩니다.

Glide는 이미지를 최대한 빨리 로드해주는데에 최적화 되어있기때문에 이러한 정책을 기본적으로 적용하고 있습니다.

원본이미지를 가져오는 정책과 이를 로드하는 속도는 서로 반비례 관계에 있기때문에 이미지 로딩속도와 이미지 캐시에 관련해서는 원하시는 방향에 맞게 설정해주면 좋습니다.

추가함수 사용방법 비교

Resize

1 2 3 4 5

// Picasso .resize(300, 200);   // Glide .override(300, 200);

Center Crop

1 2 3 4 5

// Picasso .centerCrop();   // Glide .centerCrop();

Placeholder와 Error이미지

1 2 3 4 5 6 7

// Picasso .placeholder(R.drawable.placeholder) .error(R.drawable.imagenotfound)   // Glide .placeholder(R.drawable.placeholder) .error(R.drawable.imagenotfound)

Glide에서만 가능한 기능들

GIF

Glide에서는 ImageView에 GIF파일을 로드할 수 있습니다.

하지만 GIF는 많은 메모리 사용량을 보이기때문에 적절하게 GIF를 사용해야 합니다.

Thumbnail기능

<용량이 큰 이미지의 경우 thumbnail()함수를 이용하여 우선 10%만큼만 가져와서 흐릿하게나마 먼저 보여주고 그다음 전체 이미지를 로드해서 사용자에게 좀더 쾌적한 UI를 제공해줄 수 있습니다.

Custom Animation

Picasso에서는 단순히 fade in 기능의 애니메이션만을 지원하는 반면, Glide에서는 .animate(ViewPropertyAnimation.Animator)을 이용하여 여러 애니메이션을 보여줄수 있습니다.

Custom load

기본적으로 Image Resource, URL, 휴대폰 내장 이미지를 로드하는 기능 외에도 Custom Model을 만들어서 이를 로드하는 기능도 지원하고 있습니다.

라이브러리 크기

Picasso 2.5.1버전과 Glide 3.5.2버전을 기준으로 Glide가 Picasso에 비해서 라이브러리 파일의 크기와 함수가 압도적으로 많은것을 확인할 수 있습니다.

로딩 속도 비교

메모리, 속도 값은 총 6장의 이미지를 리스트뷰에 띄우는 방식으로 3회 진행하여 평균값으로 계산했습니다.

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

(출처: http://dev2.prompt.co.kr/31)

 

결론

처음부터 끝까지 이 글을 읽어보셨다면 느끼셨겠지만 대체적으로 Picasso를 포함한 다른 라이브러리보다 뛰어나다고 생각합니다.

하지만 일부 기능에서는 Picasso가 Glide보다 유용한 경우도 있습니다.

제가 서비스하고있는 어플리케이션에서 채팅기능이 있는데 메세지가 새로 오거나 보내질때 채팅목록을 다시그립니다.

채팅목록을 다시 그리는 과정에서 상대방의 프로필사진이나 보낸/받은 사진들이 깜박이면서 다시 로드되는 현상을 볼수 있었습니다.

이를 Picasso로 변경하여 적용하면 깜박임 없이 잘 사용할 수 있었습니다.

또한, ImageView에 setTag()를 해서 사용하시는경우 Glide를 사용함에 있어서 주의하셔야 합니다.

Glide내부적으로 setTag를 사용하고 있어서 만약 이미 setTag()가 되어있는 ImageView에 이미지를 로드하려고 하는경우 에러가 발생합니다.

저는 리스너를 달아둬서 ImageView가 모두 로드되고 난 이후에 setTag()하는 방식으로 우회해서 해결했습니다.

기본적으로 Glide라이브러리를 사용하시되 특수한 상황에서는 Picasso를 사용하셔서 최적화된 이미지 로딩환경을 구축하시는걸 추천드립니다.

다음번에는 Glide Transformer를 이용해서 이미지를 Square,Circle크기로 로드하거나 Blur,Paint등의 Custom하게 이미지를 로드할수있는 방법을 소개해드리겠습니다.

이 글의 원본 이미지나 설명들은 아래 블로그를 참조하여 작성되었습니다.

http://inthecheesefactory.com/blog/get-to-know-glide-recommended-by-google/en