HTML5 Canvas laggy on Chrome Android

[chespio]

Hello everyone, 

It's been a little over a week since I've been trying to solve an issue that keeps me awake at night.

It's about a project I'm working on that runs very slowly only on Chrome for Android. After much research, I found that the problem occurs when handling several large images (around 3500 pixels each).
I've confirm this by compressing big spritesheets images to 100kb each and still laggy if the images are biger in pixel size.  

The issue is that if I don't use spritesheets, the loading time increases considerably, taking almost a minute to load, compared to 5 seconds of loading time when using two giant spritesheets. However, on Android, the performance drops significantly. On the other hand, if I load the 72 separate images, the loading time increases to a minute, but the performance is excellent.

Could you share some experiences and/or suggestions on other methods to approach my problem? Or options to investigate?

Thank you for reading this,

Great performance but about 60 seconds to load: 
https://wprotate.netlify.app 

5 seconds to load, but laggy on Chrome Android 
https://rx-test2.netlify.app  

[kglad]

there's a trade-off between available host system resources and the demands of what you create.  ie, you can't super-computer performance on a mobile.

that said, a 60x60 image is not demanding and should cause no problem on a mobile.

[chespio]

Thank you kglad for your response!
I understand the trade-off between system resources and the demands of a project. However, I'm curious about your mention of a 60x60 image. Are you referring to an image with a resolution of 60x60 pixels?

Thanks in advance 

[kglad]

i'm referring to an image with a size of 60px by 60px or a 3600px image, which you indicated was a large image.