Convert lottie animation into WEBP (animated)

This is an online Lottie to WEBP converter online. Upload your lottie json and provide us with a few details. This could take 2 to 3 minutes, depending on the length and dimension. The maximum conversion length is 60 seconds. Horizontal 1920(width)x1080(height) or Vertical 1080(width)x1920(height) are the maximum supported dimensions.

Upload json file of your lottie animation. (For example, abc.json)
OR
Upload the zip file. It should include a json file in addition to its assets (such as photos, manifest.json, and so on).

OR

Enter url of lottie json. (For example: https://yourserver/..../abc.json).

Please Note: If you have included lottie animation/json within the html/web page, choose the "HTML5 to WEBP" option.

Select Advance Options

Specify to the lottie-player how the animation should render on the page. You can render it with SVG or CANVAS.


Try changing the 'lottie-player renderer' or 'Background color' if you don't see the preview in the top window after selecting your content.

Check this box to create a WEBP with a transparent background.

Choose the number of loops for the output webp.

Enter the animation's duration in seconds.

Please keep in mind that if your creative includes a loop/iteration, you must enter the duration of the single/first loop. For example, if you want to run an animation for 30 seconds with each iteration lasting 5 seconds, enter 5 as the duration and 6 from the 'loop' drop down.

Enter the width for output between 30 and 1920.

Enter the height for output between 30 and 1920.

Select compression level.

Select frames per second. WEBP file size is determined by FPS. Lower FPS means smaller file size.

Two steps: The tool will extract photos from your svg animation for the length given. It will prompt you to select the Start and End frames (essentially the range to appropriately chop it) before generating the final result. If you are a new user, choose this option.

One Step: In this step, the tool will generate the final output directly till the duration limit is reached. It is only for experienced users.

Modern Appoach
5,000,00+ conversions

Guaranteed, smooth video at 60 fps with good quality from your HTML5 animation.

Best Relationship
15,000+ website users

Contact us immediately if you have a question in mind.

Ultimate tool
50+ API clients

We have created our own unique video rendering engine which make video as smooth as the animations in your html5 creative.

Frequently Asked Questions

  • What is the maximum length for turning lottie animation into a WEBP?

  • The maximum supported length is 120 seconds.

  • What are the differences between the web HTML, SVG, and Canvas rendered?

  • Technically, lottie-player only renders either in an SVG (HTML or SVG DOM element) or a Canvas element. When using SVG to render animations, all the SVG content is added to the SVG DOM element and can be seen when viewing the source code of the web page. On the other hand, when using canvas to render animations, the animation content is drawn onto the canvas surface, leaving the HTML DOM untouched and uncluttered. SVG does support more of the Lottie features, however, the drawback of SVG is that the changes made to the HTML DOM incurs performance penalties.This is why Canvas is more performant, even though lottie-player only renders to Canvas in 2dContext (less features supported).

  • What is WEBP (animated)?

  • WebP is a raster graphics file format developed by Google intended as a replacement for JPEG, PNG, and GIF file formats. It supports both lossy and lossless compression as well as animation and alpha transparency.

  • Can I lower the size of a WEBP file?

  • Yes, you should set lower value for frames per second.

  • Is it possible to modify the background colour?

  • Yes, select "Select Background" or enter the custom (HEX) code in the input box. For example, #000000 represents black and #FFFFFF represents white.

  • Is it feasible to export Lottie animation with specific frame rate?

  • Yes, select the option "Frames per second (FPS)". This option allows to control frame rate or speed. Higher frame rate results smooth animation.

  • Is it feasible to export Lottie animation as a transparent WEBP?

  • Yes, select the option "Make Background Transparent*". WEBP provides both 24-bit colour and 24-bit transparency, allowing for high-quality animation with a transparent background.

  • Is WEBP a lossy or lossless format?

  • WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster. WebP lossless images are 26% smaller in size compared to PNGs.

  • Is WEBP more compact than GIF?

  • The differences between GIF and WebP lies in their quality: WebP offers the same quality as GIF at a smaller file size, so it is definitely the better option. However, GIF seems more widely known and supported.

  • What if my conversion becomes stuck for an extended period of time?

  • You should double-check it by refreshing the browser. If the record's progress does not change, you should try again with a fresh job.