05 Oct 2010WP提速 - “化解”HTML中的小图标
HTTP 请求是很费时间的，主要花费在建立连接的过程中。其实真正传输 1K 和 10K 数据的时间相差无几，但哪怕你请求的是一个仅有几字节的小文件，一样需要花费一定的连接时间。
这个时候 CSS Sprites (tools via1 via2) 和 Inline Images with Data URLs 就可以帮上大忙了。
CSS Sprites 的思想是把很多张小图片（如：图标）整合为一张大图，再利用 CSS 的 background-position 属性在正确的地方显示正确的图标。这样的好处就是把原来的 n 个 HTTP 请求减少至 1。
Inline Images with Data URLs 的思想是干脆直接把装饰性的小图片写在 CSS 或 HTML 中，不需要 HTTP 请求。当然不能直接在文本中写二进制的 0101，但经过 base64 编码后就可以了。基本的用法是：
data:[<mediatype>][;base64],<data> |
例：
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAGvSURBVDjLpZO7alZREEbXiSdqJJDKYJNCkPBXYq12prHwBezSCpaidnY+graCYO0DpLRTQcR3EFLl8p+9525xgkRIJJApB2bN+gZmqCouU+NZzVef9isyUYeIRD0RTz482xouBBBNHi5u4JlkgUfx+evhxQ2aJRrJ/oFjUWysXeG45cUBy+aoJ90Sj0LGFY6anw2o1y/mK2ZS5pQ50+2XiBbdCvPk+mpw2OM/Bo92IJMhgiGCox+JeNEksIC11eLwvAhlzuAO37+BG9y9x3FTuiWTzhH61QFvdg5AdAZIB3Mw50AKsaRJYlGsX0tymTzf2y1TR9WwbogYY3ZhxR26gBmocrxMuhZNE435FtmSx1tP8QgiHEvj45d3jNlONouAKrjjzWaDv4CkmmNu/Pz9CzVh++Yd2rIz5tTnwdZmAzNymXT9F5AtMFeaTogJYkJfdsaaGpyO4E62pJ0yUCtKQFxo0hAT1JU2CWNOJ5vvP4AIcKeao17c2ljFE8SKEkVdWWxu42GYK9KE4c3O20pzSpyyoCx4v/6ECkCTCqccKorNxR5uSXgQnmQkw2Xf+Q+0iqQ9Ap64TwAAAABJRU5ErkJggg==" /> |
可以借助 Motobit Software 在线生成 base64 的图片内容。
Inline Images with Data URLs 的局限：
- IE 5-7 不支持，IE 8 支持。为了兼容 IE，可以把这些部分单独写入 IE 专用的 CSS 文件中。
- 文本形式的图片占用比二进制更多的字节。Base64 格式比二进制大 39%~45%，在 gzip 压缩后，这个比例减小至 8%~9%。最好在 base64 编码之前优化图片本身。
- 浏览器对 inline 图片有大小限制。Opera 最大支持 4,100 字节，Firefox 最大支持 100K。所以最好只应用在小图片上。
补充一点：CSS Sprites 和 Inline Images with Data URLs 是可以同时使用的。
Til next time,
Jason at 00:00
