Base64 图片和 Data URL:什么时候内联,什么时候别用
Data URL 可以把小图片放进 HTML 或 CSS,但也会带来体积、缓存和安全取舍。
Data URL 是什么
Data URL 把小文件放进一段 URL 字符串。常见图片写法是 data:image/png;base64, 后面接 Base64 文本。RFC 2397 为小型内联数据定义了这个格式。
适合很小的资产
内联 Base64 适合小图标、邮件里的单张小图、测试 fixture,或临时生成的预览。它少一次文件请求,也让资产跟使用它的 HTML 或 CSS 放在一起。
普通图片别急着内联
Base64 每 3 个字节变 4 个字符,文本体积先增加约三分之一。浏览器要先下载更大的 HTML 或 CSS,才看见图片。独立图片文件可以用正常缓存、内容类型、响应式图片规则和 CDN 策略。
注意浏览器和安全限制
MDN 记录了 data URL 的长度限制和安全规则。现代浏览器会阻止顶层页面跳转到 data: URL,因为攻击者曾用这种模式做钓鱼。把 data URL 当作嵌入工具,不要当作通用托管方式。
一个实用判断
只内联你愿意粘进源码的小文件。产品图、截图、大 SVG、用户上传文件,都应保留为独立文件。只要 Base64 字符串让 HTML 或 CSS 难读,就把资产移出去。