文章标签 » data-uri

利用data-uri合并样式表和图片

2010.9.13更新下载地址
http://code-of-emptyhua.googlecode.com/svn/trunk/web-dev/data-uri.py
—————————————-
data-URI是一种允许将图片直接嵌入页面或者样式表中的标准,新版本的firefox,safari,chrome,ie8均已支持,所以可以利用data-URI将样式表中的背景图片合并到文件,以减少连接数,加快网页的载入速度.

但是由于低于ie8的ie版本均不支持data-URI,所以要通过mhtml对ie6,7版本特殊照顾(ie中将网页保存为单个.mht文件时使用了该标准)

通过data-URI编码的图片要比原图大1/3,而且如果图片在样式表中反复出现,转换后的体积将比原文件加图片的体积不只大1/3,但是由于传输一般走gzip,客户端也有缓存,所以可以无视吧….

恩,技术就是这么点,本来要用这个搞一下优化,但是老大没有点头,白写了脚本,不过学了会python也没用过,算练练手

下面这个就是通过脚本转换的曾经风靡全球的css garden的页面

https://bluehua.org/demo/data_uri/cssgarden/

页面加载完毕只有两个请求,一个html,一个css

转换文件使用的参数

python /home/hualu/bin/data-uri.py -l /media/we/share/cssgarden/ -r https://bluehua.org/demo/data_uri/cssgarden/ /media/we/share/cssgarden/001

既然用不着,脚本也就一直beta下去了,啊….

python脚本下载