Home › Forums › WoodMart support forum › Blurry images
Blurry images
- This topic has 3 replies, 3 voices, and was last updated 4 years, 4 months ago by
Bogdan Donovan.
-
AuthorPosts
-
January 12, 2021 at 3:05 pm #257742
[email protected]ParticipantHello there! Some time ago we purchased your WordPress theme Woodmart, which is absolutely amazing! But there is one thing that keeps me baffled and I can’t figure it out and fix it on my own – some of the images appear a little blurry but shouldn’t. Especially the ones in the mega menu (on mouse-over) and in the shop (but also some on the page). The ones in the mega menu get clear for a second there (on mouse-over) and then blurry again. The ones in the shop appear a little blurry all the time. Can you help please?
Attachments:
You must be logged in to view attached files.January 12, 2021 at 8:51 pm #257816
Elise NoromitMemberHello,
Thank you very much for choosing our theme and for contacting us.
Please check what image size is set in the grid here: Appearance – > Customize -> WooCommerce -> Product Image. Try to increase the size. You can find more information here: https://xtemos.com/docs/woodmart/faq-guides/image-size-content-alignment-product-grid/
If it does not help to solve the problem, please provide your site admin access to the private area.
Best Regards
January 13, 2021 at 7:11 am #257908
[email protected]ParticipantHello!
I already did what you suggested, didn’t help. Can you check?
January 13, 2021 at 2:35 pm #258103
Bogdan DonovanKeymasterHello,
The following issue is caused by browser downscaled image rendering and didn’t relate to our theme. For better site performance and look image sizes need to be served in correct proportions. For example if the column has 300px width – image placed in that column mast be in close sizes for example 300-400px. In your case you placed 1000px image (https://prnt.sc/wmn4dr) in 222px container (https://prnt.sc/wmn2ui) – in result this usage create almost x5 downscaling that may cause browser rendering issues.
More about this issue can be found here:
https://bugs.chromium.org/p/chromium/issues/detail?id=562162
https://stackoverflow.com/questions/37906602/blurry-downscaled-images-in-chromeTo fix this issue we can suggest reducing image sizes close to the container size or add following custom code which is commonly suggested in similar image issues on StackOverflow.
.elementor-container img { image-rendering: -webkit-optimize-contrast; }
Code need to be placed to the Custom CSS area in Theme Settings
Best Regards
-
AuthorPosts
- You must be logged in to create new topics. Login / Register