Retina resolution on image

Hello,

I’m occurring some difficulties to set some icons in high quality using Single Image option. I saw that if I try to increase the size I can see them better, but they became also more big. Instead I prefer to show them in 100×100 dimension max. As you can see now they are a bit blurred, because the browser shows the standard resolution.

How can I fix it? I also searched on Google, but nothing useful. Thanks!

Hello,

Try to double the size of those images to make it look clear. But the best way is to use SVG for such icons that will be smaller in size and look perfect on any screen resolutions. You can check on our demos.

Kind Regards

I already tried to publish icons in a double size, but then I also needed to set a size like 100×100 and the result is the same. The images are resized in 100×100, but not retina.

Try to upload 200×200 images so we can check how it works.

Sorry, I said wrong.

The files that I’m using right now are 50×50. I tried the 100×100 files and they are shown in 100×100 in “full” mode. If I set “thumbnail” VP Bakery shows a very low resolution. There is no way!

Try to upload 100×100 and set to full so we will check.

Let’s try another way. Suppose that I’d like to show the icons in 25×25 size. Now they are 50×50 in “full” size. What I have to do to show them in 25×25 in high resolution?

Currently, the only way to do this is to limit single image element width. Try to add some extra CSS class to that element like width-25 and use the following custom CSS

.width-25 img {
    width: 25px;
}

I did it, but nothing changed.

Please, add the custom CSS code to Theme Settings also. We don’t see the code added at the moment.

The cache plugin didn’t clean the CSS. Now it works great. Thanks!

Great, you are welcome!

[Author]

Posts