图片转 Base64,用于 CSS 和 HTML
Base64 可以把小图片直接嵌入代码。先把文件转换成文本,再粘贴到需要的位置。
Base64 把图片的二进制数据转换为可嵌入 CSS、HTML 或 JSON 的文本。使用图片转 Base64 工具,即可获得可直接粘贴的字符串。
什么时候适合使用
这种方法适合小图标、简单 Logo,以及必须随单个 HTML 文件一起加载的素材。Data URI 也能简化原型和基础 HTML 邮件。
- 只用于小图片,避免文件体积膨胀。
- 支持时优先选择 WebP 或 SVG。
- 大照片不建议使用 Base64。
- 保留原始文件,方便后续编辑。
注意文件大小
Base64 会让数据体积增加约三分之一,嵌入的图片也不一定能单独缓存。大型素材仍应使用普通图片文件。转换后,把字符串粘贴到代码中,并在浏览器里测试显示效果。
大型素材的替代方案
经常变化的图片应保存为独立文件,让浏览器可以缓存。Base64 更适合很少变化、需要随单次请求一起加载的小素材。粘贴后请测试页面加载速度。
常见问题
Base64 适合大照片吗?
不适合。数据体积会变大,页面也可能变慢。
支持哪些格式?
支持 PNG、JPG、WebP、GIF 和 SVG,具体取决于选择的文件。
数据体积会增加吗?
会,通常比原始文件大约三分之一。
图片会被上传吗?
不会。转换在浏览器中进行,文件不会发送到服务器。