在Html5中，可以将图片经过base64编码后直接写在HTML中来展示图片，使用这种方式可以减少Http请求数量，从而可加快页面展示，同时也减少了很多对服务器的压力。

例: <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAA3NCSVQICAjb4U/gAAABaFBMVEX////w9v
jl9vbt8fbu8O7h8/Xe7u3l6+zU7/Ln6ejM7e3e5ebc5N3W4uXE5ufP4OXW3d7c2dK13t3F2dq63N/P1NXE1Nel2+PN0NTFzs3MzMy8zdar0tO9y8vLx8a7xMe2v7
66vcGGyNatvL6kvcaRv8Grtbd5w81QzNp6wNCltrqVucJDzdtJytZKx9dFxdWjrK+WrrQ7xddgur5WvMWPrK50r7eQp7I+u9E1vM4nvstRsr6Bpa4zuMqBn6U6s
cgptcdWprUjssIqrsIirrwvq7YqrLpzl6ljmqZnmp5UnaUYrLofpbl7jo4WorQXoLphjZ1OkpdfiJQJn7Q1kpwTm6cVmK9hhYc5i5pShJRPhIsAmLIFkqUpiZgC
jKIhgpY1eYkcfZYBhJUAg5ogeY45cX0Afo0qcoQWdY0Ae5MhbX8uaXMOboMYZYAZZW8PYnoGYn0BY3gFXnQXV2oAVG0AUWEARV8APFAHZibEAAAAeHRSTlMA////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////+xAWK7AAAACXBIWXMAAArwAAAK8AFCrDSYAAAAFnRFWHRDcmVhdGlvbiBUaW1lADAzLzE4LzEwzvrN4wAAAB90RVh0U
29mdHdhcmUATWFjcm9tZWRpYSBGaXJld29ya3MgOLVo0ngAAAJKSURBVDiNnZT9W9JQFMeHggSLmvLShuGA1ZyVvAyrgW5ON8gEhZQICIcOIV4kEEf++62ngnvHV
j2dH8Zzvnye83LPuRdB/ttsnkAo5HX+DXtWag9/2Jcj7x+xtnZ7073SrTsalR5bYStn09vu9XW3q3/0n8nXpM2Uc7Snw+HNeNS/vOyPJhM9v1ZbMQNr0/FY679b1/t
wBpK1u+lk9O3MhEMHmqa998z8QH2qae1Fzo7W7wfrkPTy7r60WCWGCwsVeQcCaiRdhN+kRRtGuAyKnzSfBY7bId9J4KacngkOiYVQcxDBMcj1E3YLEINqX8YtMuvHiy
+DJWKYFegkPfNkTtw6IhYmZ//Zw7pZNIOSNB35HRKlCYoKWgWkyMjshIJ0iCLMQX8iRJOAS51YgNTJC7BPR/jT8UHq0QK2tluuJ8DjQekPndZ59oGBc2dPlabgByu
hy71iRt40gKlTrqIKQIlIiL5oSXxmH96gtUI6nlOF8Hwt7ESiqfAce+iDwB05FpN08OEcDNLNRpp9lYmCnDObZmK8uheZgzbiF7gDZ44zjKS+BcGNnyC7D65UVN5
mmJwOAtPFIhcKr4MSeL2iIsNsF9RkEFhV+0a1JaXjrAQ+N1tiLBavXEGTQfzHvUKaZWXwCdsU43FOqQIl6ra616uIPC+DU4zKHCepRxvQ7XIlVUUWxbwb0J7
kOa7Yeb2KQEZUWx8P81lwARw5UWxUI4YXAHneaRQ/pyBp67zYEYwcgrzpKVk3pCztNspmN8T31GFQlnxG5R/sO0Pyadz9Z5fwAAAAAElFTkSuQmCC"/>

但这种将图片直接嵌入html中的用法，也会带来一些问题，
　　　　问题一：同样的图片无法重复使用，每使用一次都要重复输出一遍图片代码，增加了html自身大小；
　　　　问题二：假设html页面不做缓存（通常动态页面都会这么做），那么页面中引用的图片资源就无法缓存在浏览器中，相当于每次请求都会重新加载一遍图片。

由于存在着以上两个问题，就需要综合考虑是否值得使用DataURI的形式加载图片了。

这里也说明一下，使用CSS Sprites同样也能减少图片产生的大量http请求。由于CSS Sprites必须将图片用做背景，就会导致以下缺点，
　　　　一来：修改图片很不方便；
　　　　二来：经常会在html代码中包含很多空标签（只为给background提供一个展示的空间）；
　　　　三来：会丧失许多图片自身的特性。

所以如果不能使用CSS Sprites，又要解决DataURI的问题，该怎么办呢？

解决方案也很简单，
　　　　第一步：建一个img.js文件，将DataURI的数据放到一个变量里，设置一下这个img.js文件的缓存时间（这段时间浏览器不会重复加载这个文件）；
　　　　第二步：将多个图片逐个转成base64编码，全部放到img.js文件中；
　　　　第三步：在html文件中动态创建img标签，将前面变量里的DataURI数据赋给img的src（变量是固定的可以重复使用）

经过以上三步就可以达到和CSS Sprites一样的效果了（只用一个http请求即可下载多个图片，同时也可以设置图片缓存时间），但我们可以让每个图片按照图片的模式工作，从而摆脱了background的束缚。

DataURI浏览器支持情况：
　　　　Firefox 2+
　　　　Opera 7.2+ - data URI必须少于4100个字符
　　　　Chrome (all versions)
　　　　Safari (all versions)
　　　　Internet Explorer 8+ - data URI必须小于32k

附上图片转base64的php代码，仅供参考！

<?php
　　　　$file = realpath($_GET['img']);
　　　　$pathParts = pathinfo($file);
　　　　$extName = $pathParts['extension'];
　　　　if($fp = fopen($file,"rb", 0))
　　　　{
　　　　　　$picture = fread($fp,filesize($file));
　　　　　　fclose($fp);
　　　　　　$img = '<img src="data:image/' . $extName . ';base64,' . base64_encode($picture) . '"/>';
　　　　　　file_put_contents("tmp/{$pathParts['basename']}.txt", $img);
　　　　}
　　?>

演示：os.heimali.com（DataURI演示仅支持Webkit内核）