MIME Overview

MIME types (also called media types) identify the format of a file or data stream. For example, image/jpeg means a JPEG image, text/html means an HTML document, and application/json means JSON data. Web servers use MIME types in Content-Type headers so browsers know how to handle responses.

The mime package provides three main capabilities:

1. Detect MIME types from file names or paths
2. Generate Content-Type headers with proper charset parameters for text types
3. Check compressibility to decide whether to gzip or brotli-compress a response

Quick Example

import {
  detectMimeType,
  detectContentType,
  isCompressibleMimeType,
} from 'remix/mime'

// Detect MIME type from a filename
detectMimeType('photo.jpg')       // 'image/jpeg'
detectMimeType('style.css')       // 'text/css'
detectMimeType('data.json')       // 'application/json'

// Get a full Content-Type header (includes charset for text types)
detectContentType('index.html')   // 'text/html; charset=utf-8'
detectContentType('app.js')       // 'application/javascript; charset=utf-8'
detectContentType('photo.png')    // 'image/png'

// Check if a MIME type benefits from compression
isCompressibleMimeType('text/html')        // true
isCompressibleMimeType('application/json') // true
isCompressibleMimeType('image/png')        // false (already compressed)

Key Concepts

• MIME type -- A two-part identifier in the format type/subtype (e.g., text/html, image/png). The first part is the broad category, the second is the specific format.
• Content-Type -- An HTTP header that includes the MIME type plus optional parameters like charset=utf-8. Text formats should include charset; binary formats should not.
• Compressibility -- Text-based formats (HTML, CSS, JSON, JavaScript) compress well with gzip or brotli. Already-compressed formats (PNG, JPEG, ZIP) do not benefit from additional compression.

Built-in Types

The package includes a built-in database covering hundreds of common file extensions. You can register custom types for extensions not in the database:

import { defineMimeType } from 'remix/mime'

defineMimeType('.mdx', 'text/mdx')

Related

• response -- Response helpers that use MIME detection internally
• fs -- openLazyFile uses MIME detection for the file's type property
• API Reference -- Full API documentation