Data uri方案可以不使用任何额外资源就可以向html及css中插入内容，这个技术可以在web页面中插入任何内容，通常被用于插入图片及web字体文件，这个技术最大的好处是可以减少http请求。

　　Data uri使用很简单，你可以按照下面的格式，使用base64编码过的数据直接插入html与css中代替图片文件。

　　data:[MIME-type][;charset=encoding][;base64],[data]

　　举个例子，下面的小图标就是用data uri创建的：

　　代码在这：

　　Wordpress的响应式网站使用这个技术插入了图片及字体，波士顿环球报的响应式网站也使用了这个技术，他们的网站在智能手机上，四秒内就加载完毕了。

　　使用这项技术，从此不用为外部图片及字体文件劳心费神，也需要测试与比较是否值得应用这项技术来代替传统方式。

　　7、可缩放矢量图形(SVG)而不是图片

　　就像data URIs可缩放矢量图形(SVG)可以被嵌入到一个页面来减少HTTP请求数，例如，下面的图片是一个内联SVG：

　　这是代码：

　　width="17.812px"

　　viewBox="296.641 381.688 17.812 28.664"

　　enable-background="new 296.641 381.688 17.812 28.664"

　　xml:space="preserve">

　　SVG文件可以通过一个矢量图形编辑器，如Adobe Illustrator创建，一旦创建，在文本编辑器中打开文件并把其代码拷贝出来(减去任何不必要的数据)。

　　上面的代码在HTML文件中会生效，但不会在样式表中生效，若在一个样式表中嵌入SVG文件，需要先将它转换为一个数据URI，如果这样做，我们需要从编辑器中(一定要包括元数据)拷贝出，用base64编码，然后使用以下格式嵌入样式表:

　　data:image/svg+xml[;base64],[data]

　　这是代码：

　　background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0i

　　MS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx

　　1c3RyYXRvciAxNS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOi

　　A2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL

　　0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8x

　　LjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzE

　　iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Im

　　h0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3a

　　WR0aD0iMTcuODEycHgiIGhlaWdodD0iMjguNjY0cHgiIHZpZXdCb3g9IjI5Ni42NDEg

　　MzgxLjY4OCAxNy44MTIgMjguNjY0Ig0KCSBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDI

　　5Ni42NDEgMzgxLjY4OCAxNy44MTIgMjguNjY0IiB4bWw6c3BhY2U9InByZXNlcnZlIj

　　4NCjxwYXRoIGZpbGw9IiNFRTFDNEUiIGQ9Ik0zMTQuNDI4LDQwMS4wODJjLTAuNDQzL

　　TUuNDg5LTUuMTQ2LTkuNTIyLTcuNTItMTQuMTg2Yy0wLjgxNi0xLjU5Ny0xLjM1Mi01

　　LjIwOC0xLjM1Mi01LjIwOA0KCXMtMC41NTUsMy43OTItMS4zODgsNS40MjVjLTIuMjM

　　zLDQuMzcxLTcuMTI3LDguOTk5LTcuNTA3LDE0LjA0N2MtMC4zNiw0Ljc5NCw0LjEwMS

　　w5LjE5MSw4Ljg5Niw5LjE5MQ0KCUMzMTAuNDksNDEwLjM1NCwzMTQuODE2LDQwNS45N

　　DEsMzE0LjQyOCw0MDEuMDgyeiIvPg0KPC9zdmc+DQo=);

　　8、Sprites图

　　Sprites(雪碧图)技术可以把经常使用的图片合成为一张图片，从而减少http请求，比如当你将四张图片合成到一个sprite中后，http请求从4减少到1，需要显示的图片利用background-position属性来控制。

　　9、字体图标