androidpicassoimage-caching

Cache of Original Image Is Not Reused When Applying Transform in Picasso


I am trying to switch between the original and transformed bitmaps using Picasso. The problem is the first time the original is loaded it seems to be cached, but when I load the transformed image then it seems to reload the image again and not using the cache. The same url is used to fetch the image. It happens only the first time for the original and transformed and then the cache is used.

My expectation that Picasso should automatically reuse the original image cashed to apply the transform and reload it with no delay. Maybe I am missing something.

Here is the code of image loading.

 private fun loadOriginalImage(i: Product, productImage: ImageView) {
    Picasso.get().load(getProductUrl(i.id)).placeholder(R.color.light_grey)
        .error(R.color.light_grey).fit().centerCrop().into(productImage)
}


 private fun loadGreyedImage(i: Product, productImage: ImageView) {
    Picasso.get().load(getProductUrl(i.id)).placeholder(R.color.light_grey)
        .error(R.color.light_grey).fit().centerCrop().transform(GrayScaleTransform()).into(productImage)
}

Picasso version implementation 'com.squareup.picasso:picasso:2.71828'


Solution

  • After enabling logs I verified that the original image was cached indeed and as @Sputnik suggested the problem seemed to be caused by a delay in creating a transformed bitmap from the original image cache.

    But the solution of pre-caching transformed images is not the best one imo. First of all, there is quite some images and greyscaled ones are required only when user clicks on the image in the recycler. It may never happen but we already cached double size of images just in case.

    So after playing with Picasso and logs the solution that works for me was to use the original image as a placeholder.

    so instead of

        Picasso.get().load(getProductUrl(i.id)).placeholder(R.color.light_grey)
        .error(R.color.light_grey).fit().centerCrop().transform(GrayScaleTransform()).into(productImage)
    

    I did this

        Picasso.get().load(getProductUrl(i.id)).placeholder(productImage.drawable)
        .error(R.color.light_grey).fit().centerCrop().transform(GrayScaleTransform()).into(productImage)
    

    This way my placeholder is the original image and it make the transition smooth and gets rid of potential overhead with caching all the transformed images.