# MIME Types Cheatsheet — Common Content Types for Web Development

> Common MIME types for web development organized by category: text, image, audio, video, application, and font types with file extensions and usage notes.

- URL: https://www.browserutils.dev/cheatsheets/mime-types
- Published: 2026-03-21
- Updated: 2026-03-16

---

MIME types (Multipurpose Internet Mail Extensions), also called media types or content types, tell browsers and servers what kind of data is being transmitted. They appear in `Content-Type` headers, `<link>` and `<script>` tags, file upload handling, and API responses. Getting the MIME type wrong can cause files to download instead of display, or trigger security warnings.

The format is always `type/subtype`, optionally followed by parameters like `; charset=utf-8`.

## Text Types

| MIME Type | Extension(s) | Description |
|-----------|-------------|-------------|
| `text/html` | `.html`, `.htm` | HTML documents |
| `text/css` | `.css` | CSS stylesheets |
| `text/javascript` | `.js`, `.mjs` | JavaScript (preferred over `application/javascript`) |
| `text/plain` | `.txt` | Plain text |
| `text/csv` | `.csv` | Comma-separated values |
| `text/xml` | `.xml` | XML (when readable by humans) |
| `text/markdown` | `.md` | Markdown documents |
| `text/calendar` | `.ics` | iCalendar files |
| `text/tab-separated-values` | `.tsv` | Tab-separated values |
| `text/yaml` | `.yaml`, `.yml` | YAML documents |

Always include `charset=utf-8` for text types:
```
Content-Type: text/html; charset=utf-8
```

## Image Types

| MIME Type | Extension(s) | Description |
|-----------|-------------|-------------|
| `image/png` | `.png` | PNG images |
| `image/jpeg` | `.jpg`, `.jpeg` | JPEG images |
| `image/gif` | `.gif` | GIF images (static or animated) |
| `image/webp` | `.webp` | WebP images (modern, smaller files) |
| `image/avif` | `.avif` | AVIF images (best compression) |
| `image/svg+xml` | `.svg` | SVG vector graphics |
| `image/x-icon` | `.ico` | Favicons (legacy) |
| `image/vnd.microsoft.icon` | `.ico` | Favicons (official) |
| `image/bmp` | `.bmp` | Bitmap images |
| `image/tiff` | `.tiff`, `.tif` | TIFF images |
| `image/apng` | `.apng` | Animated PNG |

## Audio Types

| MIME Type | Extension(s) | Description |
|-----------|-------------|-------------|
| `audio/mpeg` | `.mp3` | MP3 audio |
| `audio/ogg` | `.ogg`, `.oga` | Ogg Vorbis audio |
| `audio/wav` | `.wav` | WAV audio |
| `audio/webm` | `.weba` | WebM audio |
| `audio/aac` | `.aac` | AAC audio |
| `audio/flac` | `.flac` | FLAC lossless audio |
| `audio/midi` | `.mid`, `.midi` | MIDI audio |
| `audio/opus` | `.opus` | Opus audio |

## Video Types

| MIME Type | Extension(s) | Description |
|-----------|-------------|-------------|
| `video/mp4` | `.mp4` | MP4 video |
| `video/webm` | `.webm` | WebM video |
| `video/ogg` | `.ogv` | Ogg video |
| `video/mpeg` | `.mpeg` | MPEG video |
| `video/quicktime` | `.mov` | QuickTime video |
| `video/x-msvideo` | `.avi` | AVI video |
| `video/x-matroska` | `.mkv` | Matroska video |
| `video/3gpp` | `.3gp` | 3GPP video |

## Application Types

| MIME Type | Extension(s) | Description |
|-----------|-------------|-------------|
| `application/json` | `.json` | JSON data |
| `application/xml` | `.xml` | XML data (machine-readable) |
| `application/pdf` | `.pdf` | PDF documents |
| `application/zip` | `.zip` | ZIP archives |
| `application/gzip` | `.gz` | Gzip compressed files |
| `application/x-tar` | `.tar` | Tar archives |
| `application/x-7z-compressed` | `.7z` | 7-Zip archives |
| `application/x-rar-compressed` | `.rar` | RAR archives |
| `application/octet-stream` | (any) | Binary data (generic download) |
| `application/x-www-form-urlencoded` | — | HTML form data (default encoding) |
| `application/ld+json` | `.jsonld` | JSON-LD (linked data / structured data) |
| `application/graphql` | `.graphql` | GraphQL queries |
| `application/wasm` | `.wasm` | WebAssembly binary |
| `application/manifest+json` | `.webmanifest` | Web app manifest |
| `application/rss+xml` | `.rss` | RSS feeds |
| `application/atom+xml` | `.atom` | Atom feeds |
| `application/xhtml+xml` | `.xhtml` | XHTML documents |
| `application/sql` | `.sql` | SQL scripts |
| `application/toml` | `.toml` | TOML configuration |
| `application/vnd.api+json` | — | JSON:API responses |

## Office Document Types

| MIME Type | Extension | Description |
|-----------|-----------|-------------|
| `application/vnd.openxmlformats-officedocument.wordprocessingml.document` | `.docx` | Word document |
| `application/vnd.openxmlformats-officedocument.spreadsheetml.sheet` | `.xlsx` | Excel spreadsheet |
| `application/vnd.openxmlformats-officedocument.presentationml.presentation` | `.pptx` | PowerPoint presentation |
| `application/vnd.ms-excel` | `.xls` | Legacy Excel |
| `application/msword` | `.doc` | Legacy Word |
| `application/vnd.oasis.opendocument.text` | `.odt` | OpenDocument text |
| `application/vnd.oasis.opendocument.spreadsheet` | `.ods` | OpenDocument spreadsheet |
| `application/epub+zip` | `.epub` | EPUB ebook |

## Font Types

| MIME Type | Extension | Description |
|-----------|-----------|-------------|
| `font/woff` | `.woff` | WOFF font |
| `font/woff2` | `.woff2` | WOFF2 font (preferred for web) |
| `font/ttf` | `.ttf` | TrueType font |
| `font/otf` | `.otf` | OpenType font |
| `font/collection` | `.ttc` | Font collection |

## Multipart Types

Used for file uploads and email.

| MIME Type | Usage |
|-----------|-------|
| `multipart/form-data` | File uploads via HTML forms |
| `multipart/byteranges` | Partial content responses (206) |
| `multipart/mixed` | Email with attachments |
| `multipart/alternative` | Email with HTML and plain text versions |

```html
<!-- File upload form -->
<form enctype="multipart/form-data" method="POST">
  <input type="file" name="document" accept=".pdf,.docx" />
</form>
```

## Setting MIME Types

```
# Nginx
types {
    application/json  json;
    font/woff2        woff2;
}

# Apache (.htaccess)
AddType application/json .json
AddType font/woff2 .woff2

# Express.js
res.type('application/json');
res.set('Content-Type', 'text/html; charset=utf-8');

# Fetch API
fetch('/api', {
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(data)
});
```

Look up any MIME type with the [MIME Types Reference](/tools/mime-types-reference) tool.