Images in RecyclerView feels laggy (Using Picasso)

Question

I have a RecyclerView (It is actually a chat). The users can send images and text. The problem is when I scroll it feels laggy because the images are being loaded (If I go down and up, it takes to much time to Picasso to bring the image back again). And I'm using this line of code to do it.

 Picasso.with(itemView.getContext())
                    .load(((ChatMediaMessage) message).getUrl())
                    .into(imageView);

If I use the resize option is not laggy at all, but the images lose the image ratio obviously.

Picasso.with(itemView.getContext())
                    .load(((ChatMediaMessage) message).getUrl())
                    .resize(400, 400)
                    .into(imageView);

The layout of the ViewHolder looks like this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    android:layout_marginTop="8dp">

    <com.stfalcon.chatkit.utils.ShapeImageView
        android:id="@id/messageUserAvatar"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_alignParentBottom="true"
        android:layout_marginRight="8dp" />

    <com.google.android.flexbox.FlexboxLayout
        android:id="@id/bubble"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="@dimen/message_incoming_bubble_margin_right"
        android:layout_toRightOf="@id/messageUserAvatar"
        android:orientation="vertical"
        app:alignContent="stretch"
        app:alignItems="stretch"
        app:flexWrap="wrap"
        app:justifyContent="flex_end">

        <ImageView
            android:id="@+id/image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:scaleType="centerInside" />

        <TextView
            android:id="@id/messageText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <TextView
            android:id="@id/messageTime"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/messageText"
            android:layout_marginLeft="8dp"
            app:layout_alignSelf="center" />

    </com.google.android.flexbox.FlexboxLayout>

</RelativeLayout>

Answer 1

Have you try Glide? Give it a try. Just add the library on dependencies and only replace the Picasso word.

Is your image size bigger, like 2Mb above? Try resizing or optimizing the image before upload it anywhere.

Is your image JPG? You can use RIOT http://luci.criosweb.ro/riot/ to optimize your JPG/PNG.

Or it's advisable to convert your JPG images into WebP. Android Studio has the built in converter to try. WebP loads faster and smaller in size.