Complete MIME Types Reference for Web Development

MIME types (Multipurpose Internet Mail Extensions) tell browsers and servers what type of data is being transmitted. This comprehensive guide covers all common MIME types used in web development, APIs, and file handling.

Table of Contents

1. What Are MIME Types?
2. MIME Type Structure
3. Common MIME Types by Category
4. Using MIME Types in HTTP
5. MIME Types for APIs
6. File Upload MIME Types
7. Setting MIME Types

What Are MIME Types?

MIME types (also called Media Types or Content Types) are standard identifiers that describe the nature and format of a file or data stream. They tell the browser or application how to process the content.

Format: type/subtype

Example: text/html

• text = Type (category)
• html = Subtype (specific format)

Why MIME Types Matter

• Browsers use them to know how to display content
• Servers use them to set proper HTTP headers
• APIs use them to specify request/response formats
• File uploads use them to validate file types
• Email clients use them to handle attachments

MIME Type Structure

Basic Structure

type/subtype

Examples:
text/html
application/json
image/png

With Parameters

type/subtype; parameter=value

Examples:
text/html; charset=UTF-8
application/json; charset=utf-8
multipart/form-data; boundary=something

Common Parameters

Common MIME Types by Category

Text Types

<!-- Serving HTML -->
Content-Type: text/html; charset=UTF-8

<!-- Serving CSS -->
Content-Type: text/css

<!-- Serving plain text -->
Content-Type: text/plain; charset=UTF-8

Application Types

Image Types

<!-- Serving images -->
Content-Type: image/jpeg
Content-Type: image/png
Content-Type: image/svg+xml
Content-Type: image/webp

Video Types

Audio Types

Font Types

Multipart Types

Using MIME Types in HTTP

Content-Type Header (Response)

HTTP/1.1 200 OK
Content-Type: application/json; charset=utf-8
Content-Length: 82

{"message": "Success", "data": {"id": 1, "name": "John"}}

Setting in Different Servers

Node.js (Express):

app.get('/api/data', (req, res) => {
  res.type('application/json');
  res.json({ message: 'Success' });
});

// Or set explicitly
res.set('Content-Type', 'application/json; charset=utf-8');
res.send(JSON.stringify({ message: 'Success' }));

// Serving HTML
res.type('text/html');
res.send('<h1>Hello World</h1>');

// Serving PDF
res.type('application/pdf');
res.sendFile('/path/to/document.pdf');

PHP:

<?php
// JSON
header('Content-Type: application/json; charset=utf-8');
echo json_encode(['message' => 'Success']);

// HTML
header('Content-Type: text/html; charset=utf-8');
echo '<h1>Hello World</h1>';

// PDF download
header('Content-Type: application/pdf');
header('Content-Disposition: attachment; filename="document.pdf"');
readfile('document.pdf');
?>

Python (Flask):

from flask import Flask, jsonify, send_file

app = Flask(__name__)

@app.route('/api/data')
def get_data():
    # Flask automatically sets application/json
    return jsonify({'message': 'Success'})

@app.route('/pdf')
def get_pdf():
    return send_file('document.pdf', mimetype='application/pdf')

@app.route('/custom')
def custom_type():
    response = make_response('<h1>Hello</h1>')
    response.headers['Content-Type'] = 'text/html; charset=utf-8'
    return response

Nginx:

location ~ \\.pdf$ {
    types { application/pdf pdf; }
}

location ~ \\.json$ {
    types { application/json json; }
    charset utf-8;
}

location ~ \\.js$ {
    types { application/javascript js; }
}

Apache (.htaccess):

# Set MIME types
AddType application/json .json
AddType application/javascript .js
AddType image/webp .webp
AddType font/woff2 .woff2

# Set charset
AddDefaultCharset UTF-8

Accept Header (Request)

