MIME Types Complete Reference

MIME (Multipurpose Internet Mail Extensions) types tell browsers how to handle files. They're also called media types or content types.

What is a MIME Type?

Format: type/subtype

text/html
application/json
image/png
audio/mpeg
video/mp4

Common MIME Types

Text

| Type | Extension | Description | |------|-----------|-------------| | text/plain | .txt | Plain text | | text/html | .html | HTML document | | text/css | .css | Stylesheet | | text/javascript | .js | JavaScript | | text/csv | .csv | CSV data |

Image

| Type | Extension | Description | |------|-----------|-------------| | image/png | .png | PNG image | | image/jpeg | .jpg, .jpeg | JPEG image | | image/gif | .gif | GIF image | | image/svg+xml | .svg | SVG image | | image/webp | .webp | WebP image |

Application

| Type | Extension | Description | |------|-----------|-------------| | application/json | .json | JSON data | | application/xml | .xml | XML data | | application/pdf | .pdf | PDF document | | application/zip | .zip | ZIP archive | | application/javascript | .js | JavaScript |

Audio/Video

| Type | Extension | Description | |------|-----------|-------------| | audio/mpeg | .mp3 | MP3 audio | | audio/wav | .wav | WAV audio | | video/mp4 | .mp4 | MP4 video | | video/webm | .webm | WebM video |

Using MIME Types

In HTTP Headers

// Server response
res.setHeader('Content-Type', 'application/json');

// Serving files
const mimeTypes = {
  '.html': 'text/html',
  '.css': 'text/css',
  '.js': 'application/javascript',
  '.json': 'application/json'
};

In HTML

// Link stylesheet
<link rel="stylesheet" href="style.css">

// Script tag
<script src="app.js"></script>

// Specify type
<script type="module" src="module.js"></script>

In Forms

<!-- Default: application/x-www-form-urlencoded -->
<form method="POST" action="/submit">

<!-- File upload: multipart/form-data -->
<form method="POST" enctype="multipart/form-data">
  <input type="file" name="document">
</form>

Detecting MIME Type

// From file extension
function getMimeType(filename) {
  const ext = filename.split('.').pop().toLowerCase();
  const types = {
    'html': 'text/html',
    'css': 'text/css',
    'js': 'application/javascript',
    'json': 'application/json',
    'png': 'image/png',
    'jpg': 'image/jpeg',
    'gif': 'image/gif',
    'pdf': 'application/pdf'
  };
  return types[ext] || 'application/octet-stream';
}

// From file (Node.js)
const FileType = require('file-type');
const type = await FileType.fromFile('document.pdf');
// { ext: 'pdf', mime: 'application/pdf' }

Custom MIME Types

// Node.js Express
const mimeTypes = {
  '.js': 'application/javascript',
  '.mjs': 'application/javascript',
  '.wasm': 'application/wasm'
};

express.static('.', {
  setHeaders: (res, path) => {
    const ext = path.extname(mimeTypes);
    if (ext) res.set('Content-Type', mimeTypes[ext]);
  }
});

Browser Behavior

// Content-Disposition: attachment - download file
res.setHeader('Content-Disposition', 'attachment; filename="file.pdf"');

// Content-Disposition: inline - display in browser
res.setHeader('Content-Disposition', 'inline; filename="image.png"');

Common Issues

1. Wrong MIME type

// Wrong - server might serve as text
res.setHeader('Content-Type', 'text/plain');

// Correct
res.setHeader('Content-Type', 'application/json');

2. Missing types

// Add common types in server config
// nginx: types { application/javascript js; }
// Apache: AddType application/javascript .js

Security Considerations

// Never trust user-provided filenames for MIME type
// Use file content detection instead

// Dangerous
const type = getMimeType(userFilename);

// Safer
const type = await FileType.fromBuffer(fileBuffer);

Conclusion

MIME types are essential for proper file handling. Use correct types in HTTP headers, HTML tags, and form submissions. Consider using libraries for detection.