图片信息 / Base64

图片信息 / Base64 工具做两件事:一是读出你选择的图片的文件名、体积、类型和像素尺寸;二是把图片转换成 Base64 编码的 Data URL,方便直接嵌进网页、CSS 或者 JSON 里使用,而不用单独存放一个图片文件。它不会压缩、裁剪或修改图片,也不读取拍摄时间、相机型号这类 EXIF 元数据。Base64 本身只是换了一种文本表示,图片体积会变大,所以更适合很小的图标,不适合大图。

操作步骤

1. 点击虚线框「点击上传图片」,在弹出的选择窗口里选一张图片。接受的是浏览器能识别的图片格式(选择框使用的是「图片」类型过滤)。
2. 读取完成后,页面会先显示图片预览(最高 240 像素的缩略显示,不是原尺寸),下方有四个信息格:「文件名」「体积」「类型」「尺寸」。尺寸显示为「宽 × 高」的像素数。
3. 在 Base64 标题右侧有两个复制按钮:「CSS背景图:」复制的是 background-image: url(…); 这一整句 CSS;「原始编码:」复制的是完整的 Data URL,也就是 data:image/…;base64,… 开头的整串文本。
4. 下面的只读文本框里可以直接看到完整的 Base64 文本,但不能在这里编辑。要换一张图,重新点上传框选择即可。

一个实际算出来的例子

我们生成了一张真实的 1×1 像素红色 PNG 图片,文件大小是 69 字节。上传它,体积一栏会显示「0.1 KB」(69 除以 1024 后保留一位小数),类型是 image/png,尺寸是 1 × 1,而得到的 Data URL 为 data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR4nGP4z8AAAAMBAQDJ/pLvAAAAAElFTkSuQmCC,总共 114 个字符。体积变化的规律是:Base64 把每 3 个字节编码成 4 个字符,所以文本长度约为原文件的三分之四倍,再加上 data:image/png;base64, 这 22 个字符的前缀。以一个 30000 字节(显示为 29.3 KB)的文件为例,Base64 部分是 40000 个字符,整个 Data URL 共 40022 个字符。以上数字均为实际计算所得。

支持范围与已知限制

• 体积一栏不到 1 MB 时用 KB 显示并保留一位小数,达到 1 MB 及以上时改用 MB 并保留两位小数;不到 0.05 KB 的文件会显示为 0.0 KB。
• 「类型」直接取自浏览器给出的文件类型,浏览器无法判断类型时显示为「未知」。
• 尺寸是图片的像素宽高,不是打印尺寸,也不显示 DPI。如果浏览器无法解码这张图,会弹出提示「图片读取失败,请换一张图片重试」。
• 没有大小限制,但很大的图片(几兆以上)会生成非常长的文本,文本框和复制操作都会变慢,页面可能卡顿。Base64 不适合大图,建议只对小图标、小图使用。
• 输出的 Data URL 格式永远是图片原始格式的内容,工具不会转换格式(比如不会把 PNG 改成 JPG),也不会反向把 Base64 还原成图片文件。
• 一次只能处理一张图片,不能批量,也没有复制为 <img> 标签的选项。
• 不读取 EXIF、GPS、色彩配置文件等元数据信息。

常见问题:Base64 图片适合用在什么场合?

适合很小的图片,比如 CSS 里的小图标、邮件模板里的 Logo,或需要把图片放进单个 HTML/JSON 文件、避免额外网络请求的场景。因为体积会增加约三分之一,而且无法被浏览器单独缓存,大图用 Base64 通常得不偿失。

常见问题:「CSS背景图」和「原始编码」复制的内容有什么区别?

「原始编码」复制的是完整的 Data URL,可以直接放进 <img> 的 src 属性或者 CSS 的 url() 里。「CSS背景图」在此基础上包好了 background-image: url(…); 这句 CSS,粘贴到样式表里就能用。如果你的 Data URL 里含有括号或者特殊字符导致 CSS 不识别,可以手动给 url() 加上引号。

常见问题:这里显示的尺寸和我在系统里看到的不一样?

工具显示的是浏览器解码后的像素尺寸。大多数浏览器读取图片时会应用照片里记录的旋转方向,所以手机竖拍的照片宽高有时会与某些软件显示的原始传感器尺寸互换。

常见问题:能把 Base64 再转回图片吗?

本工具不提供这个功能。不过 Data URL 可以直接粘贴到浏览器地址栏打开,或者作为图片的 src 使用,浏览器会把它显示成图片。

隐私与处理方式

图片由浏览器读取并在本地转换,代码中没有任何网络请求,你选择的图片不会被上传到服务器,也不会被保存。关闭或刷新页面后预览和编码就消失了。