GET /api/users HTTP/1.1
Host: example.com
Accept: application/json, text/plain, */*
Accept-Language: en-US,en;q=0.9
Accept-Encoding: gzip, deflate, br

// Fetch API
fetch('/api/users', {
  headers: {
    'Accept': 'application/json'
  }
});

// Axios
axios.get('/api/users', {
  headers: {
    'Accept': 'application/json'
  }
});

// Requesting specific format
fetch('/api/users', {
  headers: {
    'Accept': 'application/xml'  // Request XML instead of JSON
  }
});

MIME Types for APIs

REST API Common Types

// JSON (most common)
fetch('/api/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  },
  body: JSON.stringify({ name: 'John', email: 'john@example.com' })
});

// XML
fetch('/api/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/xml',
    'Accept': 'application/xml'
  },
  body: '<user><name>John</name><email>john@example.com</email></user>'
});

// Form data (URL encoded)
fetch('/api/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  body: 'name=John&email=john@example.com'
});

Content Negotiation

// Server-side (Express)
app.get('/api/users', (req, res) => {
  res.format({
    'application/json': () => {
      res.json({ users: [...] });
    },
    'application/xml': () => {
      res.type('application/xml');
      res.send('<users>...</users>');
    },
    'text/html': () => {
      res.render('users', { users: [...] });
    },
    'default': () => {
      res.status(406).send('Not Acceptable');
    }
  });
});

API-Specific MIME Types

# JSON API specification
Content-Type: application/vnd.api+json

# HAL (Hypertext Application Language)
Content-Type: application/hal+json

# GitHub API
Content-Type: application/vnd.github.v3+json

# Custom vendor types
Content-Type: application/vnd.mycompany.myapi.v1+json

File Upload MIME Types

Multipart Form Data

<!-- HTML form for file upload -->
<form action="/upload" method="POST" enctype="multipart/form-data">
  <input type="file" name="avatar" accept="image/*">
  <input type="file" name="document" accept=".pdf,.doc,.docx">
  <button type="submit">Upload</button>
</form>

// JavaScript file upload
const formData = new FormData();
formData.append('avatar', fileInput.files[0]);
formData.append('name', 'John Doe');

fetch('/upload', {
  method: 'POST',
  body: formData
  // Don't set Content-Type header - browser sets it automatically with boundary
});

// Server receives:
// Content-Type: multipart/form-data; boundary=----WebKitFormBoundary...

Accept Attribute for File Inputs

<!-- Images only -->
<input type="file" accept="image/*">
<input type="file" accept="image/png, image/jpeg">

<!-- Documents -->
<input type="file" accept=".pdf">
<input type="file" accept=".doc,.docx,application/msword">

<!-- Audio -->
<input type="file" accept="audio/*">
<input type="file" accept="audio/mp3,audio/wav">

<!-- Video -->
<input type="file" accept="video/*">
<input type="file" accept="video/mp4,video/webm">

<!-- Specific types -->
<input type="file" accept=".json,application/json">
<input type="file" accept=".csv,text/csv">

Validating File Types Server-Side

// Express with Multer
const multer = require('multer');

const upload = multer({
  fileFilter: (req, file, cb) => {
    const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
    
    if (allowedTypes.includes(file.mimetype)) {
      cb(null, true);
    } else {
      cb(new Error('Invalid file type. Only JPEG, PNG and GIF are allowed.'));
    }
  }
});

app.post('/upload', upload.single('avatar'), (req, res) => {
  res.json({
    message: 'File uploaded',
    filename: req.file.filename,
    mimetype: req.file.mimetype
  });
});

Setting MIME Types

In HTML

<!-- Link stylesheet -->
<link rel="stylesheet" href="styles.css" type="text/css">

<!-- JavaScript -->
<script src="app.js" type="application/javascript"></script>

<!-- Modern modules -->
<script src="app.js" type="module"></script>

<!-- Images -->
<img src="photo.jpg" type="image/jpeg">

<!-- Video -->
<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

<!-- Audio -->
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
</audio>

In HTTP Headers

# Response headers
HTTP/1.1 200 OK
Content-Type: application/json; charset=utf-8
Content-Length: 82

# Download with filename
HTTP/1.1 200 OK
Content-Type: application/pdf
Content-Disposition: attachment; filename="document.pdf"

# Inline display
HTTP/1.1 200 OK
Content-Type: application/pdf
Content-Disposition: inline

Common MIME Type Issues

Issue 1: Wrong MIME Type Causes Download

# ❌ Wrong - Browser tries to download
Content-Type: application/octet-stream

# ✅ Correct - Browser displays
Content-Type: text/html

Issue 2: Missing Charset

# ❌ Can cause encoding issues
Content-Type: text/html

# ✅ Always specify charset for text
Content-Type: text/html; charset=utf-8

Issue 3: Incorrect JavaScript MIME Type

<!-- ❌ Deprecated -->
<script type="text/javascript">

<!-- ✅ Modern -->
<script type="application/javascript">

<!-- ✅ Best - default, can be omitted -->
<script>

Issue 4: API Returning Wrong Type

// ❌ Wrong Content-Type for JSON
res.set('Content-Type', 'text/plain');
res.send(JSON.stringify({ data: 'value' }));

// ✅ Correct
res.set('Content-Type', 'application/json; charset=utf-8');
res.send(JSON.stringify({ data: 'value' }));

// ✅ Better - Express helper
res.json({ data: 'value' });

Quick Reference

Most Common MIME Types

MIME Type by File Extension

const mimeTypes = {
  '.html': 'text/html',
  '.css': 'text/css',
  '.js': 'application/javascript',
  '.json': 'application/json',
  '.xml': 'application/xml',
  '.pdf': 'application/pdf',
  '.zip': 'application/zip',
  '.jpg': 'image/jpeg',
  '.jpeg': 'image/jpeg',
  '.png': 'image/png',
  '.gif': 'image/gif',
  '.svg': 'image/svg+xml',
  '.webp': 'image/webp',
  '.mp4': 'video/mp4',
  '.webm': 'video/webm',
  '.mp3': 'audio/mpeg',
  '.wav': 'audio/wav',
  '.woff': 'font/woff',
  '.woff2': 'font/woff2',
  '.ttf': 'font/ttf',
  '.txt': 'text/plain',
  '.csv': 'text/csv',
  '.md': 'text/markdown'
};

Summary

MIME types are essential for proper content delivery on the web. Always use the correct MIME type, include charset for text content, and validate file types server-side for security.

Key Takeaways:

✅ MIME types follow the format type/subtype
✅ Use application/json for API responses
✅ Always include charset=utf-8 for text content
✅ Use multipart/form-data for file uploads
✅ Validate MIME types server-side for security
✅ Set proper Content-Type headers in HTTP responses
✅ Use Accept headers to request specific formats

Related Guides

• HTTP Status Codes Complete Guide
• Understanding Content-Type Headers
• API Response Codes Best Practices
• Browse All MIME Types →