Image file sizing question

Hey everyone, I really hope you can help because I am super frustrated with this right now. I’m not a designer so pardon me if I am just being incompetent.

Webflow requires image file sizes to be below 4MB, so I go over to CloudConverter and I convert my SVG files that are 10MB down to 1MB or so. This is where the problem occurs. The images are distorted or completely missing components.

My question is how do I shrink my file sizes without destroying my images?

I am exporting grouped components from Adobe XD in SVG then converting to webP. They have high resolution images + standard components in them. When I compress them, the high res image completely disappears.

Is the only solution to use other low quality pictures?

Here is my site Read-Only: [LINK][1]
([how to share your site Read-Only link][2])


First question…why are you exporting images as SVG? Typical images are .jpg/.png.

Second, when you group components together in XD, it’s likely that they are set to “responsive” which means all the individual components move independently. Uncheck that and you might start to see some success.