Community forum for knowledge and support

Updated 4 months ago

Choosing the right file format for animated 3d visuals on a website

At a glance

The community members are discussing the best file format for their client's animated 3D visuals. The original poster mentions that MP4 has a weird background and doesn't match the site, while APNG is 11MB and the site only allows 4MB. The community members suggest trying WebM as a compressed video format, and also mention that the background can be edited to match the site. They also tried Lottie, but it resulted in a 14MB file, which is too large for their needs. In the end, the community members were able to get the WebM file working, but had some trouble uploading it to Webflow initially.

Hey guys, my client has some animated 3D visuals they want to use on the site. Any suggestions for file format? mp4 has a weird background and doesnt match with the site, the apng is 11mb and webflow only allows 4mb. Just wondering what others do in this situation

M
J
7 comments

Can the 3D visuals be edited? Thinking the solution here is editing the background on them to match the site and keeping them in mp4 file format as that is likely the most common one. webm is another file format that you could try to compress down to. There are video compression tools similar to image compression tools out there as well.

Yeah the background can be edited but it just seems to come out as a slightly different color when exported. They’re going to try webm, didn’t even realize that was a format! 😅 we tried Lottie and it comes out really nice but it’s 14MB 😳 and we have 6 in total we need to use so that would get a bit hefty!

Thanks for the webm suggestion, if this doesn’t work I’ll have to figure out why the background colour isn’t matching even though it’s the same

I've got the webm file, do you know how I upload it to webflow? I might be being stupid but I cant get it to upload haha

Dw I figured it out haha its not an image has to be a video

Add a reply
Sign up and join the conversation on Slack