CSS Data URI 转换器：自动将 CSS 图片内联为 Base64

CSS Data URI 转换器

粘贴样式表、选择文件或输入远程 CSS 文件的 URL。转换器会找出所有 url(...) 引用，下载小于大小上限的资源，并将其替换为 Base64 Data URI。

CSS

…或加载 CSS 文件

…或输入样式表 URL

相对路径的基础 URL

单个文件大小上限（KB）

何时适合内联 CSS 图片

每张外部图片都需要一次请求。对于小图标，将其内联为 Base64 Data URI 可省去该请求并避免闪烁。超过几 KB 后，33% 的体积开销和缓存失效会抵消收益，因此转换器设有大小上限。使用 gzip 或 Brotli 传输结果可弥补大部分 Base64 开销。

应该内联所有 CSS 图片吗？

不应该。只内联小图标和背景图。大图片会使 CSS 臃肿、阻塞渲染，并且无法单独缓存。

对“CSS Data URI 转换器”有疑问、想法或发现了 bug？欢迎留言评论、为工具评分或回复他人。

暂无评论，快来分享您的反馈吧！