How to Choose the Right MIME Type
A MIME type tells the browser what a response contains, in the form type/subtype — text/html, image/png, application/json. It comes from the Content-Type header, and the header wins over the file extension. Most rendering problems are a mismatch: a file served as text/plain or application/octet-stream downloads instead of displaying.
MIME Type Lookup
Find the MIME type for any file extension, and back.
The browser does not decide what a file is by looking at its name. It reads the Content-Type header, and if that header is wrong the extension will not save you — a stylesheet served as text/plain is ignored no matter what it is called.
This is deliberate. Trusting the extension, or sniffing the content, is how servers get tricked into treating an uploaded image as a script, which is why the header is authoritative and why nosniff exists.
Step by step
-
Match the type to the actual content
Use application/json for JSON, text/css for stylesheets, application/javascript for scripts, image/svg+xml for SVG. Guessing from the extension is usually right, but a generated response has no extension to guess from.
-
Add a charset for text types
Write text/html; charset=utf-8. Without it the browser guesses the encoding, which is how accented characters turn into mojibake. Binary types do not take a charset, and application/json is always UTF-8 by specification.
-
Use octet-stream only when you mean download
application/octet-stream means unknown binary and prompts a download. It is correct for an actual file download and wrong as a default, because it makes every previewable file unpreviewable.
-
Control the disposition separately
Whether a file displays or downloads is Content-Disposition, not the MIME type. Send inline to display and attachment to download. Using the wrong MIME type to force a download works, but breaks the file for anything else consuming it.
-
Send X-Content-Type-Options: nosniff
This stops the browser overriding your header by inspecting the bytes. Sniffing is a real security problem for user uploads, since a file that looks like a script may be treated as one. With nosniff, the header you send is the one that applies.
Example
The same JSON response with a wrong and a right Content-Type.
Wrong
Content-Type: text/plain
browsers show raw text
fetch().json() still works
some proxies mangle encoding
Right
Content-Type: application/json; charset=utf-8
browsers render a JSON viewer
tools recognise the payload
encoding is unambiguous
Frequently asked questions
What is a MIME type?
Why does my file download instead of displaying?
Does the file extension matter?
Should I use application/javascript or text/javascript?
What does the charset parameter do?
Tools used in this guide
All tools →- MIME Type Lookup Find the MIME type for any file extension, and back. In your browser
- HTTP Header Checker Inspect the response headers and status a URL returns. Server-side
- HTTP Header Parser Turn a raw header block into a readable table. In your browser
- Data URI Encoder Turn an SVG or snippet into an embeddable data: URI. In your browser
Related guides
All guides →- How to Debug an API Request Work through a failing request in order, from the status code to the payload.
- How to Fix Broken Characters in Text Diagnose mojibake, question marks and invisible characters, and repair the text.
- How to Check HTTP Redirects Trace a URL through every hop to its destination, and tell a permanent redirect from a temporary one.
Last reviewed .