๐Ÿ‹
Menu
Best Practice Beginner 1 min read 286 words

MIME Types and File Extensions Reference

Understand MIME types, file extension mapping, and content type headers for proper file handling on the web.

MIME Types and File Extensions

MIME types (Media Types) tell browsers and servers how to handle files. Incorrect MIME types cause downloads instead of rendering, security warnings, and broken functionality.

How MIME Types Work

A MIME type consists of a type and subtype: text/html, image/png, application/json. The type indicates the general category (text, image, audio, video, application). The subtype specifies the format. Servers send MIME types in the Content-Type HTTP header, and browsers use this (not the file extension) to determine how to handle the response.

Common MIME Type Mistakes

Serving JavaScript as text/javascript instead of application/javascript (though both work, the latter is the registered standard). Serving SVG as image/svg instead of image/svg+xml causes rendering failures. Missing charset for text types: text/html; charset=utf-8 is correct, text/html alone may default to Latin-1 in some browsers.

File Extension Mapping

Web servers map file extensions to MIME types via configuration (Apache's mime.types, Nginx's types block). If a new file type (.avif, .woff2, .webmanifest) isn't in the mapping, the server returns application/octet-stream, causing the browser to download rather than display the file. Update your server's MIME type configuration when deploying new file formats.

Security Implications

Browsers use MIME type sniffing to detect mismatches between the declared Content-Type and the actual file content. This can be exploited โ€” an attacker uploads a file with an innocent extension but malicious content. The X-Content-Type-Options: nosniff header prevents MIME sniffing, forcing the browser to respect the declared Content-Type.

API and Download Handling

For file download endpoints, set Content-Disposition: attachment; filename="report.pdf" along with the correct Content-Type. For inline display, use Content-Disposition: inline. JSON APIs should always return application/json, not text/plain, to enable proper parsing and security protections in browsers.

Related Tools

Related Formats

Related Guides