I have a image on one of my widgets that is having a bad quality issue just on mobile devices and I don’t know the reason for this (Printscreen1). I tried to put another image but the same happens (Printscreen2). I already deactivated the Microthemer and my image optimization plugin to see if some of them was causing this, but no…
I see what you mean, it’s a little less sharp on mobile. This is probably because the browser is having to scale down a naturally large image quite a lot.
The srcset attribute of images helps with this kind of problem. But that involves adding custom HTML for the image. You may find it’s easier to simply add a smaller image that is e.g. only 480px wide, alongside the large image you have right now. And then set the small image to display: none in Microthemer for All Devices. And then override that on the mobile tab by setting display: block. But hide the large image.
With only the 480px image displaying on mobile, the browser will not have to scale it down so much, and it may look better.
My only recommendation would be to set the display property to none, rather than visibility to hidden. It’s the first property in that group.
With visibility set to hidden, the image still takes up space on the page, as if it were still visible. Whereas display:none removes an element, as if it weren’t there at all.
