Why is my footer image becoming blurry on smaller screen sizes?

The top screenshot is from my editor and what the footer image looks like on my computer screen, while the bottom screenshot is from my mobile device where you can tell the clarity of the image is significantly reduced.

For additional context, the whole footer banner is one image, not multiple.


you may try if “keep ratio fixed” of the image may help

When I do this, the image does not keep the same size of the width of the screen. I also tried updating the responsiveness after trying to keep the ratio fixed, but no luck:

There are always limitations, you need to play around the min and max width, and the px and %