T
web http mime content-type server browser dev-tech file-extensions

MIME Types and Content-Type Complete Reference Guide

What is a MIME type and why is it important for web servers and browsers? A complete reference to common Content-Types like application/json, image/webp, and more.

2026-04-11

MIME Types and Content-Type Complete Reference Guide

Whenever your browser requests a file from a web server, the server doesn't just send the bits and bytes. It also sends a "label" that tells the browser what kind of file it is. This label is called a MIME Type (Multipurpose Internet Mail Extensions), and it's sent via the Content-Type HTTP header.

If the server sends the wrong MIME type, your browser might try to download a video instead of playing it, or it might refuse to execute a script for security reasons.

Quick Reference Table: Common MIME Types

MIME Type Common Extension Category Purpose
text/html .html, .htm Web Page Standard webpage content
text/css .css Styling Cascading Style Sheets
application/javascript .js Logic Web application scripts
application/json .json Data Structured data for APIs
application/xml .xml Data Extensible Markup Language
text/csv .csv Data Comma-Separated Values
image/webp .webp Media Modern compressed image format
image/avif .avif Media High-efficiency image format
font/woff2 .woff2 Font Modern web font format
application/wasm .wasm Compiled WebAssembly binary code
application/octet-stream .bin, .exe Binary Generic binary data (usually triggers download)
multipart/form-data N/A Upload Used for submitting forms with file uploads

1. Structured Data and APIs

Modern web applications rely heavily on these types to exchange information between the frontend and the backend.

  • application/json: The industry standard for REST APIs. It is lightweight and natively supported by JavaScript.
  • application/xml: An older but more powerful format that supports custom schemas and complex validation.
  • text/csv: Frequently used for exporting large data sets from databases or spreadsheets.

2. Media and Assets

To ensure fast load times, servers must correctly identify modern, high-compression media formats.

  • image/webp & image/avif: These modern formats offer much better compression than JPEG or PNG. If your server doesn't send the correct MIME type, the browser might fail to render the image properly.
  • font/woff2: Essential for web typography. Correct MIME typing ensures the browser can decompress the font quickly.

3. Specialized and Binary Data

  • application/wasm: This is required for WebAssembly to work. Browsers are very strict—they will often refuse to compile a WASM module if the server doesn't explicitly send the application/wasm Content-Type.
  • application/octet-stream: This is the "catch-all" for binary data. If a server doesn't know what a file is, it usually defaults to this. Browsers treat this as a signal to download the file rather than trying to display it.

4. Forms and Uploads

When you submit a form on a website, the browser uses a specific MIME type to encode your input.

  • application/x-www-form-urlencoded: The default for simple text-based forms. It looks like a URL query string (name=John&age=30).
  • multipart/form-data: This is required when your form includes a file upload. It allows the browser to send different types of data (text and binary files) in a single request, separated by "boundaries."

How to Check the MIME Type of a File

  • In the Browser: Open DevTools -> Network tab. Click on a request and look for "Content-Type" under the Response Headers section.
  • On Linux / macOS: Use the file command with the --mime-type flag:
    file --mime-type -b my-image.webp
# Output: image/webp

Common Questions (FAQ)

Q: What happens if a server sends the wrong Content-Type?

A: Browsers often perform "MIME Sniffing" to try and guess the correct type. However, for security reasons (like protecting against XSS), modern browsers are becoming much stricter. If a script is sent with text/plain instead of application/javascript, most browsers will refuse to execute it.

Q: Is application/javascript the only correct type for JS files?

A: Historically, people used text/javascript or application/x-javascript. While application/javascript was once the formal recommendation, the latest standard has actually moved back towards preferring text/javascript. Most servers and browsers handle both fine.

Q: Why do I get a "No 'Content-Type' header" error?

A: This means the server didn't provide any information about the file type. Browsers will usually default to text/plain or application/octet-stream, which might cause your page to render incorrectly or trigger an unwanted download.

Related Tools on Tool3M

  • Base64 Encoder/Decoder: Convert binary data into a Data URI (which includes the MIME type) for use in HTML or CSS.
  • JSON Formatter: Validate and format your application/json data.
Back to Blog