[Android] 이미지 로딩 라이브러리 (Glide vs Picasso / Coil)

안드로이드에서 사용할 수 있는 많은 이미지 로더 라이브러리가 존재한다. 이전 포스팅에서도 언급했듯 개발자가 어떠한 라이브러리 없이 이미지를 로드하려고 한다면 고려해야하는 요소가 많이 존재하게되는데, 이를 third party에게 위임함으로써 걱정을 좀 덜게될 수 있다.
대표적인 라이브러리의 종류로는 예전에 많이 쓰이던 AUIL부터 (but he is..👋), 현재에도 쓰이고 있는 Piccaso, Glide, Coil 등이 존재하는데 각각의 라이브러리들은 어떻게 사용하는지, 성능은 어떠한 차이가 있는지 간단하게 적어볼 예정이다.

 

Glide

Google에서 만든 이미지 로더 라이브러리인 Glide는 빠른 이미지 로딩, 버벅 거림과 끊김 현상이 발생하지 않는다는 점을 강조하고 있다

Glide.with(this)
    .load(url)
    .apply(RequestOptions.bitmapTransform(RoundedCornersTransformation(128, 3)))
    .listener(object : RequestListener<Drawable> {
        override fun onLoadFailed(
            e: GlideException?, model: Any?, target: Target<Drawable>?, isFirstResource: Boolean
        ): Boolean {
            TODO("Not yet implemented")
        }

        override fun onResourceReady(
            resource: Drawable?, model: Any?, target: Target<Drawable>?, dataSource: DataSource?, isFirstResource: Boolean
        ): Boolean {
            toast("Complete")
            return false
        }
    })
    .into(imageView)

Picasso

Square에서 만든 Picasso는 최소한의 메모리로 이미지의 다양한 Transformation을 지원하며, 자동으로 메모리 & 디스크 캐싱, 어댑터에서 ImageView를 재활용 및 다운로드 취소가 가능하다는 점을 강조하고 있다.

Picasso.get().load(url)
    .transform(RoundedCornersTransformation(128, 3))
    .into(imageView5, object : Callback {
        override fun onSuccess() {
            toast("Complete")
        }
        override fun onError(e: Exception?) {
            TODO("Not yet implemented")
        }
    })

 

Glide vs Picasso

 

라이브러리 크기 및 Method의 개수

• Glide의 라이브러리 크기는 Picasso의 라이브러리보다 약 3.5배 더 크다.
• Gliide에서 지원하는 메서드 개수는 Picasso의 메서드 개수보다 많다. Picasso 메서드의 개수는 849이고, 글라이드 메서드 개수는 2678이다.

 

Cache

• Picasso는 이미지를 다운로드하고 캐시에 전체 크기 이미지를 저장하며, 우리가 같은 이미지를 요청할 때마다 전체 크기 이미지를 반환하고, 실시간으로 이미지 뷰에 맞게 크기를 조절한다.
• 반면, Glide는 URL에서 이미지를 다운로드하고 이미지 뷰의 크기에 맞게 크기를 조정하여 캐시에 저장한다.
  두 개의 다른 크기의 이미지 뷰가 필요한 경우, Glide는 다른 해상도로 동일한 이미지에 대해 사본을 캐시에 각각 저장한다. 

 

화질

아래 그림을 잘보면 Glide는 Picasso에 비해 화질이 좋지 않음을 알 수 있다.

 

그 이유는 Glide는 Bitmap 포맷을 RGB_565를 사용하고, Picasso는 Bitmap 포맷을 ARGB_8888로 사용하기 때문이다.

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

RGB_565 vs ARGB_8888

RGB_565: 2byte로 1pixel을 표현하는 방식, 16bit (2byte)를 쪼개서 R(5bit) + G(6bit) + B(5bit)로 표현한다.

(2^5)*(2^6)*(2^5) = 65,636색 표현 가능

