'One' Bad Image Quality on Mobile Devices

Tagged: 

Author Posts

EduardoChaves April 28, 2021 at 10:16 pm

Heads up! this post was created when Microthemer was at version 6. The current version is 7. Some references to the interface may be out of date.

Hi,

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…

Page: http://fotografandooficial.com.br/

Video Showing the Image on Microthemer:
https://www.loom.com/share/3a37b52306e74cd7900f8d5fd4fb4fea

I already contacted my theme support but they didn’t helped at all, so I’m here to see if some one could help me to find a way to solve this problem.

Thanks,
Eduardo Chaves

Sebastian April 29, 2021 at 8:23 am

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.

Cheers,
Sebastian

EduardoChaves April 29, 2021 at 3:02 pm

Thanks Sebastian,

I don’t know if I did in the way you said, but it got a nice result! (Before / After)

The way I did:
https://www.loom.com/share/c11631c8ae4c4f4797fe14b6d2a59e82

It’s not 100% but it’s almost!

Cheers,
Eduardo Chaves

Sebastian April 29, 2021 at 3:29 pm

Yep, that looks sharper now.

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.

EduardoChaves April 29, 2021 at 3:42 pm

Ok,

Now it’s fixed, thanks for the advice!

Regards,
Eduardo Chaves

You must login or register to reply to this topic.