样式css中data类型的Url格式,data:image/png;base64的用法详解

    今天在做wap站时，看到css中的背景图片路径是一串像爬虫一样的字符串，看样子是base64加密。

    如下面的代码

.header .headRight a.aNav { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDVGM0UyMzFBNEZGMTFFM0E5QzlCRkEwRkFGNjVFRTQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDVGM0UyMzJBNEZGMTFFM0E5QzlCRkEwRkFGNjVFRTQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowNUYzRTIyRkE0RkYxMUUzQTlDOUJGQTBGQUY2NUVFNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowNUYzRTIzMEE0RkYxMUUzQTlDOUJGQTBGQUY2NUVFNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgStszoAAAC9SURBVHja7JRBCsMgEEUnkkPUrryO50joyuO49Rp6HV2UeAurYEAkGpMitOCHWTjzv7PRNznngHNOAUD4wnCszdfCGFN7ozUzx0PNCHEWPM+kJyilmBByGNBaY6WUQMkFZ8o9xcuD4gwj6Kyx4HcWbA1em79zY0zRHGd2/wdrfOePgv/t65X1VinlaWYKP7mn/n/BfAVcd2CHLsIuVVPmK9i1ZAYqBuzqsGvJoAR2tmIM4Fpy2LVkuqPiI8AAY9tJE2VdijMAAAAASUVORK5CYII="); }

    作为一个屌丝站长，看到这个就歇菜了，不知道怎么办，在百度用谷歌了以后终于有点眉目

    直接把这条虫子放到chrome,firefox,Opera,Safari等正常人类使用的浏览器，就可以看到那特么就是一个图片而且直接显示了。

    那问题来了，

    1.这到底什么呢？

    答：这学名叫Data Url scheme。Data URI scheme是在RFC2397中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。

    2.为什么要这么写？

    答：既然知道了它是怎么回事，大概能猜个89不离10了，直接嵌入网页，这样做是为了减少http请求，特别是在手机版网页中，3G网络毕竟速度慢，这样做显然是有更好的用户体验。

    扩展一下吧：这种做法的优缺点

    优点：

    减少HTTP请求数，没有了TCP连接消耗和同一域名下浏览器的并发数限制。

    对于小文件会降低带宽。虽然编码后数据量会增加，但是却减少了http头，当http头的数据量大于文件编码的增量，那么就会降低带宽。

    对于HTTPS站点，HTTPS和HTTP混用会有安全提示，而HTTPS相对于HTTP来讲开销要大更多，所以Data URI在这方面的优势更明显。

    可以把整个多媒体页面保存为一个文件。

    缺点：

    无法被重复利用，同一个文档应用多次同一个内容，则需要重复多次，数据量大量增加，增加了下载时间。

    无法被独自缓存，所以其包含文档重新加载时，它也要重新加载。

    客户端需要重新解码和显示，增加了点消耗。

    不支持数据压缩，base64编码会增加1/3大小，而urlencode后数据量会增加更多。

    不利于安全软件的过滤，同时也存在一定的安全隐患。

    Data URI和MHTML两者的配合可以完整的解决所有的主流浏览器，它们由于无法被缓存和重复利用的缺陷，所以并不适合直接在页面中使用，但在CSS和JavaScript文件中对图片适当地使用有非常大的优越性：

    大大减少请求数，现在大型网站的CSS引用了大量的图片资源。

    CSS和JavaScript都可以被缓存，间接的实现了数据的缓存。

    利用CSS可以解决Data URI的重复利用问题

    告别CSS Sprites，CSS Sprites的出现是为了减少请求数，但它除了带来在不确定情况下的异常外，CSS Sprites还需要人为的图片合并，即使有合并工具也依旧必须人为地在如何有效的拼图上耗费大量的时间，并带来维护的困难。当你遵循一定的设计原则后， 你就可以完全抛弃CSS Sprites来编写CSS，最后使用工具在上传到服务器环节把图片转换成Data URI和MHTML，如《利用data-uri合并样式表和图片》中用python实现的工具，这可以节约大量的时间。

    base64编码把图片文件增加了1/3，Data URI和MHTML同时使用相当于增加了2/3，但CSS和JavaScript可以使用gzip压缩，其可以节省2/3的数据量，所以使用gzip压缩后的最终数据量是(1 + 1/3) * 2 * (1/3) = 8/9，所以最终流量是减少的。

    它把一些 8-bit 数据翻译成标准 ASCII 字符，网上有很多免费的base64 编码和解码的工具，在PHP中可以用函数base64_encode() 进行编码 

    1）在网页上显示出来的标准方法是：

<img src=”data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC” />

    换句话说我们把图像文件的内容内置在 HTML 文件中，节省了一个 HTTP 请求。

    2）在 CSS 中使用

body { background-image: url(“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC”);}

    来自 Nicholas C. Zakas 的 DataURI 自动化工具，命令行格式：

java -jar datauri-x.y.z.jar -o <output filename> <input filename>

    Data URI scheme支持的类型有：

data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/javascript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据