Electronic Joint Business

Solution for E-Business

png

在浏览器中使用Base64编码的图像

文章评价:
在上一篇博客中,我们将 BLOB 保存为 Base64 编码的字符串,这些字符串可以内嵌在 XML 的标签当中,这样二进制信息可以随着 XML 文件被拷贝、下载而不用担心信息会缺失。这项技术也在 email 邮件中被广泛使用。

浏览器对 Base64 的支持
图像是最经常使用的二进制文件格式之一。诸如 IE7,Firefox 等等现代的浏览器对 Base64 等各种编码的图像信息提供了很好的支持,在这些浏览器中,图形信息可以以下面的形式呈现在页面中、

<img src="data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM///// wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4ML wWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw==" alt="Base64 encoded image" width="150" height="150" />

这种data: URI的格式能把 Base64(或其他数据)可以内嵌在 image 标签的属性当中(或者CSS中)。我们可以看到在大部分浏览器中的显示效果:

这种做法有利有弊,好处是浏览器可以在一个连接中得到完成的页面内容,不好的地方时图像的大小会增加1/3。因此,这种内嵌的方法适合对小的图形元素比如图标、圆角等等进行处理,从而减少浏览器打开的连接数,但对大的照片、图片(量少而大)等等则不应该使用 Base64 编码以免影响下载速度。

>>> 阅读全文

 

, , , , ,