标签: 图片

将图片信息写入 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 图片生成:

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

新浪微博图片缩略图规则

 新浪微博在用户上传图片后,会对图片进行处理,生成不同版本的缩小图,以适应各种客户端的需求。图片分为 large、bmiddle、small、thumbnail、square 五种尺寸,在需要相应大小图片时,只需要对图片 url 的该段进行替换即可:

/large/:

原图。

/bmiddle/:

当原图宽度>440 像素时,则按比例缩小图片使得宽度=440 像素。当原图宽小于440像素时,则直接原图。高度无关。

/small/:

规则类似 thumbnail,尺寸为 200 像素。最小断点未测试,猜测为 60 像素。

/thumbnail/:

1. 当长宽比例< 120:35.5 时,比例缩小到长和宽均不大于 120 像素,即:竖长图缩为高120像素,横长图缩为宽120像素;

2. 当比例≥ 120:35.5 时,即当按比例缩放时,一边满足 120 像素另一边尺寸小于 36 像素,则进行特殊处理;

2.1 竖向图片,缩放为宽 36 像素,然后从顶部往下截取 120 像素的部分作为 thumbnail 图;

2.2横向图片,则重新缩放,以120像素为高度,截取左边的120像素作为宽度,形成一个 120×120 的正方形 thumbnail 图。

3. 当原图片长宽均小于 120 像素,不处理。

/square/:

按比例缩小到长宽中的较小值等于 80 像素,然后再对另一边进行居中裁切,使得两边都等于 80 像素。

sinapic-size