Android Image Framework Comparison

As an Android developer you have a lot of options when it comes to adding images to your app. In this blog we will give you a quick comparison between Glide (https://github.com/bumptech/glide), Picasso(https://square.github.io/picasso/), Fresco (https://frescolib.org/docs/index.html) and Coil (https://coil-kt.github.io/coil/getting_started/). We will look at the four different image frameworks and score them based on three different categories:

Setup and simple usage - How easy is the framework to install and setup to just get an image loaded.

RecyclerView - How easy is it to integrate into a RecyclerView where you have different images loaded, imagine something like a facebook feed.

Transformation - How easy is it for the framework to add transformations, in the case of the test, we will just add corner rounding.

In the bottom of each category we will rate the different frameworks on a scale of 1 to 5, where 1 is the lowest and 5 is the highest.

Setup and simple usage

For this category we looked up the framework in question and followed the instructions to get started.

Glide and Picasso

We are ranking these two frameworks together as they are eerily similar in regards to setup and how they work.

For both of these frameworks all you have to do is to include the implementation of the given framework in your build.gradle file and then you are good to go.

They both follow the same structure for loading images which can be seen below:

(Glide|Picasso).with(CONTEXT)
    .load(URL)
    .into(IMAGEVIEW)

Both of these frameworks are just using Androids regular ImageView to load the images into.

Fresco

Fresco works a bit differently when compared to Glide and Picasso.

We also have to include the implementation in the build.gradle file for this framework. It however has a different step required, where you need to add an initialization step in the application part of your app.

Fresco.initialize(this)

This framework also uses its own specialized class to load images in with: SimpleDraweeView

This would require some refactoring for users who have already set up most of their views with the standard ImageView.

Once you have set up all the right views, you can load images by the code described below:

ImageView.setImageURI(URL)

Coil

Coil follows the same procedure as the frameworks above. We will need to add the implementation in the build.gradle file. We have a small twist for this framework however, since we need to make sure the code is compiled for java 8. This however is done in two easy steps. We need to add the compileOptions part to the Android part of the build file. Afterwards we need the add a task below. This is all very well documented on the frameworks github page and shouldn't be a problem for anyone who has worked with Android before.

android {
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
}

tasks.withType(org.jetbrains.kotlin.gradle.tasks.KotlinCompile).all {
    kotlinOptions {
        jvmTarget = "1.8"
    }
}

Once the framework is setup it is very easy to use. It uses the standard ImageView for displaying the pictures and the image is simply loaded in as can be seen in the code snippet below:

ImageView.load(URL)

Since Coil just adds an extension to the existing ImageView, this makes it very easy if you have already added some logic for ImageViews in your code.

Score

Glide	Picasso	Fresco	Coil
5	5	2	5

RecyclerView

Glide and Picasso

Both of these frameworks are easy to adapt, all you need to do is add the image loading to the bind part of the code of the adapter and they both work like a charm. Both frameworks also provide easy access to a centercrop functionality which makes the elements in the RecyclerView uniform

Fresco

Work like described in the previous section all that needs to be done is adding the loading part into the adapter.

This framework also has a centercrop functionality, however it is not as intuitive as Glides or Picassos

Coil

Works just like the others: add the image loading to your bind function and you are set. The centercropping on this framework requires a bit more fiddling, but was still easy to setup.

Score

Glide	Picasso	Fresco	Coil
5	5	5	5

Transformation

In this section we will try to make each of the frameworks add a 16 pixel rounded corners transformation.

Glide

On Glide this was very easy to achieve, all the tools needed were in the framework you have added to project. A simple example can be seen below to achieve the wanted result.

val requestOptions = RequestOptions()
requestOptions = requestOptions.transforms(CenterCrop(), RoundedCorners(16))

Glide
    .with(CONTEXT)
    .load(URL)
    .apply(requestOptions)
    .into(IMAGEVIEW)

Picasso

In Picasso we did not have this transformation out of the box. So you would either have to create your own transformation or find a third party lib. We made it work with the following lib: https://github.com/wasabeef/picasso-transformations

Once the lib is added to project all you need is to add the transformation to the loading, this can be seen in the code snippet below:

val transformation = RoundedCornersTransformation(16, 0)

Picasso
	.with(CONTEXT)
    .load(URL)
    .centerCrop()
    .transform(transformation)
    .fit()
    .into(mImage)

Fresco

In the Fresco framework transformation is handled differently than Glide or Picasso. Since we have our own ImageView class in this framework the rounding of the corners is done in the layout file and very easy to add. Another upside of this is that you would have less clutter in the code.

Coil

In Coil we tried to add the same behavior as in the other examples. However due to the way center crop is working in this framework, this gave some issues which we were not able solve in this blog.

Initially all the image were set up in an RecyclerView where they had the scaleType of centerCrop, this would result in uneven rounding of the corners where some of the images had rounding while others didn't.

An examples of the code can be seen below:

mImage.load(item.url) {
    placeholder(R.drawable.ic_launcher_foreground)
    scale(Scale.FILL)
    transformations(RoundedCornersTransformation(16f))
}

Score

Glide	Picasso	Fresco	Coil
4	4	5	2