Categories images are blur and icon are small

the images which i upload for categories are good quality version, but when i add it as images (under html blocks for categories menu), the images are blur, why and how to rectify it
and
the those categories images are small, how to increase the icon size (as i uploaded 512px size icon)

Attachments:

You must be logged in to view attached files.

Hello,

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-chrome

To 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.

Best Regards

i din’t get to fix those, can you fix those?

Hello,

This issue is caused by Chrome browser image downscaling. To fix this you need to serve proper image size depending on the image container in which it will be placed. For example if your image will take up 118×118 (https://prnt.sc/xjtca5) space on the page you need to use an image with similar, or very close size (for example 118-150px width).

As an alternative you can add the following code snippet to the Custom CSS area in Theme Settings to improve image quality of downscaled images

.wpb_single_image,
.category-image-wrapp {
	image-rendering: -webkit-optimize-contrast;
}

Best Regards

[Author]

Posts