MIME Types Reference

What a MIME type is

A media type — still universally called a MIME type after its origin in email standards — tells the recipient how to interpret a stream of bytes. It arrives in the Content-Type header:

Content-Type: text/html; charset=utf-8
Content-Type: application/json
Content-Type: image/webp

The format is type/subtype plus optional parameters. Nine top-level types are registered: text, image, audio, video, application, font, model, multipart and message.

Getting it right is not cosmetic. A stylesheet served as text/plain is ignored by browsers in standards mode. A JavaScript module served with the wrong type fails to load. A WebAssembly file must be exactly application/wasm for streaming compilation to work.

Common media types

MIME sniffing and why it is dangerous

When a browser distrusts or lacks a Content-Type it may guess by inspecting the bytes. That behaviour, called MIME sniffing, is a security hole: a file uploaded as .txt containing HTML and script can be sniffed as text/html and executed in your origin.

The fix is one header:

X-Content-Type-Options: nosniff

It tells browsers to trust the declared type absolutely. Combined with correct types on every response it eliminates the whole class of attack.

The charset parameter

charset only applies to text types, and only three cases matter:

• HTML: always send text/html; charset=utf-8. The HTTP header takes precedence over the <meta charset> tag, so a wrong header overrides correct markup.
• JSON: never send a charset. RFC 8259 mandates UTF-8 and the parameter is undefined for application/json.
• CSS and JavaScript: charset is permitted and harmless; UTF-8 is the sane default.

Encoding mismatches here are the most common cause of mojibake in production. If text is garbled, check the response header before touching the file — the encoding guide walks through the diagnosis.

Choosing image formats in 2026

Serve several and let the browser pick:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" width="1600" height="900" alt="...">
</picture>

Always set width and height — see the aspect ratio calculator for why.

Frequently Asked Questions