图片转 CSS — 批量生成 Data URI 内联代码
把小图标批量编码成 Data URI:每张图直接给出可用的 CSS background-image 与 HTML img 代码,一键复制;SVG 自动走 URL-encode(比 base64 更小),超 32KB 给内联警告。浏览器本地编码、图片不上传。支持电脑、平板、手机浏览器。
Data URI(data:image/...)是把图片直接编码进 CSS / HTML 文本里的写法,小图标内联后少一次 HTTP 请求、单文件交付也更方便。本工具批量上传后在浏览器本地编码:每张图生成三种即用代码——纯 Data URI、带类名的 CSS background-image、HTML img 标签,类名取自文件名,支持一键复制单条或全部 CSS。两个别的工具常忽略的点这里做对了:base64 编码会比原文件大约 33%,所以超过 32KB 的图会明确警告「不建议内联」;SVG 则自动改用 URL-encode(文本转义而非 base64),体积明显更小。全程本地处理,图片不上传。
什么时候需要
小图标内联
按钮 icon、装饰点缀直接埋进 CSS,少发请求。
单文件交付
邮件模板、demo 页、离线 HTML 把图全部内联带走。
首屏关键小图
极小的 logo / 占位图内联,省一次往返。
内联的取舍
- 少一次 HTTP 请求,单文件可离线交付
- 批量编码 + 类名自动生成,整套 CSS 一键复制
- SVG 自动 URL-encode,比 base64 省下约四分之一体积
- base64 比原文件大 ~33%,只适合小图标(工具超 32KB 会警告)
- 内联的图不能被浏览器单独缓存,改一处整个样式文件都失效重下
- 大图请用文件引用 + 压缩,别硬内联
图片转 CSS 常见问题
那个工具做纯字符串互转(含 base64 解码还原成图片);本页面向开发场景:批量处理、直接产出带类名的 CSS 和 HTML 成品代码、SVG 自动 URL-encode、大图警告。要贴代码用这里,要解码还原用那边。
base64 会放大约 33%,而且内联的图不能被浏览器单独缓存——它跟着 CSS/HTML 一起重复下载。小图标内联省请求划算;大图内联反而拖慢每次加载。32KB 是业界常用的经验阈值,超过就建议改文件引用 + 压缩。
SVG 本身是文本,URL-encode 只转义少数不安全字符,通常比固定放大 33% 的 base64 小 20%-30%,且浏览器支持一样好。本工具检测到 SVG 会自动走 URL-encode,并在结果上标注。
不会。编码用浏览器自带的 FileReader 在本地完成,不联网、不上传、不存储,断网也能用。