What is MIME type "image/x-lottie+json"?

A MIME type is a string that tells browsers and other tools how to handle a particular kind of file.

image/x-lottie+json is a MIME type for a compact, vector-based animation format.
It encodes animation data in an JSON structure. This means the file follows a text-based layout that is easy to parse and modify.
Files with this MIME type are often saved with the JSON or LOT extension.

Lightweight animations: Useful for interactive designs on websites and apps.
Web integration: Can be embedded directly into modern web applications.
Mobile applications: Offers smooth and scalable animations that are ideal for mobile devices.
Efficient file sizes: The JSON structure keeps file sizes small while maintaining visual quality.

Developers prefer this format to create high-quality, design-rich experiences without heavy resource use.
For more background on these animations, visit Lottie by Airbnb.

Associated file extensions

.json, .lot

Usage Examples

HTTP Header

When serving content with this MIME type, set the Content-Type header:


    Content-Type: image/x-lottie+json

HTML

In HTML, you can specify the MIME type in various elements:


    <a href="file.dat" type="image/x-lottie+json">Download file</a>

Server-side (Node.js)

Setting the Content-Type header in Node.js:


    const http = require('http');    
    
    http.createServer((req, res) => {    
      res.setHeader('Content-Type', 'image/x-lottie+json');    
      res.end('Content here');    
    }).listen(3000);

Associated file extensions

.json, .lot

FAQs

What is the purpose of the image/x-lottie+json MIME type?

This MIME type identifies Lottie animation files, which are lightweight, scalable vector animations encoded in JSON format. Unlike raster images, these files describe shapes and movements using text data, making them ideal for high-quality animations on the web and mobile apps without large file sizes.

Should I use application/json or image/x-lottie+json?

While application/json is the standard MIME type for any .json file, using image/x-lottie+json helps distinguish animation assets from standard data APIs. However, most web servers serve these files as application/json by default, and Lottie players accept both types without issues.

Can I use this MIME type directly in an HTML <img> tag?

No, browsers do not natively render JSON text as an image inside a standard <img> tag. To display content served as image/x-lottie+json, you must use a JavaScript library (like lottie-web) or a specific web component like <lottie-player> to parse and render the animation.

How do I configure Apache to serve this MIME type?

To associate this MIME type with specific files, you can modify your .htaccess or server config. Use the directive AddType image/x-lottie+json .lot to map the extension, or use <FilesMatch "\.json$"> blocks if you need to override the default JSON type for specific animation files.

How do I add support for image/x-lottie+json in Nginx?

You can add the type definition to your mime.types file, usually located in /etc/nginx/. Add the line image/x-lottie+json lot; to ensure files with the .lot extension are served correctly. For .json files, Nginx usually defaults to application/json unless specifically overridden in a location block.

Why is this format preferred over GIF or MP4?

Lottie files are resolution-independent, meaning they look sharp on any screen size without pixelation, unlike GIFs. They are also significantly smaller in file size than video formats like MP4 and allow for programmatic interaction (e.g., changing colors or speed) at runtime.

What common file extensions are used with this MIME type?

The most common extension is .json, as the file content is valid JSON text. However, the extension .lot is sometimes used specifically to indicate that the file is a Lottie animation rather than a generic configuration file.

General FAQ

What is a MIME type?

A MIME (Multipurpose Internet Mail Extensions) type is a standard that indicates the nature and format of a document, file, or assortment of bytes. MIME types are defined and standardized in IETF's RFC 6838.

MIME types are important because they help browsers and servers understand how to process a file. When a browser receives a file from a server, it uses the MIME type to determine how to display or handle the content, whether it's an image to display, a PDF to open in a viewer, or a video to play.

MIME types consist of a type and a subtype, separated by a slash (e.g., text/html, image/jpeg, application/pdf). Some MIME types also include optional parameters.

How do I find the MIME type for a file?

You can check the file extension or use a file identification tool such as file --mime-type on the command line. Many programming languages also provide libraries to detect MIME types.

Why are multiple MIME types listed for one extension?

Different applications and historical conventions may use alternative MIME identifiers for the same kind of file. Showing them all helps ensure compatibility across systems.