大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAAA3NCSVQICAjb4U/gAAAABlBMVEX///+ZmZmOUEqyAAAAAnRSTlMA/1uRIrUAAAAJcEhZcwAACusAAArrAYKLDVoAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDkvMjAvMTIGkKG+AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAAB1JREFUCJljONjA8LiBoZyBwY6BQQZMAtlAkYMNAF1fBs/zPvcnAAAAAElFTkSuQmCC
那么这是什么呢?这是Data URI scheme。
Data URI scheme是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入。比如上面那串字符,其实是一张小图片,将这些字符复制黏贴到火狐的地址栏中并转到,就能看到它了,一张1X36的白灰png图片。
在上面的Data URI中,data表示取得数据的协定名称,image/png 是数据类型名称,base64 是数据的编码方法,逗号后面就是这个image/png文件base64编码后的数据。
 
目前,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图片数据
 
base64简单地说,它把一些 8-bit 数据翻译成标准 ASCII 字符,网上有很多免费的base64 编码和解码的工具,在PHP中可以用函数base64_encode() 进行编码,如echo base64_encode(file_get_contents(‘wg.png’));
目前,IE8、Firfox、Chrome、Opera浏览器都支持这种小文件嵌入。
 
举个图片的例子:
网页中一张图片可以这样显示:
<img src="http://mail.163.com/images/x.png" />
也可以这样显示:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAAA3NCSVQICAjb4U/gAAAABlBMVEX///+ZmZmOUEqyAAAAAnRSTlMA/1uRIrUAAAAJcEhZcwAACusAAArrAYKLDVoAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDkvMjAvMTIGkKG+AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAAB1JREFUCJljONjA8LiBoZyBwY6BQQZMAtlAkYMNAF1fBs/zPvcnAAAAAElFTkSuQmCC" />

把图像文件的内容直接写在了HTML 文件中,这样做的好处是,节省了一个HTTP 请求。坏处是浏览器不会缓存这种图像。

 

data:image/png;base64的更多相关文章

  1. BS中的 data:image/png;base64

    举个图片的例子: 网页中一张图片可以这样显示: <img src="http://mail.163.com/images/x.png" /> 也可以这样显示: < ...

  2. 通过data:image/png;base64把图片直接写在src里

    从网上下了个源文件查看时候发现了引用图片的地址不是在本地上的,而是后面跟了一大串字符data:image/png;base64...查了一下资料分析如下: 关于用base64存储图片 网页上有些图片的 ...

  3. url(data:image/png;base64,R0**)(转)

    url(data:image/png;base64,R0**) 所谓"data"类型的Url格式,是在RFC2397中 提出的,目的对于一些"小"的数据,可以在 ...

  4. data:image/png;base64是什么

    大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJ ...

  5. html image -- data:image/png;base64

    1,  data:image/png;base64 <!DOCTYPE HTML> <html> <head> <meta http-equiv=" ...

  6. Css中路径data:image/png;base64的用法详解

    今天查看一些网站的css中发现了 background-image:url(data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAAB ...

  7. 浅析data:image/png;base64的应用

    ...我也是加一个网安交流群发现了他们的入群密码是这个 数据:图像/ PNG; BASE64,iVBORw0KGgoAAAANSUhEUgAAANwAAAAoCAIAAAAaOwPZAAAAAXNSR ...

  8. 关于 Data URI Scheme -- data:image/jpg;base64

    转载一篇大神的文章 大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqA ...

  9. data:image/png;base64 上传图像将图片转换成base64格式

    大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJ ...

随机推荐

  1. 移动Web开发(二)

    这些天一直在忙iOS,Android和.Net方面的知识都有些忘记了,汗.不过还是先重温一下HTML吧,手动滑稽. 说实话前面的基础部分基本上大家都会,就当看个热闹吧. 1.HTML的核心要素--标签 ...

  2. 【代码笔记】iOS-竖状图

    一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController ...

  3. 【代码笔记】iOS-浇花动画

    一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController ...

  4. WPF学习之路(九)导航链接

    Hyperlink WPF中超链接类型是Hyperlink,除了能在页面之间导航,还能再同一个页面下进行段落导航 实例: <Grid> <FlowDocumentReader> ...

  5. eclipse配置文件导出问题

    关于eclipse配置文件导出问题 eclipse的默认配置一般不能满足我们的要求,我们一般会修改一些配置,如字体.背景颜色.快捷键及一些template等等,这样方便我们的开发.可是当我们新建一个工 ...

  6. Git中文版教程

    1. 起步 1.1 关于版本控制 1.2 Git 简史 1.3 Git 基础 1.4 命令行 1.5 安装 Git 1.6 初次运行 Git 前的配置 1.7 获取帮助 1.8 总结 2. Git 基 ...

  7. pentaho cde 封装自定义图形控件,动态传参

    在实际项目中经常会用到将经常用到的图形表格组成一个控件,其他地方直接调用,类似于服务器开发的接口,而现在就需要将一些常用的图形做封装,这样就不必重复多次创建相同的内容. 下面就简单的定义一个自定义柱形 ...

  8. sed实例精解--例说sed完整版

    原文地址:sed实例精解--例说sed完整版 作者:xiaozhenggang 最近在学习shell,怕学了后面忘了前面的就把学习和实验的过程记录下来了.这里是关于sed的,前面有三四篇分开的,现在都 ...

  9. IIS安装和使用(Windows Server 2003)

    1.安装IIS ①将系统盘插入光驱 ②进入:控制面板--添加/删除Windows组件--选择“应用程序服务器”--点击“详细信息” ③选择:ASP.NET和Internet信息服务(IIS),点击“确 ...

  10. MySQL 调优基础(一) CPU与进程

    一般而言,MySQL 的调优可以分为两个层面,一个是在MySQL层面上进行的调优,比如SQL改写,索引的添加,MySQL各种参数的配置:另一个层面是从操作系统的层面和硬件的层面来进行调优.操作系统的层 ...