Base64 MIME Types
Look up any file extension's MIME type and copy its Data URI prefix. Covers images, documents, fonts, audio, video, and 37 common formats.
Showing 37 of 37
| Extension | MIME Type | Data URI Prefix | Description | Copy |
|---|---|---|---|---|
| .png | image/png | data:image/png;base64, | PNG raster image, supports transparency | |
| .jpg | image/jpeg | data:image/jpeg;base64, | JPEG photo, high compression | |
| .jpeg | image/jpeg | data:image/jpeg;base64, | JPEG photo, same as .jpg | |
| .webp | image/webp | data:image/webp;base64, | WebP modern format, smaller than PNG/JPEG | |
| .gif | image/gif | data:image/gif;base64, | GIF animated image | |
| .svg | image/svg+xml | data:image/svg+xml;base64, | SVG vector image, can be embedded directly in HTML | |
| .ico | image/x-icon | data:image/x-icon;base64, | ICO icon, used for favicon | |
| .avif | image/avif | data:image/avif;base64, | AVIF ultra-high compression format | |
| .bmp | image/bmp | data:image/bmp;base64, | BMP bitmap, uncompressed | |
| .tiff | image/tiff | data:image/tiff;base64, | TIFF high-precision image | |
| application/pdf | data:application/pdf;base64, | PDF document, for API transmission or inline embedding | ||
| .doc | application/msword | data:application/msword;base64, | Word document (legacy format) | |
| .docx | application/vnd.openxmlformats-officedocument.wordprocessingml.document | data:application/vnd.openxmlformats-of… | Word document (modern format) | |
| .xls | application/vnd.ms-excel | data:application/vnd.ms-excel;base64, | Excel spreadsheet (legacy format) | |
| .xlsx | application/vnd.openxmlformats-officedocument.spreadsheetml.sheet | data:application/vnd.openxmlformats-of… | Excel spreadsheet (modern format) | |
| .zip | application/zip | data:application/zip;base64, | ZIP archive | |
| .txt | text/plain | data:text/plain;base64, | Plain text | |
| .html | text/html | data:text/html;base64, | HTML page, can be used as iframe src | |
| .css | text/css | data:text/css;base64, | CSS stylesheet | |
| .js | text/javascript | data:text/javascript;base64, | JavaScript script | |
| .json | application/json | data:application/json;base64, | JSON data, API payload | |
| .xml | application/xml | data:application/xml;base64, | XML data | |
| .csv | text/csv | data:text/csv;base64, | CSV tabular data | |
| .md | text/markdown | data:text/markdown;base64, | Markdown document | |
| .woff | font/woff | data:font/woff;base64, | WOFF web font, CSS @font-face | |
| .woff2 | font/woff2 | data:font/woff2;base64, | WOFF2 better compression, recommended | |
| .ttf | font/ttf | data:font/ttf;base64, | TrueType font | |
| .otf | font/otf | data:font/otf;base64, | OpenType font | |
| .mp3 | audio/mpeg | data:audio/mpeg;base64, | MP3 audio | |
| .wav | audio/wav | data:audio/wav;base64, | WAV lossless audio | |
| .ogg | audio/ogg | data:audio/ogg;base64, | OGG audio | |
| .aac | audio/aac | data:audio/aac;base64, | AAC audio | |
| .flac | audio/flac | data:audio/flac;base64, | FLAC lossless audio | |
| .mp4 | video/mp4 | data:video/mp4;base64, | MP4 video | |
| .webm | video/webm | data:video/webm;base64, | WebM video | |
| .ogv | video/ogg | data:video/ogg;base64, | OGG video | |
| .mov | video/quicktime | data:video/quicktime;base64, | QuickTime video |
What is a MIME Type?
MIME Type (Multipurpose Internet Mail Extensions) is a standard content identifier that describes the format of a file or data. The format is type/subtype, for example:
image/png
PNG image
application/pdf
PDF document
font/woff2
WOFF2 font
application/json
JSON data
Browsers and servers use MIME types to determine how to handle content — display images, render HTML, trigger a download, or play video.
Why the MIME type matters in Base64
In a Data URI, the MIME type tells the browser how to interpret the Base64 data. The format is:
data:image/png;base64,iVBORw0KGgo…If the MIME type is wrong:
- Images may not display (the browser doesn't know it's an image)
- CSS background-image won't render
- Fonts will not load
- Content may be treated as plain text in some environments
The correct MIME type ensures the browser renders Base64 data correctly — whether in <img src="data:...">, background-image: url("data:...") or any API payload.
How to choose the right MIME type
Known file extension
Look up the table above. Most common formats have a standard MIME type — just copy it.
Reading files in the browser
Use the File object's type property: const mime = file.type. Browsers detect MIME types automatically, but may return an empty string for uncommon formats.
Server-side detection
Don't rely solely on the file extension. Use a library (e.g. file-type for Node.js, python-magic for Python) to inspect file headers (magic bytes) for a more reliable result.
Unknown file type
Use application/octet-stream — the generic binary type. Browsers typically prompt a download rather than trying to render it.
Related Tools
Data URI Generator
Upload any file, auto-detect its MIME type, and generate a complete Data URI.
File to Base64
Convert any file to Base64 with multiple output formats.
PDF to Base64
Encode a PDF as Base64 for API transmission or inline embedding.
Font to Base64
Embed a web font into CSS @font-face as a Base64 Data URI.
SVG to Base64
Encode an SVG as a Base64 Data URI.
Base64 Data URI
Parse Data URI components, or build a Data URI from a MIME type and Base64 string.
Frequently Asked Questions
What is a MIME type?
A MIME type is a standard content format identifier in the form type/subtype (e.g. image/png). Browsers and servers use it to determine how to handle received content — display an image, render a web page, play video, or trigger a download.
Why can't the MIME type in a Data URI be wrong?
The MIME type tells the browser what the Base64 data contains. A wrong MIME type can prevent images from rendering, fonts from loading, or JSON from being parsed correctly. For example, using image/jpeg instead of image/png may cause some browsers to refuse to render the image.
What is the Data URI prefix format?
The format is data:[mime-type];base64,. For a PNG image the prefix is data:image/png;base64,. Prepend this to a Base64 string to create a complete Data URI, usable anywhere a URL is accepted.
What MIME type should I use for an unknown file?
Use application/octet-stream — the generic binary type. Browsers typically prompt a file download when they encounter this type rather than trying to render it, making it a safe default for unknown formats.
What is the MIME type for SVG?
image/svg+xml. Note the +xml suffix — it is not simply image/svg. In a Data URI it is data:image/svg+xml;base64,....
What MIME types are used for font files?
WOFF2 uses font/woff2, WOFF uses font/woff, TTF uses font/ttf, and OTF uses font/otf. These are the standard font MIME types defined in RFC 8081, used in CSS @font-face Data URI embedding.