Hello everyone, I am using <coil compose> for image rendering, but unfortunately, I am encountering ...

# compose

[Dani Diprana]

Hello everyone, I am using coil compose for image rendering, but unfortunately, I am encountering some / very laggy behavior. I have created a sample screen with the code snippet below, and the performance is still not as good as when using RecyclerView.

The images I am using have a high resolution, and when I render multiple images on the screen, the lag becomes noticeable. However, when I only render four large images, the performance improves significantly.

According to the documentation, the coil supports downsampling images and has a caching mechanism. I am wondering if I have implemented the coil incorrectly. I am using coil version 2.6.0.

It's interesting to note that when optimizations like caching or key are applied, the nested list with coil performs worse than RecyclerView. To ensure better performance of Compose, we used the release build, but it still underperformed compared to RecyclerView. Our testing was conducted on a Redmi 9C (low middle end device).

I would greatly appreciate any suggestions on how to improve the performance of the coil or why it might be performing poorly compared to RecyclerView.

Video comparison Coil (left) Vs RecyclerView (right)

WhatsApp Video 2024-05-17 at 3.24.46 PM.mp4coil-compose-sample.txtrecyclerview-sample.txt

[aliftc12]

I am also experiencing the same thing. The issue is getting worse when using low end devices.

[Sergey Y.]

According to the documentation, the coil supports downsampling images

Yeah, even though it's declared as supported, it never worked for me out of the box.
I always had to manually specify the image size. Here's an example of how I handled it:

[Sergey Y.]

Basically, it makes sure the image size isn't any bigger than the Image widget itself, or smaller if needed.

[Dani Diprana]

Thanks mate, I'll try the workaround. Just curious, after you specify the image size then do you ever experience the laggy issue again on low/middle-end devices or not? 🤔

[Sergey Y.]

To be honest, in my experience, Jetpack Compose has been performing pretty well, but I always put in some effort to optimize things.
Just writing the layout as is, out of the box, gives a decent experience - not bad, but there's definitely room for improvement.

[Sergey Y.]

Take this Nexus 5(2013), for example. It's running a layout with average complexity, plus some additional effects on top. While it's not quite hitting 60fps, it's not dropping to 30 either. Considering the age of this device, I'd say it runs pretty well.

Screen_recording_20240515_010759.mp4

[Sergey Y.]

To get Compose running smoothly on low-end devices, you really need to put some effort into optimizing layouts. Things like baseline profiles, using release mode, reducing recompositions, optimizing image sizes, and so on - they all make a difference.

[Sergey Y.]

It's not buttery-smooth on this 11-year-old device, but it's not terrible either.

20240517_141606.mp4

[Dani Diprana]

Yeah, we need to put extra effort into optimizing compose. Thanks mate for sharing your experience @Sergey Y. Really appreciate it