利用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脚本下载

讨论

  1. 天堂左我往右

    嘿嘿,”而且如果图片在样式表中反复出现”,那就一个class搞定啦

  2. 小鹿

    恩,最近又看了某大神的又一篇文章,对data-uri的问题有更详细的说明,这个东西还是不够可行~

加入讨论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据