Base64 MIME Types
查询文件扩展名对应的 MIME Type,一键复制 Data URI 前缀。涵盖图片、文档、字体、音视频等 37 种常见格式。
显示 37 条 / 共 37 条
| 扩展名 | MIME Type | Data URI 前缀 | 说明 | 复制 |
|---|---|---|---|---|
| .png | image/png | data:image/png;base64, | PNG 位图,支持透明度 | |
| .jpg | image/jpeg | data:image/jpeg;base64, | JPEG 照片,高压缩比 | |
| .jpeg | image/jpeg | data:image/jpeg;base64, | JPEG 照片,与 .jpg 相同 | |
| .webp | image/webp | data:image/webp;base64, | WebP 现代格式,比 PNG/JPEG 更小 | |
| .gif | image/gif | data:image/gif;base64, | GIF 动图 | |
| .svg | image/svg+xml | data:image/svg+xml;base64, | SVG 矢量图,可直接内嵌 HTML | |
| .ico | image/x-icon | data:image/x-icon;base64, | ICO 图标,用于 favicon | |
| .avif | image/avif | data:image/avif;base64, | AVIF 超高压缩比格式 | |
| .bmp | image/bmp | data:image/bmp;base64, | BMP 位图,无压缩 | |
| .tiff | image/tiff | data:image/tiff;base64, | TIFF 高精度图像 | |
| application/pdf | data:application/pdf;base64, | PDF 文档,API 传输或内联 | ||
| .doc | application/msword | data:application/msword;base64, | Word 文档(旧格式) | |
| .docx | application/vnd.openxmlformats-officedocument.wordprocessingml.document | data:application/vnd.openxmlformats-of… | Word 文档(新格式) | |
| .xls | application/vnd.ms-excel | data:application/vnd.ms-excel;base64, | Excel 表格(旧格式) | |
| .xlsx | application/vnd.openxmlformats-officedocument.spreadsheetml.sheet | data:application/vnd.openxmlformats-of… | Excel 表格(新格式) | |
| .zip | application/zip | data:application/zip;base64, | ZIP 压缩包 | |
| .txt | text/plain | data:text/plain;base64, | 纯文本 | |
| .html | text/html | data:text/html;base64, | HTML 页面,可作 iframe src | |
| .css | text/css | data:text/css;base64, | CSS 样式表 | |
| .js | text/javascript | data:text/javascript;base64, | JavaScript 脚本 | |
| .json | application/json | data:application/json;base64, | JSON 数据,API 载荷 | |
| .xml | application/xml | data:application/xml;base64, | XML 数据 | |
| .csv | text/csv | data:text/csv;base64, | CSV 表格数据 | |
| .md | text/markdown | data:text/markdown;base64, | Markdown 文档 | |
| .woff | font/woff | data:font/woff;base64, | WOFF Web 字体,CSS @font-face | |
| .woff2 | font/woff2 | data:font/woff2;base64, | WOFF2 压缩更好,推荐使用 | |
| .ttf | font/ttf | data:font/ttf;base64, | TrueType 字体 | |
| .otf | font/otf | data:font/otf;base64, | OpenType 字体 | |
| .mp3 | audio/mpeg | data:audio/mpeg;base64, | MP3 音频 | |
| .wav | audio/wav | data:audio/wav;base64, | WAV 无损音频 | |
| .ogg | audio/ogg | data:audio/ogg;base64, | OGG 音频 | |
| .aac | audio/aac | data:audio/aac;base64, | AAC 音频 | |
| .flac | audio/flac | data:audio/flac;base64, | FLAC 无损音频 | |
| .mp4 | video/mp4 | data:video/mp4;base64, | MP4 视频 | |
| .webm | video/webm | data:video/webm;base64, | WebM 视频 | |
| .ogv | video/ogg | data:video/ogg;base64, | OGG 视频 | |
| .mov | video/quicktime | data:video/quicktime;base64, | QuickTime 视频 |
什么是 MIME Type?
MIME Type(Multipurpose Internet Mail Extensions,多用途互联网邮件扩展类型)是一种标准的内容标识符,用来描述文件或数据的格式。格式为 类型/子类型,例如:
image/png
PNG 图片
application/pdf
PDF 文档
font/woff2
WOFF2 字体
application/json
JSON 数据
浏览器和服务器通过 MIME Type 判断如何处理内容——显示图片、渲染 HTML、触发下载还是播放视频。
为什么 Base64 中 MIME Type 很重要
在 Data URI 中,MIME Type 告诉浏览器如何解读 Base64 数据。格式是:
data:image/png;base64,iVBORw0KGgo…如果 MIME Type 不正确:
- 图片可能无法显示(浏览器不知道这是图片)
- CSS background-image 不会渲染
- 字体不会被加载
- 某些环境下内容会被当成纯文本处理
正确的 MIME Type 确保浏览器能正确渲染 Base64 数据,无论是 <img src="data:...">、background-image: url("data:...") 还是 API 传输。
如何选择正确的 MIME Type
已知文件扩展名
查上方表格。绝大多数常见格式都有对应的标准 MIME Type,直接复制即可。
浏览器端读取文件
使用 File 对象的 type 属性:const mime = file.type。浏览器会自动检测 MIME Type,但某些浏览器对少见格式可能返回空字符串。
服务器端检测
不要只依赖文件扩展名,用库(如 file-type for Node.js、python-magic for Python)检测文件头(magic bytes)以获取更可靠的结果。
未知文件类型
使用 application/octet-stream,这是通用二进制类型,浏览器通常会触发下载而不是尝试渲染。
相关工具
常见问题
什么是 MIME Type?
MIME Type 是标准内容格式标识符,格式为 类型/子类型(如 image/png)。浏览器和服务器用它判断如何处理收到的内容——显示图片、渲染网页、播放视频还是触发下载。
Data URI 中为什么 MIME Type 不能填错?
MIME Type 告诉浏览器 Base64 数据是什么内容。填错 MIME Type,浏览器可能无法渲染图片、加载字体或正确处理 JSON。例如把 image/png 写成 image/jpeg,部分浏览器会拒绝渲染。
Data URI 前缀是什么?
格式是 data:[mime-type];base64,。例如 PNG 图片的前缀是 data:image/png;base64,。把这个前缀拼接在 Base64 字符串前面,就是一个完整的 Data URI,可以用在任何接受 URL 的地方。
未知文件类型用什么 MIME Type?
用 application/octet-stream,这是通用二进制类型。浏览器遇到这个类型通常会触发文件下载,而不是尝试渲染,是处理未知格式的安全选择。
SVG 的 MIME Type 是什么?
image/svg+xml。注意 SVG 的 MIME Type 中有 +xml 后缀,不是简单的 image/svg。在 Data URI 中是 data:image/svg+xml;base64,....
字体文件用什么 MIME Type?
WOFF2 用 font/woff2,WOFF 用 font/woff,TTF 用 font/ttf,OTF 用 font/otf。这些是 RFC 8081 定义的标准字体 MIME Type,用于 CSS @font-face 的 Data URI 内嵌字体。