What Are MIME Types in Base64 Encoding?
MIME types identify the file format of Base64-encoded data in data URIs. The data URI format is data:[MIME type];base64,[data]. The MIME type tells the browser how to interpret the decoded bytes. Without a correct MIME type, the browser cannot determine whether the decoded content is an image, font, document, or other format.
MIME types follow the type/subtype pattern defined by IANA (Internet Assigned Numbers Authority). The type describes the general category (image, application, text, font, audio, video) and the subtype identifies the specific format (png, pdf, plain, woff2, mpeg). Every data URI used in HTML, CSS, or JavaScript should include the correct MIME type for the encoded content.
For a broader explanation of data URI syntax and usage, see the Data URI Guide. For details on how Base64 encoding works at the byte level, read What is Base64.
What Image MIME Types Are Used with Base64?
Image MIME types are the most commonly used types with Base64 data URIs in web development. They cover all standard web image formats supported by modern browsers. The table below lists each image format with its MIME type, the complete data URI prefix, and associated file extensions.
| Format | MIME Type | Data URI Prefix | File Extension |
|---|---|---|---|
| PNG | image/png | data:image/png;base64, | .png |
| JPEG | image/jpeg | data:image/jpeg;base64, | .jpg, .jpeg |
| GIF | image/gif | data:image/gif;base64, | .gif |
| WebP | image/webp | data:image/webp;base64, | .webp |
| SVG | image/svg+xml | data:image/svg+xml;base64, | .svg |
| BMP | image/bmp | data:image/bmp;base64, | .bmp |
| ICO | image/x-icon | data:image/x-icon;base64, | .ico |
| TIFF | image/tiff | data:image/tiff;base64, | .tiff |
| AVIF | image/avif | data:image/avif;base64, | .avif |
PNG and JPEG are the most frequently used formats with Base64 data URIs. SVG uses the image/svg+xml MIME type because SVG is an XML-based format. WebP and AVIF are newer formats with smaller file sizes. To encode images to Base64 with the correct MIME type prefix, use the Base64 Image Encoder. To decode Base64 image data back to viewable images, use the Base64 to PNG Converter or Base64 to JPEG Converter.
What Document MIME Types Are Used with Base64?
Document MIME types cover non-image files commonly transmitted as Base64 in APIs, data URIs, and email attachments. These include structured data formats, compressed archives, and plain text.
| Format | MIME Type | Data URI Prefix |
|---|---|---|
application/pdf | data:application/pdf;base64, | |
| JSON | application/json | data:application/json;base64, |
| XML | application/xml | data:application/xml;base64, |
| ZIP | application/zip | data:application/zip;base64, |
| Plain Text | text/plain | data:text/plain;base64, |
| HTML | text/html | data:text/html;base64, |
| CSV | text/csv | data:text/csv;base64, |
PDF files embedded as Base64 data URIs can be displayed in <iframe> elements or <embed> tags in browsers with built-in PDF viewers. JSON and XML are text formats that can use either Base64 or percent-encoding in data URIs. ZIP files encoded as Base64 can be offered as download links using <a href="data:application/zip;base64,..." download="file.zip">. For encoding documents to Base64, use the Base64 File Encoder. To convert Base64 back to PDF, use the Base64 to PDF Converter.
What Font MIME Types Are Used with Base64?
Font MIME types identify web font formats used in CSS @font-face declarations. Embedding fonts as Base64 in CSS eliminates separate font file requests. The font/ MIME type category was standardized by IANA for web font formats.
| Format | MIME Type | Data URI Prefix |
|---|---|---|
| WOFF2 | font/woff2 | data:font/woff2;base64, |
| WOFF | font/woff | data:font/woff;base64, |
| TTF | font/ttf | data:font/ttf;base64, |
| OTF | font/otf | data:font/otf;base64, |
WOFF2 is the recommended format for web fonts. It uses Brotli compression and produces the smallest file sizes among web font formats. When embedding fonts as Base64 in CSS, use WOFF2 to minimize the CSS file size increase. Older MIME types like application/font-woff and application/x-font-ttf are deprecated in favor of the font/ prefix. For details on embedding fonts in CSS, see Base64 in CSS.
What Audio and Video MIME Types Are Used with Base64?
Audio and video files can be Base64-encoded, but this is rarely done in practice. Media files are typically large (megabytes to gigabytes), and the 33% Base64 overhead makes inline embedding impractical. Streaming protocols handle media delivery more efficiently than data URIs.
| Format | MIME Type | Typical File Size |
|---|---|---|
| MP3 | audio/mpeg | 1-10 MB per song |
| WAV | audio/wav | 10-50 MB per song |
| OGG | audio/ogg | 1-8 MB per song |
| MP4 | video/mp4 | 10 MB - 1 GB+ |
| WebM | video/webm | 5 MB - 500 MB+ |
The only practical use for Base64-encoded audio is embedding very short notification sounds (under 50 KB) in web applications to avoid an HTTP request. Base64-encoded video is generally not used in web contexts. APIs that transmit audio or video data as Base64 in JSON payloads face the same 33% overhead, making presigned URLs or streaming endpoints the preferred approach for media delivery.
How Do You Determine the MIME Type of Base64 Data?
Two methods identify the MIME type of Base64-encoded data. First, check the data URI prefix: the MIME type appears between data: and ;base64, in the string. Second, decode the Base64 data and read the magic bytes (file signature) of the decoded output.
| Format | Magic Bytes (Hex) | Magic Bytes (ASCII) |
|---|---|---|
| PNG | 89 50 4E 47 | .PNG |
| JPEG | FF D8 FF | N/A (non-printable) |
| GIF | 47 49 46 38 | GIF8 |
25 50 44 46 | %PDF | |
| ZIP | 50 4B 03 04 | PK.. |
| WebP | 52 49 46 46 | RIFF |
If a Base64 string lacks a data URI prefix, decode it and check the first 4-8 bytes against known magic byte signatures. The Base64 Validator tool decodes Base64 input, detects the content type from magic bytes, and reports the corresponding MIME type. This is useful when receiving Base64 data from APIs or external sources where the MIME type is not provided.
Frequently Asked Questions
What happens if I use the wrong MIME type?
The browser may fail to render the data or display it incorrectly. Specifying image/png for JPEG data causes the PNG decoder to reject the bytes because the file signature does not match. Some browsers attempt format detection despite the declared MIME type, but this fallback behavior is not reliable across all browsers and rendering contexts.
Is the MIME type required in a Base64 data URI?
Yes for correct rendering. When the MIME type is omitted, the browser defaults to text/plain;charset=US-ASCII, which is incorrect for binary data like images, fonts, and documents. Always include the MIME type in the data URI to ensure the browser uses the correct format handler for the decoded bytes.
Can I use any MIME type with Base64?
Yes. Any valid IANA-registered MIME type works with Base64 encoding in a data URI. The browser attempts to render the decoded content using its handler for that MIME type. Whether the content actually displays depends on the browser having a built-in renderer for that format. Common web formats (images, fonts, PDF) render in all modern browsers without additional plugins.
How do I find the MIME type of a file?
Check the file extension and look it up in the reference tables above. Programmatically, read the file's magic bytes (the first few bytes that identify the format). PNG files start with 0x89504E47, JPEG with 0xFFD8FF, GIF with 0x474946. The Base64 Validator detects the MIME type of Base64-encoded data by examining the decoded content's magic bytes.
What is the difference between MIME type and file extension?
A MIME type is a standardized format identifier registered with IANA that follows the type/subtype pattern (e.g., image/png, application/pdf). A file extension is a suffix appended to a filename (e.g., .png, .pdf). MIME types are used in HTTP headers, data URIs, and email to identify content format. File extensions are filesystem conventions. A file can have a mismatched extension, but the MIME type in a data URI must match the actual content for correct rendering.