ARGB_8888: 4byte로 1pixel을 표현하는 방식, 32bit (4byte)를 쪼개서 Alpha(8bit) + R(5bit) + G(6bit) + B(5bit)로 표현한다. (2^8) * (2^8)*(2^8)*(2^8) = 4,294,967,296색상이 표현 가능하다.

 

화질은 알겠어. 근데 왜 메모리가 왜 50% 적게 사용될까? 

이에 대합 답은 아래 예시를 살펴보면 명확히 이해가 될 것이다.

• ARGB_8888:
  • 한 픽셀당 4바이트이므로, 예를 들어 1920x1080 해상도의 이미지는:
    1920×1080×4=7,948,800 바이트 (≈7.6 MB)
• RGB_565:
  • 한 픽셀당 2바이트이므로 동일한 해상도의 이미지는:
    1920×1080×2=4,147,200 바이트 (≈4 MB)

 

Glide에서 ARGB_8888 포맷으로 바꿀 수는 없어?

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

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());
    }
}

 

결과를 보자

용량이 전 보다 좀 늘었지만, 여전히 Picasso가 훨씬 더많은 메모리를 사용하는 것을 알 수 있다.

이유가 뭘까?

바로 아래에서 살펴보자.

 

메모리

• Glide는 뷰의 크기에 따라 동일한 이미지를 로딩하기 때문에 Picasso에 비해 메모리 효율성이 높은 반면, 피카소는 전체 크기 이미지를 로딩한다.
• OutOfMemoryError 예외를 방지하려면 Glide를 사용하는 것이 좋다.
  만일 Picasso에서 OutOfMemory를 방지하려면 .fit()메서드를 추가하여 방지할 수 있다. fit()메서드는 메모리에 업로드하기 전에 뷰의 크기를 측정하고 뷰에 맞는 이미지를 메모리에 로딩하기 위한 메서드이다.

그렇다. Picasso는 전체 이미지 크기를 메모리로 가져오기 때문에, 많은 메모리를 사용하는 것이였다.

 

위에서 언급한 바와 같이 fit()메서드를 활용하면 어떤 결과가 나올까?

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

 

아래와 같이 Glide와 동일하게 메모리 사용량을 보이는 것을 확인할 수 있다.

 

기타 기능

• 애니메이션 GIF 지원: Glide는 GIF를 지원하지만 Picasso는 지원하지 않는다.
  

  

Coil

Instacart에서 만든 Coil 은 Coroutine Image Loading의 줄임말로 위에 설명했던 이미지로더 라이브러리와 달리 코틀린 & 코루틴으로 구성되어있다.

제일 큰 장점으로는 라이브러리가 거의 100% 코틀린으로 이루어졌다는 점과 AndroidX, OkHttp 등 현업에서 많이 쓰이고있는 라이브러리들을 지원하고 있다는 점이다.

Coil 라이브러리 내부를 살펴보면, Glide와 굉장히 비슷하다는 것을 알 수 있는데 Glide를 많이 벤치마킹했다고 한다 👀.

또한 ImageView의 확장함수로 지원하고, 코틀린의 매력인 함수형 언어 덕으로 다른 라이브러리보다 더욱 간결한 코드를 구성할 수 있다.

imageView.load(url) {
    listener(
        onError = { _, _ -> /** Show toast. */ },
        onSuccess = { _, _ -> toast("Complete") }
    )
    transformations(RoundedCornersTransformation(128f))
}

 

 

---

참고자료

https://medium.com/@singhsiva177/difference-between-picasso-and-glide-5d4b944c7088

Difference between Picasso and Glide

https://gun0912.tistory.com/19

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

https://medium.com/@ramkid91/picasso-vs-glide-coil-c1a070e12a66

Picasso vs Glide / Coil

https://medium.com/android-deep-dive-study/image-loading-and-caching-library-part-1-why-use-81aff6c04af9

Image Loading and Caching Library Part 1 — Why use?