将图片信息写入 HTML 和 CSS

通常来说 HTML 和 CSS 中引用图片都用的是 <img src=”…”> 和 url(…) 的引用办法。有时为了节约连接数,在诸如图标库等特殊用途 css 中,也会使用一张大图片通过 position 定位到不同位置的办法,来把所有图标放在同一张图片上。

不过还有一种办法是直接把图片通过 base64 编码以后写到文本中。对于非常静态化的需求,比如电子书、自制在线简历、email 投递、网络隐私安全病患者等等,或者各种原因在输入端只支持文本的场合,有时也是一种不错的选择。

这种办法其实很简单,就是把原来写 url 的位置替换成图片 base64 编码以后的文本。

比如我有一张图片,,把它用 base64 编码以后就成了一长串文本:(编译工具用百度一搜就行,在线的,本地的多得去了,在 Github 上还能搜到完全基于 JS 的。)

这串文本很长,不过相比于图片本身的体积,其实并没有大多少。这种体积的变化详细涉及到信息论和压缩原理,这篇文章先不写了。

然后我们在长串文本前再添加一些说明文字,供浏览器识别:

然后就可以直接替换原 url 了,就像这样:

编码头的标准格式是

理论上方括号是可以省略的,同时也可以看到还有其它编码形式,比如base85、base16 等,尽管没有什么实际意义甚至有反效果。(比如有浏览器兼容性、超出合法字符区间等情况)。

好处与坏处:

  • 更新:保证网页上的重要图片不会加载失败。当 HTML 加载完毕或 CSS 加载完毕时,图片一定可以正常显示。不会出现 HTML+CSS 加载成功,但图片没有显示的问题。特别适合于类似评分星级、打标等功能。
  • 节约连接数:http 协议下,每个单独资源在客户端都呈现为一个独立文件(在服务器端部分是),都需要握手协议开销和传输开销,而使用 base64 以后,就变成了 “文件内部” 数据,不需要额外开销。而在呈现上没有变化。这在某网页有大量小文件的静态资源时尤其有用。但随着 cdn 的发展,这种情况又少下去了。
  • 图片过滤无效:有时候用户因为某些原因会屏蔽网页上的图片呈现,这些屏蔽方式通常都是通过匹配 html/css/js 中的资源路径实现的,但在 base64 编码下这种方式会无效。但相应的,基于服务器代理转码的浏览器(UC 之类通常是手机端浏览器),以前也无法转换,现在应该改进了吧。是好是坏看具体场景了。
  • 不方便编辑:这个主要出现在常用的文本编辑器里,在成熟的 IDE 环境中则不存在这种问题,鼠标移到 base64 图片上同样会有预览。有些文件编辑器也通过插件来解决类似问题。
  • 其它:呃…… 少量增加整个网页体积,等。

最后是 php 版的 base64 图片生成:

用的也是现成库,别的代码版本就不写了。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注