Embed images in Lottie JSON
Add Lottie JSON and the required images, and embed the selected animation's images into one JSON file. .lottie and ZIP files can also be loaded. Resolve references, check the motion of the created animation, and deliver it as JSON containing images.
What you can do
Put images inside JSON
Replace references to external files with image data to create Lottie JSON containing images.
Match references to images
Check the assets required by the animation. Add missing images and choose which assets to use if there are candidates with the same name.
Check the created file
Check images and motion in a preview that reloads the JSON after embedding, then save it.
How to use
Add JSON and the required images
Add Lottie JSON and the images it references. Preserving the folder structure when adding them makes it easier to check how they match the references.
Check the target and image mappings
Select the target animation and check the status of referenced images. Resolve missing assets and multiple candidates.
Create JSON with embedded images
Once all references are resolved, select “Create JSON”. This feature does not replace images with different ones or automatically generate images.
Check the result preview and save
Check the display of the created JSON and download it. Changing the speed or background for inspection does not change the JSON you save.
Useful for
Deliver an animation with images in one file
Include the required images inside JSON to share it when you want to reduce the risk of forgetting to send separate images.
Bundle external image references
Prepare a file with referenced images embedded to avoid broken relative image paths at the destination.
Image embedding and file formats
From external references to data URIs
Normally, image paths or file names are referenced. When embedding, the JSON includes data representing images as strings.
Embedding does not reduce file size
Base64 makes image data approximately 4/3 of its original size. JSON containing images is larger than the original JSON, so also check the file size after saving.
JSON embedding and .lottie bundling
This screen includes image data in one JSON file. .lottie bundles JSON and assets into a compressed package. Choose based on the formats accepted by the destination.
Frequently asked questions
Does embedding images increase the file size?
Yes. Image data is added to the original JSON and represented in Base64, so the file usually becomes larger. This is not an image compression feature for reducing file size.
How does this differ from packaging as .lottie?
The output differs. This screen creates JSON containing images, while Package Lottie with images creates a .lottie file with bundled assets. Choose based on the formats supported by your app or library.
What happens if referenced images are missing?
You need to add the missing assets. If there are multiple candidates with the same name, choose the file to use. JSON cannot be created until the required references are resolved.
Are images fetched automatically from image URLs?
Images are not automatically fetched from external image URLs. Add the required assets from your local files and check the corresponding references.
Are the original JSON or images changed?
The original files are not overwritten. A new JSON file is saved. After changing the target or asset mappings, create it again.
Can every Lottie be converted to JSON?
Input must be loadable as Lottie, with all required assets resolved. This screen cannot create output from input containing extensions that cannot be carried over, such as themes or interactive states.
Input and results
- Input
- Lottie JSON and the required local images. .lottie and ZIP files can also be loaded. This feature does not turn general JSON into video.
- Output
- One selected animation. JSON with its referenced image data embedded.
- Check
- Save once the generated output's preview is available. Recreate after adding assets or changing mappings.