Image has grey boarder, only when published

Hi!

I’ve been trying to figure out why my site’s images look so… fake. There is a weird outer boarder appearing on images on my published site, that don’t appear on the designer. Here are two screenshots of the error. I’ve tried adjusting the image size, it’s background color, etc and nothing seems to get it adjusted. Any ideas??

Published image

Image displayed in designer


Here is my site Read-Only: https://preview.webflow.com/preview/augment-template?utm_medium=preview_link&utm_source=designer&utm_content=augment-template&preview=f8bedf4e8f4e5e6c32f08aaaf2f18248&mode=preview

Here is my site URL: https://www.augmentcxm.com/

What you are seeing is compression artifacts on the smaller image generated by the responsive image process. You could disable responsive image generation of that asset. If you do I would recommend a 1400px wide image which would be 2X the max width of the element in your layout. The other option would be to ditch transparency on the PNG and set the background to #f8f8f8 to match the section bg color. Webflow’s responsive image process would probably produce better results then.

1 Like

JEFF! You are my hero. It looks like both of these methods work. Appreciate the input :smile:

1 Like