Blurred icons with Elementor Information Box Carousel widget

Hello,

When we use a custom icon size in your Elementor Information Box Carousel widget (see screenshot 2) the icons become blurred (see screenshot 1 – the arrowed icon is not set to a custom size). This only happens if we do not use a preset size. The icons we are trying are 500px x 500px which is a good size for scaling up or down so we don’t think this is the issue.

Is there a way to prevent the blurriness / fuzziness?

Regards

Attachments:

You must be logged in to view attached files.

Hello,

Please, provide your site admin access to the private area.

In addition please provide the page URL with the carousel.

Best Regards

Hi sure.

See the private are.

Hello,

You apply the custom size incorrectly: you set only the height. And you need to set the width as well. The custom size would not make different image sizes to be equal, it cuts the images as per the settings: https://gyazo.com/da7ac4b851ec040cedccbd07a5f63c84 I have set 70×70

You need to upload images of the same width and height, and then you can reduce the theme with the custom size to have proportional clear images.

Best Regards

Hello,

Yes I understand but even when I’m using an image that is the same width and height (e.g: 200 x200px) and even when both width and height are set in custom size there is blurring. Even in the image you showed me where you set the custom size to be 70 x 70 there is blurring. When I choose anything but the custom size the images are not blurred. So I’m still puzzled by how to get clear images in this information box?

It seems like when I set a custom size the widget reduces the quality of the image when resizing.

Hello,

When you set a custom size of an image, Elementor resizes a raster image using its own compression settings, which we can’t control via WordPress theme. There is several solutions of this issue.

1. Use vector images for icons, which will always look sharp and do not have problems with compression artifacts that raster images have.

2. If you want to use raster images, we recommend you to change image file dimensions in image editor to the desired values, save it without compression and upload to the infobox element using Full image size option (https://prnt.sc/1falx9p).

Kind Regards

Ok Understood. I used SVG and they are nice and crisp

Thanks for the help.

You are welcome! We are here to help.

Wish you a wonderful day!

[Author]

Posts