1

I have been trying to export an After Effects animation of an aurora borealis (made with Flux) as an SVG for a website, but every time I export it looks a bit low res and takes up to much space to be applied to a web page. I tried to render it first as a PNG sequence and the render it with bodymovin but the problem still persists. Can anyone help pls?

1

If you have no alpha-channel and would like to run the animation on your website (as a background for example), I would highly recommend you encode it in h264 .mp4 format, with about 3-6 MBit/s and 2 passes VBR to lower the filesize further. Also take a look at your framerate, as you could get away with 20 frames for a slow animation. I wouldn't go above 30fps. I hope I could help you, if not, please comment on my post.

1

Bodymovin works best for things like shape and text layers, that can be described by the SVG language. SVG is a bit like html, it contains instructions on how to render the content, rather than the actual images. For example if you wanted to draw a circle 256px wide, rather than create a raster image of a circle, and provide the colour info for each pixel in the 256x256 pixel grid (over 65 thousand pixels, each with red, green and blue value) you can make an svg that does the same thing thus:

 <svg height="100" width="100">
     <circle cx="256" cy="256" r="40" stroke="black" stroke-width="3" fill="red" />
 </svg> 

It's also scaleable. If you resize it up to 500px there will be no quality loss, because it's rendered on the client machine.

However, if you have content that can't be described in the SVG language, such as raster (pixel grid) images such as jpegs or pngs, or video, it can't just describe it, it has to embed the raster into the output, meaning that SVG will not be any more efficient than just using an <img> or <video> element.

PNG sequences are great as a lossless intermediate for transferring video on a local machine with lots of storage, they completely fail as a web codec. Web codecs are highly efficient at reducing file size with minimal perceptible quality loss, so they're what you need for the flux output.

TL;DR as Florian says: use h.264 encoded video.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.