Picture looks good in designer and preview, but not in published site

Design help General
1

Hi! Hope you’re well, I’m building our agency site, but the image inside the “Diseño responsivo” square is looking good in the designer and preview mode:

Screen Shot 2022-07-28 at 14.24.42
Screen Shot 2022-07-28 at 14.24.421920×964 163 KB

But in the published site (only on desktop) is looking pixelated:

Screen Shot 2022-07-28 at 14.24.16
Screen Shot 2022-07-28 at 14.24.161920×943 140 KB

I’ve tried making it svg, webp, png, and jpg, but it doesn´t work, currently, it has this size:

Screen Shot 2022-07-28 at 14.25.23

Hope you can help me, thanks a lot!

Here is my site Read-Only: https://preview.webflow.com/preview/yungle-tools?utm_medium=preview_link&utm_source=designer&utm_content=yungle-tools&preview=7366d4ef0265169ca9d6c53552a56da7&workflow=preview

2

Make sure your image doesn’t shift when you publish your website. Images (especially PNGs with transparent backgrounds) tend to become blurry/pixelated when they are zoomed in through layout shift or through CSS scaling.

3

Yes! I saw that, when I click “publish” it became blurry, this happens only with the png format.

But, do you know how to fix it? please