What is a MIME Type? Content-Type Headers, Extensions, and Browser Behaviour

Core Concepts

The Content-Type header

Every HTTP response carries a Content-Type header like Content-Type: text/html; charset=utf-8 or Content-Type: application/json. The browser reads this header to decide what to do with the bytes: render a page, parse JSON, display an image, or trigger a download. A wrong Content-Type is the #1 reason 'my image is downloading instead of displaying' or 'my JSON is showing as text.'

The type/subtype structure

MIME types follow the pattern type/subtype. The type is the top-level category: text (HTML, CSS, CSV), image (PNG, JPEG, SVG), audio (MP3, WAV), video (MP4, WebM), application (JSON, XML, PDF, WASM), font (WOFF2, WOFF), multipart (form-data, byteranges). The subtype specifies the exact format.

File extensions vs MIME types

File extensions (.jpg, .html, .json) are hints — the browser doesn't trust them for rendering decisions. The Content-Type header is authoritative. Renaming a .json file to .html doesn't make the browser render it as HTML; it still reads the server's Content-Type response header. This is why GitHub raw can serve YAML files that display as text even though the file extension is .yml.

Common pitfalls: wrong Content-Types

Serving JavaScript (.js) as text/plain instead of application/javascript makes the browser treat it as plain text — scripts won't execute. Serving CSS as text/plain means styles won't apply. Serving SVG as application/octet-stream triggers a download instead of inline rendering. X-Content-Type-Options: nosniff is a security header that tells browsers to trust only the Content-Type and ignore file signatures.

Frequently Asked Questions