关于base64、img、css sprite的一些

2015年07月18日

起因

想做图片优化的时候,发现自己对用img/sprite/background/base64并没有一种很好的理解,问了同事,感觉大家伙也是更多的凭感觉去选择。

零散的输入

就我脑子里有印象的相关信息大概是以下几点:
1.关于img标签和background的使用: 如果是固定的,与内容无关(不是从服务器端读取或者需要根据数据替换)的图片应该是用background的。这样做的原因大概是background可以拼成sprite图,从而减少http请求。

2.如果一些图标需要特殊意义,比如alt提示什么的,那还是用img标签更合理一些,比如logo什么的。

3.sprite可以减少请求数,这个是页面优化的一个重要点。为什么要减少请求,因为发送的每一个请求都是有请求头的,有时候,为了请求一个图标,request带的数据比图标本身数据还大,其次,http建立连接,三次握手的时间也是很长的,如下图可以看到,请求一张图片过程中,初始化连接,dns解析,等待的时间远远大于下载图片本身的时间。

图片显示

4.sprite的缺点在于难以维护,一旦有图片修改或者添加,等于要重新组合成sprite,甚至代码要重新整理。sprite在线合成工具

5.base64可以直接将图片信息保存在html或者css文档里,从而减少了请求数。问题在于base64编码后的文件体积会非常庞大,会使得html和css文件非常的臃肿。

那么接下来的问题就是,在已知上述几种方式的弊端后如何取舍的问题了。

小测试

<style type="text/css">
		.sprite {
		    background-image: url("http://b0.hucdn.com/party/default/c990828dec24e3354c60f292f281575e_260x260.png");
		    background-repeat: no-repeat;
		    display: inline-block;
		    width: 120px;
		    height: 120px;
		}
		.sprite-1 {
		    background-position: -5px -5px;
		}
		.sprite-2 {
		    background-position: -135px -5px;
		}
		.sprite-3 {
		    background-position: -5px -135px;
		}
	</style>
</head>
<body>
    <!-- <img src="http://b0.hucdn.com/party/default/d535e935f4e7ae6a4dbe9b502f24b29d.jpg">
    <img src="http://b0.hucdn.com/party/default/532036a28c2495627a27f55b3b44f326.jpg">
    <img src="http://b0.hucdn.com/party/default/b8a3c82166631897a4cd02ebd4741ae9.jpg"> -->
	
	<i class="sprite sprite-1"></i>
	<i class="sprite sprite-2"></i>
	<i class="sprite sprite-3"></i>
	
    <!-- <img src="data:image/jpeg;base64,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">
    <img src="data:image/jpeg;base64,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">
    <img src="data:image/jpeg;base64,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"> -->
</body>

图片显示

上述代码我测试了直接使用base64、sprite以及img标签方式展示三张图片,下面是chrome开发者工具截取的一些数据供参考。

图片显示

图片显示

图片显示

上述三张图依次为base64、sprite以及img在network下所有的请求数据。

图片显示

图片显示

图片显示

上述三张图依次为base64、sprite以及img在network下所有图片的请求数据。

从第一组图可以看到,DOMContentLoaded(DOMContentLoaded事件触发时,仅当DOM加载完成)完成的时间base64>img>sprite,我们光从代码就可以看出base64使得整个html文件臃肿了很多,而且我只是用了三张图片,三张图片本身尺寸也不大。但是我们关注到onload(页面上所有的DOM,样式表,脚本,图片,flash都已经加载完成了)事件完成的时间base64<sprite<img,其中base64明显是快了很多。

看到图一的request数量的时候我还是疑惑了,不是说好的base64可以减少http请求么,而实际我们看到base64和img下request是一样的都是4次(三张图+1个html文档,从图二也可反映)。但是我们可以注意到base64中没有图片大小0 B/0 B transferred,下图可以看到每张图片的timeline里面只有下载的时间,没有http请求相关的时间。反而sprite的文件大小更大了,三张图片合成一个css sprite后我没有做图片压缩。

图片显示

最后

上述只是一个很简陋的例子,甚至数据也不一定科学。我们在选用任何方式展示图片的时候都要权衡一下利弊。像我觉得base64虽然可以比较好的优化性能(做无线,兼容性的问题暂且不表),但是那么臃肿的文件,强迫症简直不能忍。所以我更多的采用开发过程中使用img和background,最后将可以合并的图片合成sprite上线。

参考连接
参考链接