不管如何，图片的下载始终都要向服务器发出请求，要是图片的下载不用向服务器发出请求，而可以随着 HTML 的下载同时下载到本地那就太好了。而目前，浏览器已经支持了该特性，我们可以将图片数据编码成 BASE64 的字符串，使用该字符串代替图像地址。假设用?S代表这个 BASE64 字符串，那么就可以使用 <img src="data:image/png;base64,S"> 来显示这个图像。可以看出，图像的数据包含在了 HTML 代码里，无需再次访问服务器。那么图像要如何编码成 BASE64 字符串呢？可以使用?在线的工具---“Base64 Online”，这个工具可以上传图片将图片转换为 BASE64 字符串。当然，如果读者有兴趣，完全可以自己实现一个 BASE64 编码工具，比如使用 Java 开发，它的代码就如清单 7 所示。
清单 6. BASE64 的 Java 代码
public static String getPicBASE64(String picPath) {
String content = null;
try {
FileInputStream fis = new FileInputStream(picPath);
byte[] bytes = new byte[fis.available()];
fis.read(bytes);
content = new sun.misc.BASE64Encoder().encode(bytes); // 具体的编码方法
fis.close();
} catch (Exception e) {
e.printStackTrace();
}
return content;
}
?
本文编码了一个图像，并且将编码获得的 BASE64 字符串，写到了 HTML 之中，如下清单 8 所示。
清单 7. 嵌入 BASE64 的测试 HTML 代码
<html> <body> <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAeQAAAB8BAMAAABKwt5QAAAAA3NCSVQICAjb4U/gAAAAGFBMVEX/ ……（省略了大部分编码）… BJRU5ErkJggg=="> </body> </html>
?
由于图片数据包含在了 BASE64 字符串中，因此无需向服务器请求图像数据，结果显示如下图所示。
图 9. BASE64 显示图像
?然而这种策略并不能滥用，它适用的情况是浏览器连接服务器的时间 > 图片下载时间，也就是发起连接的代价要大于图片下载，那么这个时候将图片编码为 BASE64 字符串，就可以避免连接的建立，提高效率。如果图片较大的话，使用 BASE64 编码虽然可以避免连接建立，但是相对于图像下载，请求的建立只占很小的比例，如果用 BASE64，对于动态网页来说图像缓存就会失效（静态网页可以缓存），而且 BASE64 字符串的总大小要大于纯图片的大小，这样一算就非常不合适了。因此，如果你的页面已经静态化，图像又不是非常大，可以尝试 BASE64 编码，客户端会将网页内容和图片的 BASE64 编码一起缓存；而如果你的页面是动态页面，图像还较大，每次都要下载 BASE64 字符串，那么就不能用 BASE64 编码图像，而正常引用图像，从而使用到浏览器的图像缓存，提高下载速度。从现实我们接触的角度看，如一些在线 HTML 编辑器，里面的小图标，如笑脸等，都使用到了 BASE64 编码，因为它们非常小，数量多，BASE64 可以帮助网页减少图标的请求数，提高效率。
原创文章@java教程网?转载请标明出处
java教程网编辑发布:希望本系列的文章对你的个人成长和发展有帮助。
从java新手入门,开发工具到 Java进阶,高级编程,java教程网几乎囊括了java编程的所有方面的资料。