'One' Bad Image Quality on Mobile Devices

Tagged: 

This topic contains 4 replies, has 2 voices, and was last updated by  EduardoChaves 1 week, 1 day ago.

Author Posts

EduardoChaves

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

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

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

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

Ok,

Now it’s fixed, thanks for the advice!

Regards,
Eduardo Chaves

You must login or register to reply to this topic.