蓝色的华 » data-uri http://bluehua.org 分享所学,backup一切~ Wed, 23 Nov 2011 08:43:10 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 利用data-uri合并样式表和图片 http://bluehua.org/2009/05/17/295.html http://bluehua.org/2009/05/17/295.html#comments Sun, 17 May 2009 06:41:00 +0000 冥王星2011 http://bluehua.org/?p=295 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的页面

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

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

转换文件使用的参数

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

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

python脚本下载

]]> http://bluehua.org/2009/05/17/295.html/feed 2