Bodymovin using WebP

Is it possible to take a PNG sequence rendered in After Effects, batch convert it to WebP, bring it back into AE, and use Bodymovin?

I havent used Bodymovin nor Webflow yet, but I was wondering.

Ive seen in tutorials that Bodymovin has its own compression settings, but wouldnt WebP be better, even without BM’s compression? Thanks.

1 Like

Great question! I’m also curious if this is possible.

1 Like

While it is possible to create a webp sequence in photoshop using an extension like WebPShop, which you may find here: GitHub - webmproject/WebPShop: Photoshop plug-in for opening and saving WebP images
There is not currently an “import webp sequence” setting yet in adobe after effects.
Currently, those of us using Bodymovin to export lottie json files must use jpeg sequences and png sequences. The best way to keep the file size down is to compress your video/ animation sequences prior to exporting them as an image sequence and importing them into bodymovin. If you give bodymovin a set of images that are already very large in size, compression will not be as effective. It’s best to feed bodymovin images that you have compressed already. I also like to reduce my video frame rate on export, and adjust my lottie animation timing within webflow to meet the duration I’m aiming for.

Yes, it’s possible! If you follow the Webflow tutorial, but instead of using PNGs or JPGs, drag your WEBP images into After Effects. Then continue with the rest of the tutorial, but in the export settings of Bodymovin don’t enable compression, instead select the option above: Copy Original Assets. This literally halved the size of my JSON export.

Hi Maik!
You wrote: “… drag your WEBP images into After Effects.”

How on earth do you import webp images into After Effects? I’ve tried everything, but AE (and also LottieFiles Creator app online) don’t accept webp files !!!

That’s a real shame, because webp images look very good at small file sizes, but what’s the point if you can’t import them …

And so you’re left with JPEG files, which always look worse at smaller sizes. I wish one could create Bodymovin animations with 256 colors to keep the file smaller, but that’s not possible with AE either. The 256 color selection always remains greyed out, you are forced to save even files with only a few colors as millions of colors. Crazy!

A workflow I’ve done before is generate everything using a PNG sequence and bodymovin (as normal), then bulk compress the PNG sequence to WebP (anywebp is a great service), then upload to Webflow and manually configure the JSON to pull the Webflow hosted Webp images. Bit of a process but worth it for the file size reduction, also worth leveraging find and replace and using VSCode + dual monitor to copy url over to JSON as fast as possible :smiley:

1 Like