UI pixel art affected by heavy color compression on mobile devices

I have a fully UI based-game that has a pixel art style to it, for this reason and the fact that images can now be rendered with Nearest Neighbor filtering my images that I use are very low resolution. For example 19x20 or 51x12 as a 3x1 tilemap.
On PC devices, this works just fine but on mobile there has always been a noticeable color compression to it.

If you take a look at this image I put together, ignoring the blur from my phone screenshot you can see how it looks for mobile on the left and what my source image is on the right.
compressionDemo
There are some clear color compression artifacts that should not be happening.

To make it more visible, here’s a video demo showing the player’s animation. You can see the colors constantly shifting from the compression affecting each sprite of my tilemap differently.


And here is the source tilemap it is animating with (excuse the low resolution):
skin_yellow

I’m pretty sure this is out of my control, but is this something that’s possible to fix or do I just need to upscale my sprites?

Tested on: Samsung Galaxy A52s 5G (SM-A528B)

Expected behavior

Low resolution images when loaded on mobile should not be getting heavily compressed.

3 Likes

I actually ran into this same thing while making an exact recreation of flappy bird, though it only seemed to happen when I tried it on an iPhone 5. It seems to depend on the hardware (atleast, in the case of iOS.)

It heavily ruined the visuals when it occurred. Sadly I can’t test this again since that phone isn’t supported anymore

1 Like