Understanding MIME Types: How File Extensions Map to the Web

How MIME Types and File Extensions Work Together

When a web server delivers a file, it doesn't rely on the file extension to tell the browser what the content is. Instead, it sends a Content-Type header containing a MIME type (Multipurpose Internet Mail Extensions). The browser uses this MIME type — not the extension — to decide how to process the response.

File extensions are a convenience for humans and operating systems. MIME types are the mechanism the web actually uses.

Anatomy of a MIME Type

A MIME type has two parts separated by a slash: a type and a subtype.

type/subtype

Common top-level types:

Type	Description	Examples
text	Human-readable text	text/html, text/css, text/plain
image	Image data	image/png, image/jpeg, image/webp
audio	Audio data	audio/mpeg, audio/ogg, audio/flac
video	Video data	video/mp4, video/webm
application	Binary data or structured formats	application/json, application/pdf, application/zip
font	Font data	font/woff2, font/woff, font/ttf
multipart	Multi-part messages	multipart/form-data

Extension-to-MIME Mapping

Web servers maintain a mapping from file extensions to MIME types. When a request arrives for /report.pdf, the server looks up .pdf and returns Content-Type: application/pdf.

Common mappings:

Extension	MIME Type
.html	text/html
.css	text/css
.js	text/javascript
.json	application/json
.png	image/png
.jpg / .jpeg	image/jpeg
.webp	image/webp
.avif	image/avif
.svg	image/svg+xml
.mp4	video/mp4
.webm	video/webm
.woff2	font/woff2
.pdf	application/pdf
.zip	application/zip

The Content-Type Header

The Content-Type header may include additional parameters. The most common is charset for text types:

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

Binary formats (images, audio, video, fonts) do not need a charset parameter.

MIME Sniffing

Browsers can attempt to detect content type by examining the file contents — a practice called MIME sniffing. This is a security risk: an attacker could upload a file with a .jpg extension that actually contains HTML with JavaScript.

To prevent MIME sniffing, set this header:

X-Content-Type-Options: nosniff

With nosniff set, browsers will only use the declared MIME type. This is a standard security header and should be set on all responses.

Common Mistakes

Wrong MIME type for JavaScript

The correct MIME type for JavaScript is text/javascript. While application/javascript was used historically, the IETF deprecated it in 2022 (RFC 9239). Some servers still default to application/x-javascript — this is non-standard.

Missing MIME types for modern formats

Servers may not recognise newer extensions like .avif, .woff2, or .webp. If your server returns application/octet-stream for these files, browsers cannot handle them correctly. Check your server configuration or CDN settings.

SVG served as text/xml

SVG files should be served as image/svg+xml, not text/xml or application/xml. The wrong type can affect how browsers render the image and may trigger security restrictions.

Server Configuration Examples

Nginx

# /etc/nginx/mime.types additions
types {
    image/avif  avif;
    font/woff2  woff2;
    font/woff   woff;
    application/manifest+json  webmanifest;
}

Apache (.htaccess)

AddType image/avif .avif
AddType font/woff2 .woff2
AddType font/woff .woff
AddType application/manifest+json .webmanifest

Cloudflare Pages

Cloudflare Pages handles MIME types automatically for most formats. Custom types can be set via _headers file or Worker middleware.

MIME Types in Form Submissions

HTML forms use MIME types for the enctype attribute:

application/x-www-form-urlencoded — default, encodes form data as key=value pairs
multipart/form-data — required for file uploads, sends each field as a separate part
text/plain — rarely used, sends data with minimal encoding

Content Negotiation in APIs

REST APIs use MIME types for content negotiation. The client sends an Accept header listing preferred types, and the server responds with a matching Content-Type:

# Client requests JSON
Accept: application/json

# Server responds
Content-Type: application/json; charset=utf-8

For APIs that support multiple formats (JSON, XML, CSV), the server inspects the Accept header and returns the most appropriate format.

Frequently Asked Questions

What happens if the MIME type is wrong?

Browsers may refuse to process the file. For example, a CSS file served as text/plain will not be applied as a stylesheet. A JavaScript file with the wrong type will not execute in strict mode.

Where does the MIME type database come from?

The Internet Assigned Numbers Authority (IANA) maintains the official registry at iana.org/assignments/media-types. Server software includes its own mapping files (e.g., Nginx's mime.types).

What is application/octet-stream?

It is the generic binary MIME type. It means "unknown binary data". Browsers will typically offer to download files with this type rather than display them. If you see this type for files that should be displayed (images, fonts), your server configuration needs updating.